ajax实践

1： ajax 是什么？有什么作用？

ajax是异步的js和XML(Async JavaScript And XML)，是一种技术泛称
可以异步传递数据和获取数据，这就使ajax可以在不加载整个页面的情况下对页面局部更新，使用户体验更佳。

2： 前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？

• get还是post方法
• 约定数据接口和格式，前端提供参数，后台响应时返回什么格式
• 约定每次请求数据数量
  如何mock数据？
  使用server mock搭建本地服务器，模拟网站后端，使用server-mock首先得下载nodejs，然后下载server-mock（npm install -g server-mock），下载完成后，在目标文件文件夹创建一个router.js文件夹，用来接收和处理后端的请求文件（mock init可创建范例）；最后mock start启动一个web服务器

3：点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?

 var isDataArrive = true   //设置一个状态锁初始为true
    btn.addEventListener('click', function(e){
        e.preventDefault()
        if (!isDataArrive) {
            return          //数据没到来时为true
        }   
        if(xhr.readyState === 4){
            if (xhr.status === 200 || xhr.status === 304) {
                //  dosomething
            }
            isDataArrive = true  //数据到来后变为true
        }
    }

      xhr.open('get', '/loadmore?index='+ pageIndex +'&length=5', true)
      xhr.send()
      isDataArrive = false     //发送数据之后数据到来前点击没用
    })

4：实现加载更多的功能，后端在本地使用server-mock来模拟数据

  

    
  
  加载更多
  


//后端
router.get('/loadmore',function(req,res){
  var curIdx = req.query.index
  var len = req.query.length
  var data = []
  for (var i = 0; i < len; i++) {
     data.push('新闻' + (parseInt(curIdx) + i ))
  }
  
  setTimeout(function(){
      res.send(data)
  },5000)
})   
//模拟慢网速