問答：
1.ajax是什么？有什么作用？
Ajax是Asynchronous JavaScript and XML（異步JavaScript 和XML）的縮寫，它能夠向服務器請求額外的數據而無需從新加載頁面的技術。
Ajax在瀏覽器與Web服務器之間使用異步數據傳輸（HTTP請求），這意味著可以在不重新加載整個頁面的情況下，通過JavaScript發送請求、接受服務器傳來的數據，然后操作DOM將新數據對網頁的某部分進行更新。
2.前后端開發聯調需要注意哪些事情？后端借口完成前如何mock數據？（npm install -g server-mock）
- 通常前端是負責模板，后端是負責數據，雙方在聯調時需要注意：
1.約定好數據，確認數據的傳輸格式，如JSON或XML等，然后確認數據的傳輸方式，如通過AJAX等方式傳輸數據。
2.約定好接口，確認接口的參數和返回值，以及接口名稱。 - Mock數據
1.自己編寫模擬數據。
2.使用mockjs，來模擬數據。
3.使用server-mock，生成模板。
3. 點擊按鈕，使用 ajax 獲取數據，如何在數據到來之前防止重復點擊?
設置狀態鎖：設置一個變量locked，初始值為false，觸發相關事件時為ture，并且設置當locked為true時return。當事件函數里面的ajax執行完之后設置locked為false，這樣當ajax請求的數據還沒來之前如果重復點擊的話，就會直接return出該事件函數，使重復點擊無效。
var locked = false;//設置狀態鎖
el.addEventListener('click',function(){
if (locked) return;
locked = ture;//上鎖
ajax({
...
success:function() {
locked = false//解鎖
...
}
error:function() {
locked = false;//解鎖
...
}
...
})
...
})
代碼：
1.封裝一個ajax函數，能通過如下方式調試
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('出錯了')
}
})
});
ajax函數：
function ajax(opts){
//創建ajax對象
var xmlhttp = new XMLHttpRequest();
//對ajax進行事件監聽
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()
}
};
//創建發送到服務器的數據，為了讓數據附加到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);
//發送請求
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);
}
}
2.實現如下加載更多的功能。
代碼github地址：task24-2
本地運行效果：
更多加載
3.實現注冊表單驗證功能。
代碼github地址：task24-3
本地運行效果：
注冊表單
本文版權歸本人和饑人谷所有，轉載請注明來源。
