題目1： ajax 是什么侣夷？有什么作用？
- ajax 的全稱是Asynchronous JavaScript and XML拳缠，直譯：異步 JavaScript 和 XML抚芦。
- ajax是使用XMLHttpRequest對象與服務(wù)器端通信的腳本語言。
- 可以無需刷新頁面而與服務(wù)器端進(jìn)行通信崩泡，可以發(fā)送及接收各種格式的信息禁荒，包括JSON、XML角撞、HTML和文本文件呛伴。
題目2： 前后端開發(fā)聯(lián)調(diào)需要注意哪些事情？后端接口完成前如何 mock 數(shù)據(jù)谒所？
- 前后端開發(fā)聯(lián)調(diào)需要注意哪些事情：
- 統(tǒng)一接口名稱热康，統(tǒng)一命名，定制規(guī)范劣领。
- 統(tǒng)一數(shù)據(jù)類型姐军，統(tǒng)一數(shù)據(jù)大小等限制的確定。
- 統(tǒng)一接口的相關(guān)參數(shù)： url尖淘、端口奕锌、方法( get/post)、請求數(shù)據(jù)的類型村生。
- 按照上述確認(rèn)后的版本嚴(yán)格執(zhí)行惊暴。
- 后端接口完成前如何 mock 數(shù)據(jù)：
- 在本地搭建服務(wù)器后臺，如使用nodejs等軟件趁桃。
- 編寫router.js文件模擬后端返回數(shù)據(jù)辽话。
題目3：點擊按鈕，使用 ajax 獲取數(shù)據(jù)镇辉，如何在數(shù)據(jù)到來之前防止重復(fù)點擊?
防止數(shù)據(jù)到來之前防止重復(fù)點擊屡穗，可以在XMLHttpRequest對象與后臺服務(wù)器通信中進(jìn)行條件判斷，首先阻止默認(rèn)事件忽肛，再設(shè)置一個標(biāo)記變量值為true村砂，判斷節(jié)點設(shè)置在執(zhí)行發(fā)送函數(shù)時，將標(biāo)記變量值變?yōu)閒alse屹逛，并在css或js中阻止執(zhí)行發(fā)送函數(shù)（元素）生效础废，如果接收到后臺服務(wù)器返回的數(shù)據(jù)則將標(biāo)記變量的值還原為true，并使發(fā)送函數(shù)（元素）可被正常執(zhí)行罕模。
例子demo
var btn=document.querySelector('#btn')
var isLoad = true
btn.addEventListener("click",function(e){
e.preventDefault()
if(!isLoad){
return;//btn.classList.add(‘disabled’)
}
var xhr=new XMLHttpRequest()
xhr.onreadystatechange=function(){
if(readystate===4){
if(xhr.status === 200||xhr.status === 304){
/*var results = JSON.parse(xhr.responseText);
for (var i = 0; i < results.length; i++) {
var node = document.createElement('li')
node.innerText = results[i]
ct.appendChild(node)*/
isLoad = true
}
}
xhr.open('get',"/url",true)
xhr.send()
isLoad = false
//btn.classList.remove(‘disabled’)
}
})
題目4：實現(xiàn)加載更多的功能评腺，效果范例296，后端在本地使用server-mock來模擬數(shù)據(jù)
//router.js
app.get('/loadMore', function (req, res) {
var idx = req.query.index
var len =req.query.length
var data = []
for(var i = 0;i<len ; i++){
data.push("內(nèi)容"+(parseInt(idx)+i))
}
res.send(data)
