1， ajax 是什么沧踏？有什么作用？
ajax（Asynchronous JavaScript and XML）以異步的方式從服務(wù)器獲取數(shù)據(jù)巾钉，不必刷新頁面也能獲取新數(shù)據(jù)翘狱。ajax的核心對象就是XMLhttpRequest，通過JavaScript DOM將ajax獲得的數(shù)據(jù)顯示在頁面上砰苍。
作用是帶來更好的用戶體驗潦匈。
2， 前后端開發(fā)聯(lián)調(diào)需要注意哪些事情赚导？后端接口完成前如何 mock 數(shù)據(jù)茬缩？
前后端開發(fā)時需要注意：
- 約定接口類型（GET還是POST)、接口（傳遞到那個路由）
- 前端傳遞給后端的參數(shù)（參數(shù)的類型吼旧、格式）
- 后端返回數(shù)據(jù)的格式（是數(shù)組還是字符串還是JSON格式）
后端接口完成前可以使用server-mock搭建模擬服務(wù)器
3寒屯，點擊按鈕，使用 ajax 獲取數(shù)據(jù)黍少，如何在數(shù)據(jù)到來之前防止重復(fù)點擊?
設(shè)置判斷變量，數(shù)據(jù)沒拿到時設(shè)置為false处面，拿到數(shù)據(jù)才設(shè)置為true厂置，為false時忽略后面的點擊事件
本例中的isDataArrive即為判斷數(shù)據(jù)是否拿到的變量
<script>
//整體思路就是給按鈕添加點擊事件，寫ajax得到數(shù)據(jù)魂角，然后通過渲染添加到html上就可以了
var btn = document.querySelector('#load-more');
var ct = document.querySelector('#ct');
var tempIndex = 3;//記錄每次的變量
// 針對網(wǎng)速較慢并且重復(fù)點擊的情況做得優(yōu)化：第一種思路昵济，如果一點時間內(nèi)請求沒到，忽略用戶后面點擊的野揪。第二種思路访忿，用戶點擊了多次，每次的輸出內(nèi)容都要顯示
var isDataArrive = true; // 設(shè)置判斷變量斯稳，數(shù)據(jù)沒拿到時設(shè)置為false
btn.addEventListener('click',function () {
if (!isDataArrive) {
return; //如果數(shù)據(jù)沒拿到海铆，直接return掉，后面的點擊就被忽略掉
}
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && (xhr.status == 200 || xhr.status == 304)) {
var content = JSON.parse(xhr.responseText);
// console.log(content); //寫到這先測試一下給的數(shù)據(jù)對不對
// 開始拼裝html
// var html = '';
// for (var i = 0; i < content.length; i ++) {
// html += '<li>' + content[i] + '</li>';
// }
// 拼裝好html挣惰，應(yīng)該是appendChild到ct后面卧斟，但是每次appendChild回影響性能殴边，可以使用Fragment，所以可以改寫為：
var fragment = document.createDocumentFragment();
for (var i = 0; i < content.length; i ++) {
var node = document.createElement('li');
node.innerText = content[i]; // 使用innerText不用innerHTML還有個好處是可以防止xss注入
fragment.appendChild(node);
}
ct.appendChild(fragment);
tempIndex += 5;
isDataArrive = true;//readyState === 4 表示數(shù)據(jù)已經(jīng)拿到了
}
};
xhr.open('get','/loadMore?index='+ tempIndex +'&length=5',true);
// 前端需要得到一個數(shù)組 ['content1','content2',...,'content5']
// 前端需要向后端發(fā)送的 /loadMore?index=3&length=5 /loadMore為接口珍语，后端對loadMore進(jìn)行處理
// {
// index: 3,
// length: 5,
// }
/* 一般在請求數(shù)據(jù)之前都要想清楚前端需要得到什么數(shù)據(jù)锤岸，需要向后端發(fā)送的是什么接口，參數(shù)是怎么樣的板乙。
1.GET
2./loadMore
3. {
index: 3,
length: 5,
}
4. ['content1','content2',...,'content5']
*/
xhr.send();
isDataArrive = false; // 沒拿到數(shù)據(jù)設(shè)置為false
})
</script>
