1、ajax 是什么信峻？有什么作用？
AJAX代表異步JavaScript和XML瓮床。簡(jiǎn)而言之盹舞，它是使用 XMLHttpRequest 對(duì)象與服務(wù)器端腳本進(jìn)行通信。它可以發(fā)送以及接收各種格式的信息隘庄，包括JSON踢步，XML，HTML丑掺，甚至文本文件获印。AJAX最吸引人的特性是，它的“異步”性質(zhì)街州，這意味著它可以做所有這一切兼丰，而不必刷新頁(yè)面。這讓您可以根據(jù)用戶事件更新頁(yè)面的某些部分唆缴。
AJAX的兩個(gè)主要功能允許您執(zhí)行以下操作：
1鳍征、向服務(wù)器發(fā)出請(qǐng)求，而不重新加載頁(yè)面
2琐谤、接收和處理服務(wù)器中的數(shù)據(jù)
2蟆技、前后端開發(fā)聯(lián)調(diào)需要注意哪些事情玩敏？后端接口完成前如何 mock 數(shù)據(jù)斗忌？
注意事項(xiàng)
約定數(shù)據(jù)：有哪些需要傳輸?shù)臄?shù)據(jù)质礼，數(shù)據(jù)類型是什么；
約定接口：確定接口名稱及請(qǐng)求和響應(yīng)的格式织阳，請(qǐng)求的參數(shù)名稱眶蕉、響應(yīng)的數(shù)據(jù)格式；
根據(jù)這些約定整理成接口文檔
如何mock
1唧躲、將 mock 數(shù)據(jù)寫在代碼中造挽。
// $.ajax({
// url: ‘https://cntchen.github.io/userInfo’,
// type: 'GET',
// success: function(dt) {
var dt = {
"isSuccess": true,
"errMsg": "This is error.",
"data": {
"userName": "Cntchen",
"about": "FE"
},
};
if (dt.isSuccess) {
render(dt.data);
} else {
console.log(dt.errMsg);
}
// },
// fail: function() {}
// });
優(yōu)點(diǎn)：可以快速修改數(shù)據(jù)
缺點(diǎn)：無(wú)法模擬異步的網(wǎng)絡(luò)請(qǐng)求，無(wú)法測(cè)試網(wǎng)絡(luò)異常弄痹；聯(lián)調(diào)前需要做較多改動(dòng)饭入，增加最終上真實(shí)環(huán)境的切換成本。接口文檔變化需要手動(dòng)更新
2.搭建本地服務(wù)器
3.使用在線mock服務(wù)肛真，比如 https://www.easy-mock.com
3谐丢、點(diǎn)擊按鈕，使用 ajax 獲取數(shù)據(jù)蚓让，如何在數(shù)據(jù)到來(lái)之前防止重復(fù)點(diǎn)擊?
使用狀態(tài)鎖
var lock=false,
btn = document.qureySelector('#btn');
btn.addEventListener('click', function(){
if(lock){
return;
}else{
lock=true;
ajax({
....
lock=false //收到響應(yīng)之后才把false賦值給lock
})
}
})
4乾忱、封裝一個(gè) ajax 函數(shù)，能通過(guò)如下方式調(diào)用历极。后端在本地使用server-mock來(lái) mock 數(shù)據(jù)
function ajax(opts) {
var xmlhttp;
if(window.XMLHttpRequest) { //IE7+,chrome,Safari,Opera,Firefox
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new AcitveXObject("Microsoft.XMLHTTP"); //IE5,IE6
}
xmlhttp.onreadystatechange = function() {
if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var json = JSON.parse(xmlhttp.responseText);
opts.success(json);
}
if(xmlhttp.status == 404) {
opts.error();
}
}
var dataStr= '';
for(var key in opts.data) {
dataStr += key + '=' + opts.data[key] + '&';
}
dataStr = dataStr.substr(0,dataStr.length-1);
if(opts.type.toLowerCase() == 'get') {
xmlhttp.open(opts.type, opts.url + '?' + dataStr, true);
xmlhttp.send();
}
if(opts.type.toLowerCase() == 'post') {
xmlhttp.open(opts.type, opts.url, true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(dataStr);
}
}
