題目1： ajax 是什么腋逆？有什么作用？
ajax是一種技術(shù)方案侈贷，但并不是一種新技術(shù)惩歉。它依賴的是現(xiàn)有的CSS/HTML/Javascript，而其中最核心的依賴是瀏覽器提供的XMLHttpRequest對象，是這個對象使得瀏覽器可以發(fā)出HTTP請求與接收HTTP響應(yīng)撑蚌。
所以我用一句話來總結(jié)兩者的關(guān)系：我們使用XMLHttpRequest對象來發(fā)送一個Ajax請求上遥。
作用：實現(xiàn)網(wǎng)頁的異步加載，局部刷新網(wǎng)頁争涌。當(dāng)在向服務(wù)器獲取新數(shù)據(jù)時不需要刷新整個網(wǎng)頁粉楚，提高用戶體驗。
題目2： 前后端開發(fā)聯(lián)調(diào)需要注意哪些事情亮垫？后端接口完成前如何 mock 數(shù)據(jù)模软？
前后端開發(fā)聯(lián)調(diào)需要注意事項：
- 約定數(shù)據(jù)：有哪些需要傳輸?shù)臄?shù)據(jù)，數(shù)據(jù)類型是什么饮潦；
- 約定接口：確定接口名稱及請求和響應(yīng)的格式燃异，請求的參數(shù)名稱、響應(yīng)的數(shù)據(jù)格式继蜡；
- 根據(jù)這些約定整理成接口文檔
如何mock數(shù)據(jù)：
- 可以根據(jù)接口文檔回俐，使用假數(shù)據(jù)來驗證我們制作的頁面響應(yīng)和接口是否正常。
- 可以用xampp進行模擬
- 也可使用server-mock
題目3：點擊按鈕壹瘟，使用 ajax 獲取數(shù)據(jù)鲫剿，如何在數(shù)據(jù)到來之前防止重復(fù)點擊?
設(shè)置一個狀態(tài)變量來防止重復(fù)發(fā)送請求
var isDataArrival = true;
btn.addEventListener('click',function (e) {
if (!isDataArrival){
return;
}
if(xhr.readyState === 4){
isDataArrival=true;
}
xhr.open('get',url);
xhr.send();
isDataArrival = false;
});
題目4：實現(xiàn)加載更多的功能，效果范例345稻轨，后端在本地使用server-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 dataString = ''; for(var key in opts.data) {
dataString += key + '=' + opts.data[key] + '&';
}
dataString = dataString.substring(0, dataString.length - 1);
if(opts.type.toLowerCase() === 'get') {
xmlhttp.open('get', opts.url + '?' + dataString, true); xmlhttp.send();
}
if(opts.type.toLowerCase() === 'post') {
xmlhttp.open('post', opts.url, true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form- urlencoded");
xmlhttp.send(dataString);
}
}
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('出錯了')
}
})
});
