题目1：ajax 是什么？有什么作用？
AJAX是Asynchronous Javascript and XML（异步的JavaScript和XML）的缩写，是一种利用浏览器提供的XMLHttpRequest对象以实现不刷新页面的情况下获取数据或提交数据的一种技术
ajax的作用就是在页面不刷新的情况下向后台递交数据或者获取数据
题目2：前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？
前后端开发联调需要注意以下事项
- 约定好接口的类型，采用get还是post方式
- 接口的名字
- 接口的参数
- 后端提供给前端的数据
后端接口完成前如何 mock 数据
利用node.js搭建模拟的后台服务器，按照约定好的接口类型、接口名字、参数以及后台提供的数据类型对验证前端页面的功能是否正确
题目3：点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
思路： 可以先对是否已经拿到数据进行判断，如果没有拿到数据，则不再通过ajax重复获取数据或者直接禁用点击获取更多的button (button.disabled = true)
var btn = document.querySelector('#loadMore')
var ct = document.querySelector('#ct')
var itemIndex = 0
// 声明数据状态锁，用于判断是否在加载数据
var isDataReady = true
btn.addEventListener('click', function (e) {
e.preventDefault()
if (!isDataReady) {
// 如果未返回数据，直接退出
return;
}
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200 || xhr.status === 304) {
var result = JSON.parse(xhr.responseText)
var fragment = document.createDocumentFragment()
for (var i = 0; i < result.length; i++) {
var node = document.createElement('li')
node.innerText = result[i]
fragment.appendChild(node)
}
ct.appendChild(fragment)
itemIndex = itemIndex + 5
} else {
alert('出错啦')
}
// 数据到来之后 状态锁解除
isDataReady = true
}
}
xhr.open('get', '/loadmore?index=' + itemIndex + '&length=5', true)
xhr.send()
// 发送请求之后，添加状态锁，
isDataReady = false
})
