問(wèn)答：
1.ajax是什么商架？有什么作用与纽？
Ajax是Asynchronous JavaScript and XML（異步JavaScript 和XML）的縮寫(xiě)侣签，它能夠向服務(wù)器請(qǐng)求額外的數(shù)據(jù)而無(wú)需從新加載頁(yè)面的技術(shù)。
Ajax在瀏覽器與Web服務(wù)器之間使用異步數(shù)據(jù)傳輸（HTTP請(qǐng)求）急迂，這意味著可以在不重新加載整個(gè)頁(yè)面的情況下影所，通過(guò)JavaScript發(fā)送請(qǐng)求、接受服務(wù)器傳來(lái)的數(shù)據(jù)僚碎，然后操作DOM將新數(shù)據(jù)對(duì)網(wǎng)頁(yè)的某部分進(jìn)行更新猴娩。
2.前后端開(kāi)發(fā)聯(lián)調(diào)需要注意哪些事情？后端借口完成前如何mock數(shù)據(jù)？（npm install -g server-mock）
- 通常前端是負(fù)責(zé)模板胀溺，后端是負(fù)責(zé)數(shù)據(jù)，雙方在聯(lián)調(diào)時(shí)需要注意：
1.約定好數(shù)據(jù)皆看，確認(rèn)數(shù)據(jù)的傳輸格式仓坞，如JSON或XML等，然后確認(rèn)數(shù)據(jù)的傳輸方式腰吟，如通過(guò)AJAX等方式傳輸數(shù)據(jù)无埃。
2.約定好接口，確認(rèn)接口的參數(shù)和返回值毛雇，以及接口名稱(chēng)嫉称。 - Mock數(shù)據(jù)
1.自己編寫(xiě)模擬數(shù)據(jù)。
2.使用mockjs灵疮，來(lái)模擬數(shù)據(jù)织阅。
3.使用server-mock，生成模板震捣。
3. 點(diǎn)擊按鈕荔棉，使用 ajax 獲取數(shù)據(jù)，如何在數(shù)據(jù)到來(lái)之前防止重復(fù)點(diǎn)擊?
設(shè)置狀態(tài)鎖：設(shè)置一個(gè)變量locked蒿赢，初始值為false润樱，觸發(fā)相關(guān)事件時(shí)為ture，并且設(shè)置當(dāng)locked為true時(shí)return羡棵。當(dāng)事件函數(shù)里面的ajax執(zhí)行完之后設(shè)置locked為false壹若，這樣當(dāng)ajax請(qǐng)求的數(shù)據(jù)還沒(méi)來(lái)之前如果重復(fù)點(diǎn)擊的話，就會(huì)直接return出該事件函數(shù)皂冰，使重復(fù)點(diǎn)擊無(wú)效店展。
var locked = false;//設(shè)置狀態(tài)鎖
el.addEventListener('click',function(){
if (locked) return;
locked = ture;//上鎖
ajax({
...
success:function() {
locked = false//解鎖
...
}
error:function() {
locked = false;//解鎖
...
}
...
})
...
})
代碼：
1.封裝一個(gè)ajax函數(shù)，能通過(guò)如下方式調(diào)試
function ajax(opts){
// todo ...
}
document.querySelector('#btn').addEventListener('click', function(){
ajax({
url: 'getData.php', //接口地址
type: 'get', // 類(lèi)型灼擂， post 或者 get,
data: {
username: 'xiaoming',
password: 'abcd1234'
},
success: function(ret){
console.log(ret); // {status: 0}
},
error: function(){
console.log('出錯(cuò)了')
}
})
});
ajax函數(shù)：
function ajax(opts){
//創(chuàng)建ajax對(duì)象
var xmlhttp = new XMLHttpRequest();
//對(duì)ajax進(jìn)行事件監(jiān)聽(tīng)
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState ===4 && xmlhttp.status === 200){
//將服務(wù)器返回的文本內(nèi)容轉(zhuǎn)為JSON格式
var json = JSON.parse(xmlhttp.responseText);
opts.success(json);;
}
if(xmlhttp.status === 404){
opts.error()
}
};
//創(chuàng)建發(fā)送到服務(wù)器的數(shù)據(jù)壁查，為了讓數(shù)據(jù)附加到url上，必須為key/value格式剔应。
var dataStr = "";
for (var key in opts.data) {
dataStr += key + '=' +opts.data[key]+'&';
}
dataStr = dataStr.substr(0,dataStr.length-1);
//判斷請(qǐng)求的方式為get
if(opts.type.toLowerCase() === "get"){
//鏈接服務(wù)器
xmlhttp.open('GET',opts.url+'?' +dataStr,true);
//發(fā)送請(qǐng)求
xmlhttp.send();
}
//判斷請(qǐng)求方式為post
if(opts.type.toLowerCase() === "post"){
xmlhttp.open('POST',opts.url,true);
//為了使post請(qǐng)求與提交web表單相同睡腿，將 Content-Type 頭部信息設(shè)置為 application/x-www-form-urlencoded來(lái)模仿表單提交功能。
xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
xmlhttp.send(dataStr);
}
}
2.實(shí)現(xiàn)如下加載更多的功能峻贮。
代碼github地址：task24-2
本地運(yùn)行效果：
更多加載
3.實(shí)現(xiàn)注冊(cè)表單驗(yàn)證功能席怪。
代碼github地址：task24-3
本地運(yùn)行效果：
注冊(cè)表單
本文版權(quán)歸本人和饑人谷所有，轉(zhuǎn)載請(qǐng)注明來(lái)源纤控。
