題目1： ajax 是什么？有什么作用？
含義：腳本發(fā)起HTTP通信
作用：傳輸數(shù)據(jù)到服務(wù)器，監(jiān)聽狀態(tài)碼實(shí)現(xiàn)服務(wù)器返回結(jié)果，在整個(gè)網(wǎng)頁中，數(shù)據(jù)的發(fā)送響應(yīng)過程中不會影響網(wǎng)頁其他位置的操作，這個(gè)過程實(shí)現(xiàn)了異步操作，節(jié)省用戶表單驗(yàn)證時(shí)間，提高用戶體驗(yàn)。
優(yōu)點(diǎn)：
（1）無刷新更新數(shù)據(jù)。
AJAX最大優(yōu)點(diǎn)就是能在不刷新整個(gè)頁面的前提下與服務(wù)器通信維護(hù)數(shù)據(jù)。這使得Web應(yīng)用程序更為迅捷地響應(yīng)用戶交互，并避免了在網(wǎng)絡(luò)上發(fā)送那些沒有改變的信息，減少用戶等待時(shí)間，帶來非常好的用戶體驗(yàn)。
（2）異步與服務(wù)器通信。
AJAX使用異步方式與服務(wù)器通信，不需要打斷用戶的操作，具有更加迅速的響應(yīng)能力。優(yōu)化了Browser和Server之間的溝通，減少不必要的數(shù)據(jù)傳輸、時(shí)間及降低網(wǎng)絡(luò)上數(shù)據(jù)流量。
（3）前端和后端負(fù)載平衡。
AJAX可以把以前一些服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶端，利用客戶端閑置的能力來處理，減輕服務(wù)器和帶寬的負(fù)擔(dān)，節(jié)約空間和寬帶租用成本。并且減輕服務(wù)器的負(fù)擔(dān)，AJAX的原則是“按需取數(shù)據(jù)”，可以最大程度的減少冗余請求和響應(yīng)對服務(wù)器造成的負(fù)擔(dān)，提升站點(diǎn)性能。
（4）基于標(biāo)準(zhǔn)被廣泛支持。
AJAX基于標(biāo)準(zhǔn)化的并被廣泛支持的技術(shù)，不需要下載瀏覽器插件或者小程序，但需要客戶允許JavaScript在瀏覽器上執(zhí)行。隨著Ajax的成熟，一些簡化Ajax使用方法的程序庫也相繼問世。同樣，也出現(xiàn)了另一種輔助程序設(shè)計(jì)的技術(shù)，為那些不支持JavaScript的用戶提供替代功能。
（5）界面與應(yīng)用分離。
Ajax使WEB中的界面與應(yīng)用分離（也可以說是數(shù)據(jù)與呈現(xiàn)分離），有利于分工合作、減少非技術(shù)人員對頁面的修改造成的WEB應(yīng)用程序錯(cuò)誤、提高效率、也更加適用于現(xiàn)在的發(fā)布系統(tǒng)。
缺點(diǎn)：
（1）瀏覽器歷史記錄的遺失： 在使用AJAX對頁面進(jìn)行改變后，由于并沒有刷新頁面，沒有改變頁面的訪問歷史，當(dāng)用戶想要回到上一個(gè)狀態(tài)時(shí)，無法使用瀏覽器提供的后退。
（2）AJAX的安全問題： AJAX的出現(xiàn)就像建立起了一直通服務(wù)器的另一條通道，容易遭受到一些攻擊。
題目2 前后端開發(fā)聯(lián)調(diào)需要注意哪些事情？后端接口完成前如何 mock 數(shù)據(jù)？
１．約定數(shù)據(jù)：約定好頁面需要的數(shù)據(jù)和數(shù)據(jù)類型
２． 約定接口：
(1)約定接口的名稱。
(2)約定請求的參數(shù)。
(3)約定響應(yīng)的的格式，比如：成功后返回什么數(shù)據(jù)，響應(yīng)失敗返回什么內(nèi)容。
３．將約定好的東西整理成接口文檔和規(guī)范
mock數(shù)據(jù)：參照接口相關(guān)文檔，使用假數(shù)據(jù)來驗(yàn)證我們制作的頁面響應(yīng)和接口是否正常?？梢源罱╬hp本地服務(wù)器用，php寫腳本提供臨時(shí)數(shù)據(jù)；
也可寫js腳本模擬數(shù)據(jù)，利用server-Mock完成對頁面和接口的測試。
題目3：點(diǎn)擊按鈕，使用 ajax 獲取數(shù)據(jù)，如何在數(shù)據(jù)到來之前防止重復(fù)點(diǎn)擊?
var isLoading = false;//狀態(tài)變量：用于在數(shù)據(jù)到來之前防止重復(fù)點(diǎn)擊
btnNode.addEventListener('click', function() {
if(isLoading) return;//正在加載則終止
var text = textNode.value;
var xhr = new XMLHttpRequest();
xhr.open('get', '/test?text=' + text, true);
xhr.send();
xhr.onreadystatechange = function(){
if (xhr.readyState === 4 && xhr.status === 200) {
var content = xhr.responseText;
console.log(content);
contentNode.innerText = content;
isLoading = false;//加載成功則重置狀態(tài)變量
}
}
isLoading = true;//加載開始時(shí)改變狀態(tài)變量的值
});
