ajax 是什么？有什么作用？

Ajax是Asynchronous JavaScript and XML的缩写，这一技术能够向服务器请求额外的数据而无需卸载整个页面，会带来良好的用户体验。传统的HTTP请求流程大概是这样的，

浏览器向服务器发送请求
服务器根据浏览器传来数据生成response
服务器把response返回给浏览器
浏览器刷新整个页面显示最新数据
这个过程是同步的，顺序执行

AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求）从服务器获取数据
这里的异步是指脱离当前浏览器页面的请求、加载等单独执行，这意味着可以在不重新加载整个网页的情况下，通过JavaScript发送请求、接受服务器传来的数据，然后操作DOM将新数据对网页的某部分进行更新，使用Ajax最直观的感受是向服务器获取新数据不需要刷新页面等待了

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

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

约定数据：有哪些需要传输的数据，数据类型是什么；
约定接口：确定接口名称及请求和响应的格式，请求的参数名称、响应的数据格式；
根据这些约定整理成接口文档

如何mock数据：

可以根据接口文档，使用假数据来验证我们制作的页面响应和接口是否正常。
也可使用server-mock

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

伪代码：
var isLoading= true, //设置一个状态锁
 btn = document.qureySelector('#btn');
btn.addEventListener("click",function(){
   if(isLoading){                  //每次触发点击事件 判断锁状态
       isLoading= false;         // 更改所状态，防止二次请求
       ajax（function(){
          isLoading= true;     //异步请求处理完成，还原锁状态
      });       
   }
});

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

<body>
  <button id="btn">点我</button>
</body>
<script>
 function ajax(opts){
     opts.url = opts.url || '';
     opts.type = opts.type || 'get';
     opts.data = opts.data || null;
     opts.dateType = opts.dateType || 'json';
     opts.success = opts.success || function(){};
     opts.error = opts.error || function(){};
     var str = '';
     if(opts.data){
      for(var key in opts.data){
        str += key + '=' + opts.data[key] +'&';
      }
     }
     var xmlhttp = new XMLHttpRequest();
     xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            if(opts.dateType == 'text'){
              opts.success(xmlhttp.responseText);
            }
            if(opts.dateType == 'json'){
              var json = JSON.parse(xmlhttp.responseText);
              opts.success(json);
            }else{
              opts.error();
            }

        }
    }
     xmlhttp.open(opts.type,opts.url,true);
     if((opts.type.toLowerCase()) == 'post'){
       xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
     }
     xmlhttp.send(str);
     

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

  <style>
    ul,li{
      margin:0;
      padding:0;
      list-style: none;
      line-height: 1.8;
    }
    li {
      border:1px solid #ccc;
      margin-top:10px;
      padding:5px 10px;
    }
    li:hover {
      color: white;
      background-color: green;
    }
    #btn {
      display: block;
      width: 64px;
      margin: 10px auto;
      color:#E27272;
      border: 1px solid #E27272;
      text-decoration: none;
      padding: 11px 8px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <ul>
    <li class="item">内容1</li>
    <li class="item">内容2</li>
  </ul>
  <a href="#" id="btn">加载更多</a>
</body>
<script>
 function ajax(opts){
     opts.url = opts.url || '';
     opts.type = opts.type || 'get';
     opts.data = opts.data || null;
     opts.dateType = opts.dateType || 'json';
     opts.success = opts.success || function(){};
     opts.error = opts.error || function(){};
     var str = '';
     if(opts.data){
      for(var key in opts.data){
        str += key + '=' + opts.data[key] +'&';
      }
     }
     var xmlhttp = new XMLHttpRequest();
     xmlhttp.onreadystatechange = function () {
        isLoading = false;
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            if(opts.dateType == 'text'){
              opts.success(xmlhttp.responseText);
            }
            if(opts.dateType == 'json'){
              var json = JSON.parse(xmlhttp.responseText);
              opts.success(json);
            }else{
              opts.error();
            }

        }
         isLoading = true;
    }
     xmlhttp.open(opts.type,opts.url,true);
     if((opts.type.toLowerCase()) == 'post'){
       xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
     }
     xmlhttp.send(str);
     

 }
 var curIndex = 2;
 var len = 5;
 var isLoading = true;
 var ulElement = document.querySelector('ul');
 document.querySelector('#btn').addEventListener('click', function(e){
     e.preventDefault(); //防止a链接默认事件
     console.log("-------------");
     if(!isLoading)
     return;
     ajax({
         url: 'login',   //接口地址
         type: 'get',               // 类型， post 或者 get,
         success: function(ret){
             var text = ret.msg;
             for(var i=0;i<len;i++){
                var liElement = document.createElement("li");
                curIndex++;
                liElement.innerText = text + curIndex;
                ulElement.appendChild(liElement);
             }
         },
         error: function(){
            console.log('出错了')
         }
     })
 });
</script>