AJAX

1. ajax 是什么？有什么作用？

ajax：
Ajax的全称是Asynchronous JavaScript and XML 中文名称定义为异步的JavaScript和XML，就是不关闭不转跳不刷新的情况下，在网页后台提交数据，部分更新页面内容。
就好比要求10个人拍集体照，只来了9个。没参与照相的人也想出现在照片中，该怎么办呢？

传统方法：把大家再召集起来，再拍一次。
ajax：把缺席的人PS上去。

作用：
可以节省网络带宽，提高页面的加载速度，从而缩短用户等待时间，改善用户体验。

2.前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？

前后端开发联调需要注意事项：

1. 约定数据：有哪些需要传输的数据，数据类型是什么；
2. 约定接口：确定接口名称及请求和响应的格式，请求的参数名称、响应的数据格式；
3. 根据这些约定整理成接口文档

后端接口完成前mock数据：
可以根据接口文档，使用假数据来验证我们制作的页面响应和接口是否正常。可以搭建php本地服务器用，php写脚本提供临时数据；也可使用Mock.js，它能拦截ajax请求并根据请求中的内容来随机生成符合你要求的假数据，模拟后端环境让你完成对页面和接口的测试。+

3. 点击按钮，使用 ajax 获取数据，如何在数据到来之前防止重复点击?

基础方法：

• 点击提交后，将按钮disabled掉，等请求结束了没再置回来
• 在外部设置一个状态锁：

var status = false
btn.onclick = function (){
  if(!status){
    status = true
    var xhr = new XMLHttpRequest()
    xhr.onreadystatechange = function(){
        if( xhr.readyState == 4 ){
            // to do
            status = false
        }
    }
  }
  xhr.open('get','xxx/?')
  xhr.send()
}

还可以：

• 无限制的提交，但是以最后一次操作为准
• 无论提交如何频繁，任意两次有效提交的间隔时间必定会大于或等于某一时间间隔；即以一定频率提交
• 任意两次提交的间隔时间，必须大于一个指定时间，才会促成有效提交
  参考文章

4.实现加载更多的功能

demo需要安装sever-mock