題目1： ajax 是什么茂翔？有什么作用？
全稱是Asynchronous JavaScript and Xml，
ajax是一種技術(shù)的泛稱宋列，能與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁
優(yōu)點：
頁面不用整個重新加載，用戶體驗好
按需取數(shù)據(jù)评也，可以最大程度的減少對服務(wù)器造成的負(fù)擔(dān)
缺點：
無法跨服發(fā)送請求
題目2： 前后端開發(fā)聯(lián)調(diào)需要注意哪些事情炼杖？后端接口完成前如何 mock 數(shù)據(jù)？
充分的了解項目的需求
約定好設(shè)計接口
約定好數(shù)據(jù)格式
前端需要傳遞怎么樣的參數(shù)和傳遞的方式
后端需要返回怎么樣的參數(shù)
后端接口完成前盗迟，前端根據(jù)約定的好數(shù)據(jù)格式和參數(shù)mock數(shù)據(jù)
題目3：點擊按鈕坤邪，使用 ajax 獲取數(shù)據(jù)，如何在數(shù)據(jù)到來之前防止重復(fù)點擊?
設(shè)計一個狀態(tài)鎖罚缕，數(shù)據(jù)發(fā)送成功后鎖上艇纺，數(shù)據(jù)接收到后打開，用戶點擊前判斷狀態(tài)鎖是true還是false
題目4：實現(xiàn)加載更多的功能,后端在本地使用server-mock來模擬數(shù)據(jù)
<!doctype html>
<head>
<meta charset="utf-8">
<title>加載更多</title>
<style>
ul,li {
list-style: none;
padding-left: 0;
}
li {
border: 1px solid;
padding: 10px;
margin: 5px;
}
</style>
</head>
<body>
<ul></ul>
<button class="btn" id="load-more">加載更多</button>
<script>
var btn = document.querySelector('#load-more')
var ul=document.querySelector('ul')
var pageIndex=0 //這個變量用于記錄下標(biāo)
var isDataOk=true //用于鎖住數(shù)據(jù)未傳輸完畢時用戶的操作
btn.addEventListener('click',function(){
if(!isDataOk){
return
}
var xhr = new XMLHttpRequest() //使用AJAX
xhr.onreadystatechange = function(){ //狀態(tài)檢測
if(xhr.readyState === 4){
if(xhr.status===200 || xhr.status ==304){ //狀態(tài)都沒問題則繼續(xù)執(zhí)行
var results = JSON.parse(xhr.responseText)//返回數(shù)據(jù)轉(zhuǎn)成JSON
console.log(results) //到這里時檢測傳回的數(shù)據(jù)是否有問題
var fragment = document.createDocumentFragment() //創(chuàng)建節(jié)點
for(var i=0;i<results.length;i++){
var node = document.createElement('li')//創(chuàng)建元素li
node.innerText=results[i] //遍歷后賦值邮弹，innerText安全性上來講比innerHTML高
fragment.appendChild(node)
}
ul.appendChild(fragment)
pageIndex+=5
} //每次數(shù)據(jù)返回后都會增加
}else{
console.log('報錯') //用于狀態(tài)檢測沒過時返回報錯信息
}
isDataOk=true //傳回數(shù)據(jù)成功后打開
}
xhr.open('get','/loadMore?index='+pageIndex+'&length=5',true)//設(shè)置傳遞方式黔衡，接口名字，是否異步
xhr.send()//發(fā)送請求
isDataOk= false //發(fā)送請求后鎖住
})
</script>
</body>
app.get('/loadMore',function(req,res){
var curIdx= req.query.index //獲取請求的參數(shù)
var len= req.query.length //獲取請求的參數(shù)
var data=[] //創(chuàng)建一個Array
//然后遍歷請求的參數(shù)
for(var i=0; i<len;i++){
data.push('新聞' + (parseInt(curIdx) + i))
}
res.send(data); //發(fā)送參數(shù)回去
})
