ajax 是什么？有什么作用？

AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML 通過在后臺與服務器進行少量數據交換）AJAX 可以使網頁實現異步更新。這意味著用戶單擊后，可以不必刷新頁面也能取得新數據。也就是說，可以使用XHR對象取得新數據，然后通過DOM將數據插入到頁面中，另外。雖然名字中包含著XML的部分，但Ajax通信與數據格式無關，不一定是xml數據。
作用：實現網頁的異步加載，局部刷新網頁。當在向服務器獲取新數據時不需要刷新整個網頁，提高用戶體驗。

前后端開發聯調需要注意哪些事情？后端接口完成前如何 mock 數據？

• 前后端開發聯調需要注意事項：
  約定數據：有哪些需要傳輸的數據，數據類型是什么；
  約定接口：確定接口名稱及請求和響應的格式，請求的參數名稱、響應的數據格式；
  根據這些約定整理成接口文檔
• 如何mock數據：
  可以根據接口文檔，使用假數據來驗證我們制作的頁面響應和接口是否正常。
  可以搭建php本地服務器用，php寫腳本提供臨時數據；
  也可使用server-mock

點擊按鈕，使用 ajax 獲取數據，如何在數據到來之前防止重復點擊?

var lock = fales;
btn.addEventListener('click',function(){
     if(lock){
        return
   }else{       
                  lock true;
                  //  .......
                  xhr.onreadystatechange = function(){
                  //do something
                   lock = false;  
               }
          xhr.send();
  }
  })

封裝一個 ajax 函數，能通過如下方式調用。后端在本地使用server-mock來 mock 數據

function ajax(opts) {
var type = opts.type || 'get';
type = type.toLowerCase() || 'get';
var url = opts.url || '';
var date = opts.date || null;
var success = opts.success || function(){};
var error = opts.success || function(){};
var xhr = window.XMLHttpRequest? new XMLHttpRequest():new ActiveXObject('microsoft.XMLHTTP');
var dateArry = [];
for(var key in date){
    dateArry.push(key + '=' +date[key]);
}
var dateStr = dateArry.join('&');
if(type === 'get'){
    xhr.open(type,url+'?'+dateStr,true);
    xhr.send();
}else{
    xhr.open(type,url,true)
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
    xhr.send(dateStr)
}
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4  && xhr.status === 200){
        success(xhr.responseText)
    }else{
        error();
    }
}
}
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('出錯了')
        }
    })
});