ajax 是什么？有什么作用？
-
AJAX = 異步 JavaScript 和 XML。
AJAX 是一種用于創建快速動態網頁的技術。
通過在后臺與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。 -
優點：
更新數據而不需要刷新頁面： 它能在不刷新整個頁面的前提下與服務器通信維護數據，由于ajax是按照需求請求數據，避免發送那些沒有改變的數據。
異步通信： 它與服務器使用異步的方式通信，不會打斷用戶的操作（卡死頁面）。
前后端負載平衡： 可以將后端服務器的一些工作轉移給客戶端，利用客戶端限制的能力來處理，減輕了服務器的負擔。
數據與呈現分離： 利于分工，降低前后耦合。 -
缺點：
瀏覽器歷史記錄的遺失： 在使用AJAX對頁面進行改變后，由于并沒有刷新頁面，沒有改變頁面的訪問歷史，當用戶想要回到上一個狀態時，無法使用瀏覽器提供的后退。
AJAX的安全問題： AJAX的出現就像建立起了一直通服務器的另一條通道，容易遭受到一些攻擊。
前后端開發聯調需要注意哪些事情？后端接口完成前如何 mock 數據？
前后端開發聯調需要注意哪些事情:
約定數據: 后端數據寫好,放在模板里,前端可以寫頁面,互不影響
約定接口: 請求和響應的格式;接口名稱,請求參數,響應后端接口完成前如何mock數據
mock數據指的是在后端開發沒有完成時，前端可以通過mock方法搭建本地服務器，模擬后臺數據來實現數據交互的效果。
可安裝xampp在本地搭建(php等)服務器，也可以安裝server-mock，這樣不需要特地去寫一個后臺的處理頁面文件來訪問數據。
點擊按鈕，使用 ajax 獲取數據，如何在數據到來之前防止重復點擊?
設置一個狀態鎖,在觸發ajax前是鎖定的,之后若重復點擊都不會觸發ajax,直到代碼執行完在接觸鎖定.
var isloading = false; // 設置狀態鎖，用于是否在加載數據
btn.addEventListener('click', function(e) {
e.preventDefault(); // 防止點擊 a 鏈接頁面跳到頂部
}
if(isLoading) {
return; // //如果正在請求數據，那這次點擊什么都不做
}
ajax('/loadMore', {
idx: curIndex,
len: len
}, function(data){
appendData(data)
isLoading = false //數據到來之后 解鎖
curIndex = curIndex + len //修改序號，下次要數據就從新序號開始要
console.log(curIndex)
})
isLoading = true //發請求之前做個標記加鎖
})
實現加載更多的功能，后端在本地使用server-mock來模擬數據
function ajax(opts) {
var type = opts.type || 'get';
type = type.toLowerCase() || 'get';
var url = opts.url || '';
var date = opts.date || null;
var success = opts.success || function(){};
var error = opts.success || function(){};
var xhr = window.XMLHttpRequest? new XMLHttpRequest():new
ActiveXObject('microsoft.XMLHTTP');
var dateArry = [];
for(var key in date){
dateArry.push(key + '=' +date[key]);
}
var dateStr = dateArry.join('&');
if(type === 'get'){
xhr.open(type,url+'?'+dateStr,true);
xhr.send();
}else{
xhr.open(type,url,true)
xhr.setRequestHeader('Content-Type', 'application/x-www-form- 誠
urlencoded;charset=utf-8');
xhr.send(dateStr)
}
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
success(xhr.responseText)
}else{
error();
}
}
}
document.querySelector('#btn').addEventListener('click', function(){
ajax({
url: '/login', //接口地址
type: 'get', // 類型， post 或者 get,
data: {
username: 'xiaoming',
password: 'abcd1234'
},
success: function(ret){
console.log(ret); // {status: 0}
},
error: function(){
console.log('出錯了')
}
})
});
