关于AJAX

ajax 是什么？有什么作用？

• （异步JavaScript和XML）Asynchronous JavaScript + XML, 其本身不是一种新技术，而是一种使用现有技术集合的‘新’方法, 包括: HTML or XHTML, Cascading Style Sheets, JavaScript, The Document Object Model, XML, XSLT, 以及最重要的 XMLHttpRequest object.当使用结合了这些技术的AJAX模型以后， 网页程序能够逐步快速地将更新呈现在用户界面上，不需要重载（刷新）整个页面。这使得程序能够更快地回应用户的操作。
• 尽管X在Ajax中代表XML, 但由于自身的许多优势，比如更加轻量以及作为Javascript的一部分，目前JSON的使用比XML更加普遍。JSON和XML都被用于在Ajax模型中打包信息。

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

• 注意事项：
  • 约定好通信方式(get、post)、路由
  • 约定好前端传给后端的参数，以及后端返回的数据格式
• 可以使用node或其它后端语言搭建模拟服务器，根据约定的数据格式生成虚拟数据

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

• 设置一个状态变量，当一个Ajax通信完成前拒绝发起下一个。如：

  加载更多
  
  var isDataArrive = true
  btn.onclick = function (e) {
  e.preventDefault()
  if (!isDataArrive) {
    return
  }
  isDataArrive = false
  ajax({
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){
       if(xhr.readyState === 4){
            isDataArrive = true
        }
    }
  });
  
  }
  

• 当Ajax通信完成前将按钮或超链接设置为不可点击状态。

实现加载更多的功能，效果范例377，后端在本地使用server-mock来模拟数据

• https://github.com/liushuangbillqwewqeq/demos/blob/master/js/Ajax%E5%B0%81%E8%A3%85.html