ajax 是什么？有什么作用？
ajax是Async Javascript And Xml的缩写，即异步的JavaScript和XML。
ajax的作用是通过JavaScript模仿浏览器发出的请求，实现局部刷新和加载，当像服务器请求数据时，无需刷新整个页面，提高用户体验。
ajax现在最常用的数据传输格式是json
前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？
前后端开发联调需要注意：
- 约定数据格式，常用json格式传输数据
- 约定接口：确定接口名称及请求和响应的格式，请求的参数名称、响应的数据格式；
后端接口完成前如何mock数据：
mock数据指的是在后端开发没有完成时，前端可以通过mock方法搭建本地服务器，模拟后台数据来实现数据交互的效果。可以安装server-mock，也可以使用easy-mock,这样不需要特地去写一个后台的处理页面文件来访问数据。
点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
ul,li {
margin: 0;
padding: 0;
}
.list>li {
border: 1px solid pink;
list-style: none;
margin: 0 auto;
width: 90%;
padding:10px;
}
.btn {
display: block;
width: 100px;
height: 40px;
border: 2px solid rgba(0, 212, 46, 0.54);
border-radius: 3px;
margin: 0 auto;
text-align: center;
line-height: 40px;
color: #000;
text-decoration: none;
}
.btn:hover {
background: rgba(0, 212, 46, 0.54);
}
</style>
</head>
<body>
<ul class="list">
</ul>
<a class="btn" href="#">加载更多</a>
<script type="text/javascript">
var btn = document.querySelector('.btn')
var list = document.querySelector('.list')
var pageIndex=0
var isDataOk = true //加一个状态锁，默认为true
// 给btn加载点击事件,点击时发送请求
btn.addEventListener('click',function(e){
e.preventDefault()
//先判断数据有没有到来 ，如果没有，将不再向后端发送请求
if(!isDataOk){
return
}
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status === 200 || xhr.status === 304){
// 把响应的数据转换为json格式的字符串
var results = JSON.parse(xhr.responseText)
// console.log(results) 这里可以先判断一下数据有没有到来
var fragment = document.createDocumentFragment()
for(var i=0;i<results.length;i++){
var node = document.createElement('li')
node.innerText = results[i]
fragment.appendChild(node)
}
list.appendChild(fragment)
pageIndex += 5
}else{
console.log('出错了')
}
isDataOk = true //表示是响应数据状态
}
}
xhr.open('get','/loadMore?index='+pageIndex+'&length=5',true)
xhr.send()
isDataOk = false //请求发送后，设置为false。当用户再次点击时，会做一个判断，如果数据没有没有到来，将不会再向后端发送请求。
})
</script>
</body>
</html>
