进阶12-ajax、server-mock的使用

• 题目1： ajax 是什么？有什么作用？
  AJAX全称是Asynchronous JavaScript and XML，指的是通过Javascript脚本发起HTTP通信；
  它可以使用原生的XMLHttpRequest对象向服务器发出HTTP请求，这个请求可以是同步或异步的（一般是异步），建立连接后可以得到服务器的数据，我们就可以利用得到的数据通过JS来更新部分页面而无需对整个页面进行刷新。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新，可以增强用户体验。

• 题目2：前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？
  前后端开发联调需要注意：
  （1）确定接口信息；有哪些接口，哪些参数，以什么样的请求等，一般要确定详细的接口文档。
  （2）确定要填充的数据，哪里填充图片，哪里填充文本信息等。
  mock数据指的是在后端开发没有完成时，前端可以通过mock方法搭建本地服务器，模拟后台数据来实现数据交互的效果。
  1.自己模拟数据来进行MOCK；
  2.使用server-mock或mock.js搭建模拟服务器，进行模拟测试；
  3.使用XAMPP等工具，编写PHP文件来进行测试

• 题目3：点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?
  可以加一个状态锁，防止用户重复点击，重复提交ajax，在触发ajax前是锁定的，代码执行完毕后解除锁定

//添加一个状态锁，初始为true，上锁为true，解锁为false
var lock = true;
btn.addEventListener('click', function () {
    //状态为false时，直接return
    if (!lock) {
        return
    }
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
        if (xhr.readyStatus === 4) {
            //readystate为4时，此次请求结束，上锁
            lock = true;
        }
    }
    xhr.open('GET',url);
    xhr.send();
    //解锁，这时候请求开始
    lock = false;
})

• 题目4：实现加载更多的功能

代码链接

后端代码