进阶任务12-AJAX

题目1： ajax 是什么？有什么作用？

AJAX(Asynchronous JavaScript + XML)，异步的JavaScript和XML，它是利用现有的HTML或XHTML,层叠样式表,JavaScript,文档对象模型,XML、XSLT,最重要的是XMLHttpRequest对象等这些技术结合在Ajax模型中，从而使得web应用程序能够快速地对用户界面进行增量更新，而无需重新加载整个浏览器页面。这使得应用程序更快、更灵敏地响应用户操作。

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

** 前后端开发联调需要注意哪些事情: **
约定数据: 后端数据写好,放在模板里,前端可以写页面,互不影响
约定接口: 请求和响应的格式;接口名称,请求参数,响应
**后端接口完成前如何mock数据 **
mock数据指的是在后端开发没有完成时，前端可以通过mock方法搭建本地服务器，模拟后台数据来实现数据交互的效果。
可以安装server-mock，这样不需要特地去写一个后台的处理页面文件来访问数据。

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

设置一个变量(状态锁)isDataArrive=true,监听按钮点击事件，如果数据还没发送过来
if(!isDataArrive) return,那么这次点击什么也不做。请求数据完成后，打开锁，最后在发送请求之前，再做个标记加上状态锁，设置为flase。

  var isDataArrive = true;//声明状态锁，默认打开
    btn.addEventListener("click",function(){
        if (!isDataArrive)  return
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if (xhr.readystate === 4) {
                if (xhr.readystate === 200||xhr.readystate ===304) {
                    //dosomething
                }
                isDataArrive = true;
            }
        }
        xhr.open('get','/index?length',true)
        xhr.send()
        isDataArrive = false;//上锁，禁止在请求完成前发请求
    })
</script>

题目4：实现加载更多的功能后端在本地使用server-mock来模拟数据

效果范例