- ajax 是什么？有什么作用？
- ajax是Asynchronous JavaScript + XML的簡寫。是一項能夠向服務器請求額外的數據而無須重新加載頁面的技術。
- 前后端開發聯調需要注意哪些事情？后端接口完成前如何 mock 數據？(npm install -g server-mock) 知識點視頻-如何 mock 數據
- 注意事項：
1 約定數據格式。
1 根據功能制定前后端接口，約定參數和返回值。
2 根據接口構建Mock Server工程及其部署。
3 前后端獨立開發，前端向Mock Server發送請求，獲取模擬的數據進行開發和測試。
4 前后端都完成后，前后端連接調試
- Mock Server可以部署在本地，也可以部署到遠程服務器。
1 把Mock Server工程部署到一個遠程遠程服務器上，前端開發的時候向該服務器發請求。
2 把Mock Server克隆到本地，開發的時候，開啟前端工程服務器和Mock Server，所有的請求都發向本地服務器，獲取到Mock數據。
- 點擊按鈕，使用 ajax 獲取數據，如何在數據到來之前防止重復點擊?
- 設置一個變量flag用來判斷按鈕的點擊狀態，當用戶點擊按鈕時flag變量被賦值為點擊狀態，直到ajax完成后flag變量被重新賦值為未點擊狀態，可再進行點擊。
var flag = 0;//未點擊狀態
el.addEventListener('click', function(){
if (flag) { return; }
flag = 1;//點擊狀態
ajax({
//代碼。。。
succss:function() {
flag = 0;//ajax處理完畢重新賦值為點擊狀態
//代碼。。。
}
error:function() {
flag = 0;//ajax處理完畢重新賦值為點擊狀態
//代碼。。。
}
//代碼。。。
})
})
代碼
function ajax(opts){
var xmlhttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {//執行四次握手，2000為成功
var json = JSON.parse(xmlhttp.responseText);//解析返回的數據
opts.success(json);
}
if (xmlhttp.readyState == 4 && xmlhttp.status == 404) {//四次握手后才進行404判斷，不會出現多次請求
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函數，括號內的為參數
});
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
