进阶12 ajax

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

• ajax(Asynchronous Javascript +XML)是异步的 JavaScript 和 XML，是指一种创建交互网页应用的网页开发技术，是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个页面的情况下，对网页的某部分进行更新。
  ajax是一种技术方案，但并不是一种新技术。它依赖的是现有的CSS/HTML/Javascript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。一句话来总结两者的关系：我们使用XMLHttpRequest对象来发送一个Ajax请求。
• 作用： 在不重新加载页面的情况下发送请求给服务器； 接受并使用从服务器发来的数据。

题目2： 前后端开发联调需要注意哪些事情？后端接口完成前如何 mock 数据？
在开发之前，前后端需要协作商定数据和接口的各项细节，后端负责提供数据，前端负责展示数据（根据数据负责页面的开发）

• 前后端开发的注意事项
  1 URL：接口名称
  2 发送请求的参数和格式（get/post）
  3 数据响应的数据格式（数组/对象）
  4 根据前后端约定，整理接口文档
• 如何mock数据
  1 搭建web服务器
  2 根据接口文档仿造假数据
  3 关联前后端文件，开启web服务器
  4 验证前端页面功能及展示是否正确

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

<button id="button">点我</button>
<script>    
    var isDataArrive = true //默认为true
    var btn = document.querySelector('#button');
    btn.addEventListener('click', function () {
      if (!isDataArrive) { //如果数据没有到来
        return
      }
      var xhr = new XMLHttpRequest()
      xhr.open('GET','/data.json',true)
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (xhr.status === 200 || xhr.status === 304) {
            console.log(JSON.parse(xhr.responseText))
          }
          isDataArrive = true // 收到响应
        }
      }
      xhr.send()
      isDataArrive = false //停止再次发送请求
    })
</script>

data.json
  {
     "name": "jirengu"
     "age": 3
  }

题目4：实现加载更多的功能，效果范例。代码提交到 github
https://github.com/Haluluyo/task12-demo