1.AJAX是什么？有什么作用？

AJAX是什么：ajax全稱Asynchronous javascript and XML 簡稱異步的javascript 和 XML。AJAX能通過后臺與服務器進行數(shù)據(jù)交換，在不重新加載頁面整個頁面的情況下，更新部分網(wǎng)頁的技術。

作用：當我們向后臺傳輸數(shù)據(jù)或獲取數(shù)據(jù)的時候，我們的網(wǎng)頁不需要不斷重新刷新加載而是異步加載后續(xù)代碼并同時等待當前請求的響應。

優(yōu)點
1、最大的一點是頁面無刷新，用戶的體驗非常好。
2、使用異步方式與服務器通信，具有更加迅速的響應能力。。
3、可以把以前一些服務器負擔的工作轉嫁到客戶端，利用客戶端閑置的能力來處理，減輕服務器和帶寬的負擔，節(jié)約空間和寬帶租用成本。并且減輕服務器的負擔，ajax的原則是“按需取數(shù)據(jù)”，可以最大程度的減少冗余請求，和響應對服務器造成的負擔。
4、基于標準化的并被廣泛支持的技術，不需要下載插件或者小程序。
5、ajax可使因特網(wǎng)應用程序更小、更快，更友好。

缺點

1、ajax不支持瀏覽器back按鈕。
2、安全問題 AJAX暴露了與服務器交互的細節(jié)。

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

• 約定接口：接口名稱、參數(shù)名稱統(tǒng)一，制定規(guī)范
• 接口傳什么：數(shù)據(jù)類型以及數(shù)據(jù)大小限制確定
• 接口相關參數(shù)：服務器、端口、方法、請求數(shù)據(jù)的一些限制

使用服務器框架搭建模擬服務器環(huán)境，是用模擬數(shù)據(jù)驗證接口是否正常，可以用node.js來搭建。用server-mock來模擬。

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

var isDataArrive = true;
btn.addEventListener('click',function(){
    if(!isDataArrive){
        return;
    }
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
        if(xhr.readystate ===4){
            if(xhr.status === 200 || xhr.status === 304){   
                //do sth
            }else{
                console.log("出錯了");
            }
            isDataArrive = true; 
        }
    };
    xhr.open('get','/loadMore?index=0''&length=5',true)
    xhr.send()
    isDataArrive = false;
});

4.實踐加載更多的功能，后端在本地使用server-mock來模擬數(shù)據(jù)。

前端代碼：

<script>

var btn = document.querySelector('#load-more');
var ct = document.querySelector('#ct');
var pageIndex = 0;
var isDataArrive = true;
btn.addEventListener('click', function(e){
e.preventDefault();

if(!isDataArrive){
  return;
}

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
  if(xhr.readyState === 4){
    if( xhr.status === 200 || xhr.status == 304){
      var results = JSON.parse(xhr.responseText);
      console.log(results);
      var fragment = document.createDocumentFragment();
      for(var i = 0; i < results.length; i++){
        var node = document.createElement('li');
        node.innerText = results[i];
        fragment.appendChild(node);
      }
      ct.appendChild(fragment);
      pageIndex = pageIndex + 5 ;
    }else{
    console.log('出錯了');
    }
    isDataArrive = true;
  }
};
xhr.open('get', '/loadMore?index='+pageIndex+'&length=5', true);
xhr.send();
isDataArrive = false;

});
</script>

后端代碼：

app.get('/loadMore', function(req, res) {
  var curIdx = req.query.index
  var len = req.query.length
  var data = []
  for(var i = 0; i < len; i++) {
    data.push('列表' + (parseInt(curIdx) + i))
  }
  setTimeout(function(){
    res.send(data);
  }, 1000)    
});

第一次加載

第二次加載

【個人總結，如有錯漏，歡迎指出】
：>