ajax 是什么？有什么作用？
傳統(tǒng)的HTTP請求
- 瀏覽器向服務(wù)器發(fā)送請求
- 服務(wù)器根據(jù)瀏覽器傳來數(shù)據(jù)生成response
- 服務(wù)器把response返回給瀏覽器
- 瀏覽器刷新整個頁面顯示最新數(shù)據(jù)
這個過程是同步的，順序執(zhí)行。需要刷新整個網(wǎng)頁，效率低，用戶體驗差
AJAX請求
AJAX 在瀏覽器與 Web 服務(wù)器之間使用異步數(shù)據(jù)傳輸（HTTP 請求）從服務(wù)器獲取數(shù)據(jù)。這里的異步是指脫離當(dāng)前瀏覽器頁面的請求、加載等單獨執(zhí)行，這意味著可以在不重新加載整個網(wǎng)頁的情況下，通過JavaScript發(fā)送請求、接受服務(wù)器傳來的數(shù)據(jù)，然后操作DOM將新數(shù)據(jù)對網(wǎng)頁的某部分進(jìn)行更新，使用Ajax最直觀的感受是向服務(wù)器獲取新數(shù)據(jù)不需要刷新頁面等待了。
ajax是一種技術(shù)方案，但并不是一種新技術(shù)。它依賴現(xiàn)有的CSS/HTML/Javascript，而其中最核心的依賴是瀏覽器提供的XMLHttpRequest對象。
前后端開發(fā)聯(lián)調(diào)需要注意哪些事情？后端接口完成前如何 mock 數(shù)據(jù)？
- 約定接口：確定接口名稱及請求和響應(yīng)的格式，請求的參數(shù)名稱、響應(yīng)的數(shù)據(jù)格式；
- 約定數(shù)據(jù)：有哪些需要傳輸?shù)臄?shù)據(jù)，數(shù)據(jù)類型是什么；
- 根據(jù)這些數(shù)據(jù)整理成接口文檔。
什么是mock數(shù)據(jù)
作為前端經(jīng)常需要模擬后臺數(shù)據(jù)，我們稱之為mock。通常的方式為自己搭建一個服務(wù)器，返回我們想要的數(shù)據(jù)。
如何mock數(shù)據(jù)
前端人員可以自己使用服務(wù)器框架搭建一個模擬服務(wù)器環(huán)境(如：express&nodejs，xampp或者server-mock)， 在本地的平臺上mock數(shù)據(jù)，事先進(jìn)行調(diào)試。
點擊按鈕，使用 ajax 獲取數(shù)據(jù)，如何在數(shù)據(jù)到來之前防止重復(fù)點擊?
設(shè)置一個狀態(tài)鎖,在觸發(fā)ajax前是鎖定的,之后若重復(fù)點擊都不會觸發(fā)ajax,直到代碼執(zhí)行完再解除鎖定。
var isDataArrive = true; //設(shè)置狀態(tài)鎖初始值為true，表示數(shù)據(jù)到達(dá)。
btn.addEventListener('click', function(e) {
e.preventDefault();
if (!isDataArrive) {
return; //如果數(shù)據(jù)沒有到達(dá)表示正在請求數(shù)據(jù)，則本次點擊無效。
}
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == '4') {
if (xhr.status === 200 || xhr.status === 304) {
var result = JSON.parse(xhr.responseText);
console.log(result);
var fragment = document.createDocumentFragment();
for (var i = 0; i < result.length; i++) {
var node = document.createElement('li');
node.innerText = result[i];
fragment.appendChild(node);
}
ct.appendChild(fragment);
pageIndex += 5;
} else {
console.log('出錯了');
}
isDataArrive = true; //若獲取到數(shù)據(jù)，表示數(shù)據(jù)已經(jīng)送達(dá)，將狀態(tài)鎖設(shè)置為true。
}
};
xhr.open('get', '/loadMore?index=' + pageIndex + '&length=5', true);
xhr.send();
isDataArrive = false; //發(fā)送數(shù)據(jù)之后，將狀態(tài)鎖設(shè)置為false
實現(xiàn)加載更多的功能，后端在本地使用server-mock來模擬數(shù)據(jù)
效果圖
