1.AJAX是什么？有什么作用？

AJAX是什么：ajax全称Asynchronous javascript and XML 简称异步的javascript 和 XML。AJAX能通过后台与服务器进行数据交换，在不重新加载页面整个页面的情况下，更新部分网页的技术。

作用：当我们向后台传输数据或获取数据的时候，我们的网页不需要不断重新刷新加载而是异步加载后续代码并同时等待当前请求的响应。

优点
1、最大的一点是页面无刷新，用户的体验非常好。
2、使用异步方式与服务器通信，具有更加迅速的响应能力。。
3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。
5、ajax可使因特网应用程序更小、更快，更友好。

缺点

1、ajax不支持浏览器back按钮。
2、安全问题 AJAX暴露了与服务器交互的细节。

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

• 约定接口：接口名称、参数名称统一，制定规范
• 接口传什么：数据类型以及数据大小限制确定
• 接口相关参数：服务器、端口、方法、请求数据的一些限制

使用服务器框架搭建模拟服务器环境，是用模拟数据验证接口是否正常，可以用node.js来搭建。用server-mock来模拟。

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

var isDataArrive = true;
btn.addEventListener('click',function(){
    if(!isDataArrive){
        return;
    }
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        if(xhr.readystate ===4){
            if(xhr.status === 200 || xhr.status === 304){   
                //do sth
            }else{
                console.log("出错了");
            }
            isDataArrive = true; 
        }
    };
    xhr.open('get','/loadMore?index=0''&length=5',true)
    xhr.send()
    isDataArrive = false;
});

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

前端代码：

<script>

var btn = document.querySelector('#load-more');
var ct = document.querySelector('#ct');
var pageIndex = 0;
var isDataArrive = true;
btn.addEventListener('click', function(e){
e.preventDefault();

if(!isDataArrive){
  return;
}

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
  if(xhr.readyState === 4){
    if( xhr.status === 200 || xhr.status == 304){
      var results = JSON.parse(xhr.responseText);
      console.log(results);
      var fragment = document.createDocumentFragment();
      for(var i = 0; i < results.length; i++){
        var node = document.createElement('li');
        node.innerText = results[i];
        fragment.appendChild(node);
      }
      ct.appendChild(fragment);
      pageIndex = pageIndex + 5 ;
    }else{
    console.log('出错了');
    }
    isDataArrive = true;
  }
};
xhr.open('get', '/loadMore?index='+pageIndex+'&length=5', true);
xhr.send();
isDataArrive = false;

});
</script>

后端代码：

app.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);
  }, 1000)    
});

第一次加载 第二次加载

【个人总结，如有错漏，欢迎指出】
：>