- ajax 是什么？有什么作用？
- ajax是Asynchronous JavaScript + XML的簡寫。是一項能夠向服務器請求額外的數(shù)據(jù)而無須重新加載頁面的技術(shù)。
- 前后端開發(fā)聯(lián)調(diào)需要注意哪些事情蜂嗽？后端接口完成前如何 mock 數(shù)據(jù)？(npm install -g server-mock) 知識點視頻-如何 mock 數(shù)據(jù)
- 注意事項：
1 約定數(shù)據(jù)格式响禽。
1 根據(jù)功能制定前后端接口徒爹，約定參數(shù)和返回值。
2 根據(jù)接口構(gòu)建Mock Server工程及其部署芋类。
3 前后端獨立開發(fā)隆嗅，前端向Mock Server發(fā)送請求，獲取模擬的數(shù)據(jù)進行開發(fā)和測試侯繁。
4 前后端都完成后胖喳，前后端連接調(diào)試
- Mock Server可以部署在本地，也可以部署到遠程服務器贮竟。
1 把Mock Server工程部署到一個遠程遠程服務器上丽焊，前端開發(fā)的時候向該服務器發(fā)請求。
2 把Mock Server克隆到本地咕别，開發(fā)的時候技健，開啟前端工程服務器和Mock Server，所有的請求都發(fā)向本地服務器惰拱，獲取到Mock數(shù)據(jù)雌贱。
- 點擊按鈕，使用 ajax 獲取數(shù)據(jù)偿短，如何在數(shù)據(jù)到來之前防止重復點擊?
- 設置一個變量flag用來判斷按鈕的點擊狀態(tài)欣孤，當用戶點擊按鈕時flag變量被賦值為點擊狀態(tài)，直到ajax完成后flag變量被重新賦值為未點擊狀態(tài)昔逗，可再進行點擊降传。
var flag = 0;//未點擊狀態(tài)
el.addEventListener('click', function(){
if (flag) { return; }
flag = 1;//點擊狀態(tài)
ajax({
//代碼。勾怒。婆排。
succss:function() {
flag = 0;//ajax處理完畢重新賦值為點擊狀態(tài)
//代碼。笔链。段只。
}
error:function() {
flag = 0;//ajax處理完畢重新賦值為點擊狀態(tài)
//代碼。卡乾。翼悴。
}
//代碼缚够。幔妨。鹦赎。
})
})
代碼
- 封裝一個 ajax 函數(shù)，能通過如下方式調(diào)用
function ajax(opts){
var xmlhttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {//執(zhí)行四次握手误堡，2000為成功
var json = JSON.parse(xmlhttp.responseText);//解析返回的數(shù)據(jù)
opts.success(json);
}
if (xmlhttp.readyState == 4 && xmlhttp.status == 404) {//四次握手后才進行404判斷古话，不會出現(xiàn)多次請求
opts.error();
}
}
var dataStr = '';
for (var key in opts.data) {
dataStr += key + '=' + opts.data[key] + '&';//遍歷data用&分隔
}
dataStr = dataStr.substr(0, dataStr.length - 1);//去掉最后一位的&
if (opts.type.toLowerCase() == 'post') {
xmlhttp.open(opts.type, opts.url, true);
xmlhttp.setRequestHeader('Content-type' , 'application/x-www-form-urlencoded');//post增加頭部識別格式
xmlhttp.send(dataStr);
}
if (opts.type.toLowerCase() == 'get') {
xmlhttp.open(opts.type, opts.url + '?' +dataStr, true);
xmlhttp.send();
}
}
document.querySelector('#btn').addEventListener('click', function(){
ajax({
url: 'getData.php', //接口地址
type: 'get', // 類型， post 或者 get,
data: {
username: 'xiaoming',
password: 'abcd1234'
},
success: function(ret){
console.log(ret); // {status: 0} dealwith(ret)
},
error: function(){
console.log('出錯了')
}
})//ajax函數(shù)锁施，括號內(nèi)的為參數(shù)
});
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
