ajax

• Ajax全稱是Asynchronous JavaScript and XML，指的是通過Javascript腳本發(fā)起HTTP通信管钳；
• 它可以使用原生的XMLHttpRequest對象向服務(wù)器發(fā)出HTTP請求，這個請求可以是同步或異步的（一般是異步），建立連接后可以得到服務(wù)器的數(shù)據(jù)，我們就可以利用得到的數(shù)據(jù)通過JS來更新部分頁面而無需對整個頁面進(jìn)行刷新聪姿。

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

• 前后端聯(lián)調(diào)需要注意：①確定接口信息末购；有哪些接口，哪些參數(shù)虎谢，以什么樣的請求等盟榴，一般要確定詳細(xì)的接口文檔。②確定要填充的數(shù)據(jù)婴噩，哪里填充圖片擎场，哪里填充文本信息等。
• 在后端接口完成前几莽，我們可以根據(jù)接口文檔迅办，使用假數(shù)據(jù)來驗證我們制作的頁面響應(yīng)和接口是否正常，可以使用Mock.js银觅，它能攔截ajax請求并根據(jù)請求中的內(nèi)容來隨機(jī)生成符合你要求的假數(shù)據(jù)，模擬后端環(huán)境讓你完成對頁面和接口的測試坏为。

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

• 自己的想法：依目前所學(xué)匀伏，只有js能實現(xiàn)洒忧；第一反應(yīng)是點擊后我把事件移除，你隨便點够颠，等加載完成后我在處理函數(shù)中再給它綁事件熙侍；或者我再給按鈕綁個事件，點擊后把自己的class給改掉讓ajax不能正常觸發(fā)履磨，不過改class可能會有改變樣式的風(fēng)險蛉抓，寫樣式時可以預(yù)先加個比如interrupt的類。
• 網(wǎng)上搜索了一下：自己封裝加個比對-如果ajax請求一致的話就不進(jìn)行提交剃诅、提交后把button disable掉巷送、如果點完一個又去點了另外一個的話就abort之前的請求、加個setTimeout+clearTimeOut避免惡意快速點擊等矛辕。

用js封裝了一個 ajax 函數(shù)

function ajax(opts){
  var request = new  XMLHttpRequest();
  var str = '';
  for(i in opts.data){
    str += i+'='+opts.data[i]+'&';
  }
  str = str.substr(0, str.length-1); 
  if(opts.type.toLowerCase() === 'get'){
    request.open('GET', opts.url+'?'+str, true);
    request.send();
  }
  if(opt.type.toLowerCase() === 'post'){
    resuest.open('POST', opt.url, true);
    ajax.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    request.send(str);
  }
  request.onreadystatechange=function(){
    if(request.readyState==4 && request.status==200){
      var responsetext=JSON.parse(request.responseText);
      opts.success(responsetext);
    }
    if(request.status!==200){
      opts.error();
    }
  }
}
document.querySelector('#btn').addEventListener('click', function(){
  ajax({
    url: 'getData.php',   //接口地址
    type: 'get',               // 類型笑跛， post 或者 get,
    data: {
      username: 'xiaoming',
      password: 'abcd1234'
    },
    success: function(ret){
        console.log(ret);       // {status: 0}
      },
      error: function(){
       console.log('出錯了')
     }
   })
});