ajax 是什么？有什么作用？

• AJAX = 異步 JavaScript 和 XML。
  AJAX 是一種用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術(shù)。
  通過在后臺與服務(wù)器進行少量數(shù)據(jù)交換，AJAX 可以使網(wǎng)頁實現(xiàn)異步更新。這意味著可以在不重新加載整個網(wǎng)頁的情況下，對網(wǎng)頁的某部分進行更新。
• 優(yōu)點：
  更新數(shù)據(jù)而不需要刷新頁面： 它能在不刷新整個頁面的前提下與服務(wù)器通信維護數(shù)據(jù)，由于ajax是按照需求請求數(shù)據(jù)，避免發(fā)送那些沒有改變的數(shù)據(jù)。
  異步通信： 它與服務(wù)器使用異步的方式通信，不會打斷用戶的操作（卡死頁面）。
  前后端負載平衡： 可以將后端服務(wù)器的一些工作轉(zhuǎn)移給客戶端，利用客戶端限制的能力來處理，減輕了服務(wù)器的負擔。
  數(shù)據(jù)與呈現(xiàn)分離： 利于分工，降低前后耦合。
• 缺點：
  瀏覽器歷史記錄的遺失： 在使用AJAX對頁面進行改變后，由于并沒有刷新頁面，沒有改變頁面的訪問歷史，當用戶想要回到上一個狀態(tài)時，無法使用瀏覽器提供的后退。
  AJAX的安全問題： AJAX的出現(xiàn)就像建立起了一直通服務(wù)器的另一條通道，容易遭受到一些攻擊。

前后端開發(fā)聯(lián)調(diào)需要注意哪些事情？后端接口完成前如何 mock 數(shù)據(jù)？

• 前后端開發(fā)聯(lián)調(diào)需要注意哪些事情:
  約定數(shù)據(jù): 后端數(shù)據(jù)寫好,放在模板里,前端可以寫頁面,互不影響
  約定接口: 請求和響應(yīng)的格式;接口名稱,請求參數(shù),響應(yīng)

• 后端接口完成前如何mock數(shù)據(jù)
  mock數(shù)據(jù)指的是在后端開發(fā)沒有完成時，前端可以通過mock方法搭建本地服務(wù)器，模擬后臺數(shù)據(jù)來實現(xiàn)數(shù)據(jù)交互的效果。
  可安裝xampp在本地搭建(php等)服務(wù)器，也可以安裝server-mock，這樣不需要特地去寫一個后臺的處理頁面文件來訪問數(shù)據(jù)。

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

設(shè)置一個狀態(tài)鎖,在觸發(fā)ajax前是鎖定的,之后若重復(fù)點擊都不會觸發(fā)ajax,直到代碼執(zhí)行完在接觸鎖定.

  var isloading = false;  // 設(shè)置狀態(tài)鎖，用于是否在加載數(shù)據(jù)
  btn.addEventListener('click', function(e) {
        e.preventDefault();     //  防止點擊 a 鏈接頁面跳到頂部
  }
       if(isLoading) {
          return;                 //  //如果正在請求數(shù)據(jù)，那這次點擊什么都不做
  }

  ajax('/loadMore', {
  idx: curIndex,
  len: len
  }, function(data){
        appendData(data)
        isLoading = false   //數(shù)據(jù)到來之后 解鎖
        curIndex = curIndex + len  //修改序號，下次要數(shù)據(jù)就從新序號開始要
        console.log(curIndex)
})
  isLoading = true   //發(fā)請求之前做個標記加鎖

})

實現(xiàn)加載更多的功能，后端在本地使用server-mock來模擬數(shù)據(jù)

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('出錯了')
    }
  })
});