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

ajax(synchronous JavaScript and XML),是异步的js和xml通过与后台服务器进行少量的数据交换，从而实现页面不重新加载的情况下，对某部分进行更新

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

前后端开发联调需要注意事项：

约定数据：有哪些需要传输的数据，数据类型是什么；
约定接口：确定接口名称及请求和响应的格式，请求的参数名称、响应的数据格式；
根据这些约定整理成接口文档
如何mock数据：
可以根据接口文档，使用假数据来验证我们制作的页面响应和接口是否正常。
可以用xampp进行模拟
也可使用server-mock

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

设置状态锁

  var lock=true;
    document.querySelector('#btn').addEventListener('click', function(){
    if(!lock){
      return;
    }
    ajax({
         .......
          lock=true;
     })
    lock=false;

利用ajax异步原理，当数据未到来时对状态封锁，屏蔽用户的点击

4：封装一个 ajax 函数，能通过如下方式调用。后端在本地使用server-mock来 mock 数据

function ajax(opts){
    // todo ...
}
document.querySelector('#btn').addEventListener('click', function(){
    ajax({
        url: '/login',   //接口地址
        type: 'get',               // 类型， post 或者 get,
        data: {
            username: 'xiaoming',
            password: 'abcd1234'
        },
        success: function(ret){
            console.log(ret);       // {status: 0}
        },
        error: function(){
           console.log('出错了')
        }
    })
});
});

    function ajax(opts){
      opts.type=opts.type||"get";
      opts.datatype=opts.datatype||"json";
      opts.data=opts.data||{};
      opts.success=opts.success||function(){};
      opts.errot=opts.errot||function(){};
      var xml=new XMLHttpRequest();
      xml.onreadystatechange=function(){
        if(xml.readyState===4){
          if(xml.status===200||xml.status===304){
              if(opts.dataType==="text"){
                opts.success(xml.responseText);
              }
              if(opts.dataType==="json"){
                var json=JSON.parse(xml.responseText);
                opts.success(json);
              }
          }else{
            opts.error();
          }
        }
      }
      var dataStr="";
      for(var key in opts.data){
        dataStr+=key+"="+opts.data[key]+"&";
      }
      dataStr=dataStr.substr(0,dataStr.length-1);
      if(opts.type.toLowerCase()==="post"){
        xml.open(opts.type,opts.url,true);
        xml.setRequestHeader("content-type","application/x-www-from-uclencoded");
        xml.send(dataStr);
      }
      if(opts.type.toLowerCase()==="get"){
        xml.open(opts.type,opts.url+"?"+dataStr,true);
        xml.send();
      }
    }

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

<body>
  <ul class="ct"></ul>
  <input type="button" class="btn" value="加载更多">
  <script>
    var lock=true;
    var pageIndex=0;
    $('.btn').addEventListener('click', function(){
      if(!lock){
        return
      }
      loadData(function(news){
      getMore(news)
      pageIndex+=5;
      lock=true;
     })
     lock=false;
    })


  function loadData(callback){
    ajax({
        url: '/list',   //接口地址
        type: 'get',               // 类型， post 或者 get,
        data: {
          index: pageIndex,
          length: 5
        },
        dataType: "json",
        success: callback,
        error: function(){
           console.log('出错了')
        }
    })
  }
 
    function getMore(news){
      var box=$(".ct");
      var fragment=document.createDocumentFragment();
      for(var i=0;i<news.length;i++){
        var node=document.createElement("li");
        node.innerText=news[i];
        fragment.appendChild(node);
      }
      box.appendChild(fragment);
    }



    function ajax(opts){
      opts.type=opts.type||"get";
      opts.datatype=opts.datatype||"json";
      opts.data=opts.data||{};
      opts.success=opts.success||function(){};
      opts.errot=opts.errot||function(){};
      var xml=new XMLHttpRequest();
      xml.onreadystatechange=function(){
        if(xml.readyState===4){
          if(xml.status===200||xml.status===304){
              if(opts.dataType==="text"){
                opts.success(xml.responseText);
              }
              if(opts.dataType==="json"){
                var json=JSON.parse(xml.responseText);
                opts.success(json);
              }
          }else{
            opts.error();
          }
        }
      }
      var dataStr="";
      for(var key in opts.data){
        dataStr+=key+"="+opts.data[key]+"&";
      }
      dataStr=dataStr.substr(0,dataStr.length-1);
      if(opts.type.toLowerCase()==="post"){
        xml.open(opts.type,opts.url,true);
        xml.setRequestHeader("content-type","application/x-www-from-uclencoded");
        xml.send(dataStr);
      }
      if(opts.type.toLowerCase()==="get"){
        xml.open(opts.type,opts.url+"?"+dataStr,true);
        xml.send();
      }
    }


    function $(id){
      return document.querySelector(id);
    }
    function $$(cls) {
      return document.querySelectorAll(cls);
    }
    
  </script>

</body>

后台模拟数据

app.get('/list', function(req, res) {
    var index = req.query.index; // 通过 req.query获取请求参数
    var length= req.query.length;
    var arr=[];
  for(var i=0;i<length;i++){
        arr.push("新闻"+(parseInt(index)+i));
    }
        res.send(arr);
});