題目1： ajax 是什么鹿霸？有什么作用柄延？
ajax全稱Asynchronous Javascript And XML肃廓，即創(chuàng)建異步交互的網(wǎng)頁應用的一種開發(fā)技術(shù)翻屈，當在網(wǎng)頁中涉及到很多數(shù)據(jù)信息時陈哑，往往不是把所有的信息直接寫在html頁面上，而是通過數(shù)據(jù)交互從后臺獲取數(shù)據(jù)，而傳統(tǒng)的表單提交數(shù)據(jù)需要提交整個網(wǎng)頁惊窖，有時只是更新頁面上很少部分的數(shù)據(jù)卻要刷新整個網(wǎng)頁刽宪，效率低，用戶體驗差界酒，因此人們思考通過能否通過局部刷新網(wǎng)頁的方式圣拄，達到肉眼看起來“無刷新”的效果，這樣ajax這種新的技術(shù)就被提出來毁欣，ajax通過核心對象XMLHttpRequest庇谆，用js的方式向服務(wù)端提交少量數(shù)據(jù)，并處理響應凭疮，同時不阻塞用戶在網(wǎng)頁上的其他動作饭耳，達到異步刷新，局部更新網(wǎng)頁的目的执解。
題目2： 前后端開發(fā)聯(lián)調(diào)需要注意哪些事情寞肖？后端接口完成前如何 mock 數(shù)據(jù)？
確認好分工衰腌，角色新蟆；約定好接口的參數(shù)，格式桶唐，數(shù)據(jù)栅葡，接口地址，傳遞方式尤泽，回傳數(shù)據(jù)的內(nèi)容類型欣簇；討論好接口的實現(xiàn)方式后，由前后臺人員確認是否可行坯约，再開始開發(fā)熊咽；確認接口與html內(nèi)容整合統(tǒng)一后若頁面出現(xiàn)樣式或其他問題由誰來解決。
mock數(shù)據(jù)指的是在后端開發(fā)沒有完成時闹丐，前端可以通過mock方法搭建本地服務(wù)器横殴，模擬后臺數(shù)據(jù)來實現(xiàn)數(shù)據(jù)交互的效果∏渌可以通過安裝xampp在本地搭建服務(wù)器衫仑，也可以安裝server-mock，這樣不需要特地去寫一個后臺的處理頁面文件來訪問數(shù)據(jù)堕花。
題目3：點擊按鈕文狱，使用 ajax 獲取數(shù)據(jù)，如何在數(shù)據(jù)到來之前防止重復點擊?
設(shè)置狀態(tài)鎖：設(shè)置一個變量locked缘挽，初始值為false瞄崇，觸發(fā)相關(guān)事件時為ture呻粹，并且設(shè)置當locked為true時return。當事件函數(shù)里面的ajax執(zhí)行完之后設(shè)置locked為false苏研，這樣當ajax請求的數(shù)據(jù)還沒來之前如果重復點擊的話等浊，就會直接return出該事件函數(shù)，使重復點擊無效摹蘑。
題目4：封裝一個 ajax 函數(shù)筹燕，能通過如下方式調(diào)用。后端在本地使用server-mock來 mock 數(shù)據(jù)
function ajax(opts) {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
var result = JSON.parse(xmlhttp.responseText);
opts.success(result);
}
if (xmlhttp.readyState == 4 && xmlhttp.status == 404) {
opts.error();
}
};
var tmpArr = [];
for (var key in opts.data) {
tmpArr.push(key + "=" + opts.data[key]);
}
var data = tmpArr.join('&');
if (opts.type.toLowerCase() === 'get') {
xmlhttp.open('get', opts.url + '?' + data);
xmlhttp.send(null);
}
if (opts.type.toLowerCase() === 'post') {
xmlhttp.open('get', opts.url);
xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xmlhttp.send(data);
}
}
