ajax 是什么磺箕？有什么作用阴绢？
傳統(tǒng)的HTTP請(qǐng)求
- 瀏覽器向服務(wù)器發(fā)送請(qǐng)求
- 服務(wù)器根據(jù)瀏覽器傳來(lái)數(shù)據(jù)生成response
- 服務(wù)器把response返回給瀏覽器
- 瀏覽器刷新整個(gè)頁(yè)面顯示最新數(shù)據(jù)
這個(gè)過(guò)程是同步的剑按，順序執(zhí)行互广。需要刷新整個(gè)網(wǎng)頁(yè)，效率低封拧，用戶體驗(yàn)差
AJAX請(qǐng)求
AJAX 在瀏覽器與 Web 服務(wù)器之間使用異步數(shù)據(jù)傳輸（HTTP 請(qǐng)求）從服務(wù)器獲取數(shù)據(jù)渔扎。這里的異步是指脫離當(dāng)前瀏覽器頁(yè)面的請(qǐng)求硫狞、加載等單獨(dú)執(zhí)行，這意味著可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下晃痴，通過(guò)JavaScript發(fā)送請(qǐng)求残吩、接受服務(wù)器傳來(lái)的數(shù)據(jù)，然后操作DOM將新數(shù)據(jù)對(duì)網(wǎng)頁(yè)的某部分進(jìn)行更新倘核，使用Ajax最直觀的感受是向服務(wù)器獲取新數(shù)據(jù)不需要刷新頁(yè)面等待了泣侮。
ajax是一種技術(shù)方案，但并不是一種新技術(shù)紧唱。它依賴現(xiàn)有的CSS/HTML/Javascript活尊，而其中最核心的依賴是瀏覽器提供的XMLHttpRequest對(duì)象。
前后端開(kāi)發(fā)聯(lián)調(diào)需要注意哪些事情漏益？后端接口完成前如何 mock 數(shù)據(jù)蛹锰？
- 約定接口：確定接口名稱及請(qǐng)求和響應(yīng)的格式，請(qǐng)求的參數(shù)名稱绰疤、響應(yīng)的數(shù)據(jù)格式铜犬；
- 約定數(shù)據(jù)：有哪些需要傳輸?shù)臄?shù)據(jù)，數(shù)據(jù)類型是什么；
- 根據(jù)這些數(shù)據(jù)整理成接口文檔癣猾。
什么是mock數(shù)據(jù)
作為前端經(jīng)常需要模擬后臺(tái)數(shù)據(jù)敛劝，我們稱之為mock。通常的方式為自己搭建一個(gè)服務(wù)器纷宇，返回我們想要的數(shù)據(jù)攘蔽。
如何mock數(shù)據(jù)
前端人員可以自己使用服務(wù)器框架搭建一個(gè)模擬服務(wù)器環(huán)境(如：express&nodejs，xampp或者server-mock)呐粘， 在本地的平臺(tái)上mock數(shù)據(jù)，事先進(jìn)行調(diào)試转捕。
點(diǎn)擊按鈕作岖，使用 ajax 獲取數(shù)據(jù)，如何在數(shù)據(jù)到來(lái)之前防止重復(fù)點(diǎn)擊?
設(shè)置一個(gè)狀態(tài)鎖,在觸發(fā)ajax前是鎖定的,之后若重復(fù)點(diǎn)擊都不會(huì)觸發(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ù)沒(méi)有到達(dá)表示正在請(qǐng)求數(shù)據(jù)枢步，則本次點(diǎn)擊無(wú)效沉删。
}
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('出錯(cuò)了');
}
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
實(shí)現(xiàn)加載更多的功能隘擎，后端在本地使用server-mock來(lái)模擬數(shù)據(jù)
效果圖
