1、ajax 是什么？有什么作用？
- ajax，即Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。是一种不需要刷新页面就能向后台提交或获取数据的技术，也是一种浏览器支持的JS内置对象。
- 它最大的作用在于提升用户浏览网页的过程中的体验。当用户向服务器发送ajax请求时，网页不会重置和刷新，因此用户等待返回数据的过程中可以进行其它操作。
2、前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？
- 前后端联调需要注意以下事项：
1.确认接口类型(get/post)及接口名称；
2.确认前端发送的参数类型及格式；
3.确认后端响应所返回的数据类型及格式。 - 在后端接口完成前，我们可以使用server-mock，模拟后端服务器，接收和处理前端的请求。
3、点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击？
我们可以为代码添加“状态锁”，保证数据返回之前，用户的重复点击无效。例如：
<script>
var btn = document.querySelector('#load-more')
var ct = document.querySelector('#ct')
var pageIndex = 3
var isDataArrive = true //1、默认状态下，用户的点击是有效的。
btn.addEventListener('click',function(){
if(isDataArrive){ //2、当isDataArrive = true时，才执行后续的语句。
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、当用户点击后，浏览器立刻向服务器发送请求，同时将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)
})