ajax

题目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来模拟数据

content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

• 内容1


• 内容2

加载更多

```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

//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% ;
}

效果：

加载中.png

加载完成.png

[](https://segmentfault.com/a/1190000004322487 对应的参考文章不错，可作为资料对 XMLHttpRequest 对象有个更细致的了解
如果对自己代码有更高要求，可以参考两个视频 ajax封装170和ajax封装231
想提前学习 HTTP，可以提前做这个这个高级部分的任务，视频没权限可以直接用赠送的谷币购买观看
https://segmentfault.com/a/1190000004322487)