一、Ajax 是什么?有什么作用褂痰?
1.Ajax是Asynchronous JavaScript And XML的縮寫,這一技術能夠從服務器獲取額外的數(shù)據(jù)而無需刷新整個頁面症虑,會帶來良好的用戶體驗缩歪;
2.Ajax在瀏覽器和Web服務器之間使用異步數(shù)據(jù)傳輸(HTTP請求)從服務器獲取數(shù)據(jù);
3.Ajax本質就是用JS創(chuàng)造了一個XMLHttpRequest對象谍憔,這個對象可以操作瀏覽器的接口驶冒,不通過頁面刷新,而是直接向后臺發(fā)送請求獲取數(shù)據(jù)韵卤,然后瀏覽器進行展示改變網(wǎng)頁骗污;
4.使用Ajax最直觀的感受就是向服務器獲取數(shù)據(jù)不需要刷新頁面等待了。
Ajax使用的四大步驟
二沈条、前后端開發(fā)聯(lián)調需要注意哪些事情需忿?后端接口完成前如何 mock 數(shù)據(jù)?(npm install -g server-mock)
1.需要注意的事情:
- 約定前后端聯(lián)調的時間蜡歹。
- 約定雙方需要傳輸?shù)臄?shù)據(jù)和接口屋厘,在接口文檔中確定好參數(shù)的名稱、格式等月而。
- 約定請求和響應的格式和內容汗洒。
2.mock數(shù)據(jù)的方法有:
- 使用server-mock或mock.js搭建模擬服務器,進行模擬測試父款;
- 使用XAMPP等工具溢谤,編寫PHP文件來進行測試瞻凤。
三、點擊按鈕世杀,使用 ajax 獲取數(shù)據(jù)阀参,如何在數(shù)據(jù)到來之前防止重復點擊?
var isLocked = false;//利用布爾值作為狀態(tài)鎖
btn.addEventListener('click',function(){
if(isLocked == true){
return;
}
isLocked = true;//先上鎖
ajax({
...
});
});
function success(){
...
isLocked = false;//解鎖
}
function erreo(){
...
isLocked = false;//解鎖
}
代碼練習
四、封裝一個 ajax 函數(shù)瞻坝,能通過如下方式調用
function ajax(opts){
// todo ...
}
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}
},
error: function(){
console.log('出錯了')
}
})
});
代碼:
function ajax(opts){
//創(chuàng)建ajax對象
var xmlhttp=new XMLHttpRequest();
//對ajax進行事件監(jiān)聽
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState===4&&xmlhttp.status===200){
//將服務器返回的文本內容轉換為JSON格式
var json=JSON.parse(xmlhttp.responseText);
opts.success(json);
}
if(xmlhttp.status===404){
opts.error();
}
}
//創(chuàng)建發(fā)送到服務器的數(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);
//判斷請求的方式為GET
if(opts.type.toLowerCase()==="GET"){
//連接服務器
xmlhttp.open("GET",opts.url+"?"+dataStr,true);
//發(fā)送請求
xmlhttp.send();
}
//判斷請求方式為post
if(opts.type.toLowerCase()==="post"){
xmlhttp.open("POST",opts.url,true);
//為了使post請求與提交web表單相同,
//將Content-Type頭部信息設置為application/x-www-form-urlencoded來模仿表單提交功能
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlhttp.send(dataStr);
}
}