题目1： ajax 是什么？有什么作用？
- 概念：ajax是一种技术的泛称，它依赖的是现有的CSS/HTML/Javascript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器在不刷新页面的情况下向服务器发出HTTP请求与接收HTTP响应。
- 作用：可以和后端交换数据，不用刷新页面,用户体验好
题目2： 前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？
- 前后端开发联调需要注意哪些事情:
- 约定数据: 后端数据写好,放在模板里,前端可以写页面,互不影响
- 约定接口: 请求和响应的格式;接口名称,请求参数,响应
- 后端接口完成前如何mock数据
mock数据指的是在后端开发没有完成时，前端可以通过mock方法搭建本地服务器，模拟后台数据来实现数据交互的效果。
可安装xampp在本地搭建(php等)服务器，也可以安装server-mock，这样不需要特地去写一个后台的处理页面文件来访问数据。
server-mock步骤： 1.下载node.js
2.命令行下载server-mock npm install -g server-mock --registry=https://registry.npm.taobao.org
3.在终端 cd到你的文件所在的文件夹;mock init 可创建范例文件 4.执行mock start可将当前文件夹路径作为根目录启动一个 web服务器 5.在浏览器输入 http://localhost:8080/xxx.html
题目3：点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
设置一个密码锁,在触发ajax前是锁定的,之后若重复点击都不会触发ajax,直到代码执行完再解除锁定.
var flag= true; //目前可以点击
btn.addEventListener('click',function(){
if(!flag){return}
ajax({
...
flag= true; //加载完成后可以点击
});
flag= false; //点击后不可重复点击
});
题目4：实现加载更多的功能，效果范例327，后端在本地使用server-mock来模拟数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="css/loadmore.css">
<title>load-more</title>
</head>
<body>
<ul id="loadBox">
<li>内容1</li>
<li>内容2</li>
</ul>
<button id="btn">加载更多</button>
</body>
<script>
flag = true;//开锁
var pageindex = 2;
var cfragment = document.createDocumentFragment();
btn.onclick=function () {
if(!flag){return}
this.classList.add("loading");
this.innerText="";
var that = this;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if(xhr.readyState==4){
if(xhr.status==200 ||xhr.status==304){
var res = JSON.parse(xhr.responseText);
for(var i=0;i<res.length;i++){
var cli = document.createElement("li");
cli.innerText = res[i];
cfragment.appendChild(cli)
}
loadBox.appendChild(cfragment);
pageindex+=5;
} else {
alert('系统异常');
}
that.classList.remove("loading");
that.innerText="加载更多";
flag=true;//开锁
}
};
xhr.open('get','/loadmore?pageindex='+pageindex+'&len=5',true);
xhr.send();
flag = false;//关锁
}
</script>
</html>
```javascript
//server-mock
router.get('/loadmore',function (req,res) {
var pageindex = req.query.pageindex;
var len = req.query.len;
var result=[];
for(var i =0;i<len;i++){
result[i] ="内容"+ (parseInt(pageindex)+1+i);
}
setTimeout(function () {
res.send(result)
},1000)
})
//css部分
@charset "utf-8";
body {
font-family: "Microsoft YaHei";
}
#loadBox {
padding: 0;
}
#loadBox li {
padding: 10px;
margin-top: 10px;
border: 1px solid #ccc;
list-style: none;
cursor: pointer;
}
#loadBox li:hover {
background: green;
}
#btn {
border: 1px solid #E27272;
width: 80px;
height: 40px;
line-height:38px;
color: #E27272;
cursor: pointer;
margin: 0 auto;
text-align: center;
background-color: #fff;
border-radius: 2px;
display: block;
outline: none;
box-sizing: border-box;
}
.loading {
background: url("../images/loading.gif") no-repeat center center/auto 100% ;
}
效果：
[](https://segmentfault.com/a/1190000004322487 对应的参考文章不错，可作为资料对 XMLHttpRequest 对象有个更细致的了解
如果对自己代码有更高要求，可以参考两个视频 ajax封装170和ajax封装231
想提前学习 HTTP，可以提前做这个这个高级部分的任务，视频没权限可以直接用赠送的谷币购买观看
https://segmentfault.com/a/1190000004322487)
