1宗挥、ajax 是什么索昂？有什么作用餐茵？
- ajax炬转，即Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）辆苔。是一種不需要刷新頁面就能向后臺提交或獲取數據的技術算灸，也是一種瀏覽器支持的JS內置對象扼劈。
- 它最大的作用在于提升用戶瀏覽網頁的過程中的體驗。當用戶向服務器發(fā)送ajax請求時菲驴，網頁不會重置和刷新荐吵，因此用戶等待返回數據的過程中可以進行其它操作。
2赊瞬、前后端開發(fā)聯(lián)調需要注意哪些事情先煎？后端接口完成前如何 mock 數據？
- 前后端聯(lián)調需要注意以下事項：
1.確認接口類型(get/post)及接口名稱巧涧；
2.確認前端發(fā)送的參數類型及格式薯蝎；
3.確認后端響應所返回的數據類型及格式。 - 在后端接口完成前谤绳，我們可以使用server-mock占锯，模擬后端服務器袒哥，接收和處理前端的請求。
3消略、點擊按鈕堡称，使用 ajax 獲取數據，如何在數據到來之前防止重復點擊艺演？
我們可以為代碼添加“狀態(tài)鎖”却紧，保證數據返回之前，用戶的重復點擊無效胎撤。例如：
<script>
var btn = document.querySelector('#load-more')
var ct = document.querySelector('#ct')
var pageIndex = 3
var isDataArrive = true //1晓殊、默認狀態(tài)下，用戶的點擊是有效的伤提。
btn.addEventListener('click',function(){
if(isDataArrive){ //2挺物、當isDataArrive = true時，才執(zhí)行后續(xù)的語句飘弧。
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function(){
if(xhr.readyState ===4){
if(xhr.status === 200 || xhr.status === 304){
var results = JSON.parse(xhr.responseText)
var fragment = document.createDocumentFragment()
for(var i = 0; i < results.length; i++){
var node = document.createElement('li')
node.innerText = results[i]
fragment.appendChild(node)
}
ct.appendChild(fragment)
pageIndex = pageIndex + 6
}else{
console.log('出錯了')
}
isDataArrive = true //4识藤、當瀏覽器接收到后端返回的數據后，在頁面進行了展示次伶，同時將isDataArrive值更改為true痴昧，此時用戶就可以再次點擊了。
}
}
xhr.open('get','/loadMore?index=' + pageIndex + '&length=6',true)
xhr.send()
isDataArrive = false //3冠王、當用戶點擊后赶撰，瀏覽器立刻向服務器發(fā)送請求，同時將isDataArrive值更改為false柱彻，即此時用戶點擊是無效的豪娜。
}
})
</script>
4、實現加載更多的功能哟楷，后端在本地使用server-mock來模擬數據瘤载。
代碼如下：
//html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>加載更多</title>
<style>
ul,li{
margin: 0;
padding: 0;
}
li{
list-style: none;
margin-top: 10px;
padding: 10px;
border: 1px solid lightgray;
cursor: pointer;
}
li:hover{
color: white;
background: green;
}
.btn{
display: block;
margin: 10px auto;
width: 80px;
height: 40px;
color: #E27272;
line-height: 40px;
text-align: center;
text-decoration: none;
border: 1px solid #E27272;
border-radius: 3px;
cursor: pointer;
}
</style>
</head>
<body>
<ul id="ct">
<li>內容1</li>
<li>內容2</li>
</ul>
<a id="load-more" class="btn" href="javascript:void(0)">加載更多</a>
</body>
<script>
var btn = document.querySelector('#load-more')
var ct = document.querySelector('#ct')
var pageIndex = 3
var isDataArrive = true
btn.addEventListener('click',function(){
if(isDataArrive){
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function(){
if(xhr.readyState ===4){
if(xhr.status === 200 || xhr.status === 304){
var results = JSON.parse(xhr.responseText)
var fragment = document.createDocumentFragment()
for(var i = 0; i < results.length; i++){
var node = document.createElement('li')
node.innerText = results[i]
fragment.appendChild(node)
}
ct.appendChild(fragment)
pageIndex = pageIndex + 6
}else{
console.log('出錯了')
}
isDataArrive = true
}
}
xhr.open('get','/loadMore?index=' + pageIndex + '&length=6',true)
xhr.send()
isDataArrive = false
}
})
</script>
</html>
//router.js部分
app.get('/loadMore',function(req, res){
var curIdx = req.query.index
var len = req.query.length
var data = []
for(var i = 0; i < len; i++){
data.push('內容' + (parseInt(curIdx) + i))
}
setTimeout(function(){
res.send(data)
},3000)
})