ajax 是什么？有什么作用？
传统的HTTP请求
- 浏览器向服务器发送请求
- 服务器根据浏览器传来数据生成response
- 服务器把response返回给浏览器
- 浏览器刷新整个页面显示最新数据
这个过程是同步的，顺序执行。需要刷新整个网页，效率低，用户体验差
AJAX请求
AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求）从服务器获取数据。这里的异步是指脱离当前浏览器页面的请求、加载等单独执行，这意味着可以在不重新加载整个网页的情况下，通过JavaScript发送请求、接受服务器传来的数据，然后操作DOM将新数据对网页的某部分进行更新，使用Ajax最直观的感受是向服务器获取新数据不需要刷新页面等待了。
ajax是一种技术方案，但并不是一种新技术。它依赖现有的CSS/HTML/Javascript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象。
前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？
- 约定接口：确定接口名称及请求和响应的格式，请求的参数名称、响应的数据格式；
- 约定数据：有哪些需要传输的数据，数据类型是什么；
- 根据这些数据整理成接口文档。
什么是mock数据
作为前端经常需要模拟后台数据，我们称之为mock。通常的方式为自己搭建一个服务器，返回我们想要的数据。
如何mock数据
前端人员可以自己使用服务器框架搭建一个模拟服务器环境(如：express&nodejs，xampp或者server-mock)， 在本地的平台上mock数据，事先进行调试。
点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
设置一个状态锁,在触发ajax前是锁定的,之后若重复点击都不会触发ajax,直到代码执行完再解除锁定。
var isDataArrive = true; //设置状态锁初始值为true，表示数据到达。
btn.addEventListener('click', function(e) {
e.preventDefault();
if (!isDataArrive) {
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);
console.log(result);
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);
pageIndex += 5;
} else {
console.log('出错了');
}
isDataArrive = true; //若获取到数据，表示数据已经送达，将状态锁设置为true。
}
};
xhr.open('get', '/loadMore?index=' + pageIndex + '&length=5', true);
xhr.send();
isDataArrive = false; //发送数据之后，将状态锁设置为false
实现加载更多的功能，后端在本地使用server-mock来模拟数据
效果图
