进阶12 ajax实践

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

AJAX是Asynchronous Javascript and XML（异步的JavaScript和XML）的缩写，是一种利用浏览器提供的XMLHttpRequest对象以实现不刷新页面的情况下获取数据或提交数据的一种技术
ajax的作用就是在页面不刷新的情况下向后台递交数据或者获取数据

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

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

• 约定好接口的类型，采用get还是post方式
• 接口的名字
• 接口的参数
• 后端提供给前端的数据

后端接口完成前如何 mock 数据

利用node.js搭建模拟的后台服务器，按照约定好的接口类型、接口名字、参数以及后台提供的数据类型对验证前端页面的功能是否正确

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

思路： 可以先对是否已经拿到数据进行判断，如果没有拿到数据，则不再通过ajax重复获取数据或者直接禁用点击获取更多的button (button.disabled = true)

var btn = document.querySelector('#loadMore')
    var ct = document.querySelector('#ct')
    var itemIndex = 0

    // 声明数据状态锁，用于判断是否在加载数据
    var isDataReady = true 

    btn.addEventListener('click', function (e) {
      e.preventDefault()
      if (!isDataReady) {
        // 如果未返回数据，直接退出
        return; 
      }
      var xhr = new XMLHttpRequest()
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (xhr.status === 200 || xhr.status === 304) {
            var result = JSON.parse(xhr.responseText)
            var fragment = document.createDocumentFragment()
            for (var i = 0; i < result.length; i++) {
              var node = document.createElement('li')
              node.innerText = result[i]
              fragment.appendChild(node)
            }
            ct.appendChild(fragment)
            itemIndex = itemIndex + 5
          } else {
            alert('出错啦')
          }
          // 数据到来之后 状态锁解除
          isDataReady = true
        }
      }
      xhr.open('get', '/loadmore?index=' + itemIndex + '&length=5', true)
      xhr.send()
      // 发送请求之后，添加状态锁，
      isDataReady = false
    })

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

代码地址