ajax实践

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

ajax（异步JavaScript和XML）Asynchronous JavaScript + XML, 其本身不是一种新技术，而是一个在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法

具体包括以下步骤：

初始化：var httpRequest = new XMLHttpRequest()
设置参数：httpRequest .open('Get','/data')
监听：httpRequest.onreadystatechange = function(){}
发送：httpRequest.send()

网页程序能够逐步快速地将更新呈现在用户界面上，不需要重载（刷新）整个页面。这使得程序能够更快地回应用户的操作。

通俗的讲，是页面不刷新的向后台去提交数据或获取数据的一种技术。浏览器所支持的内置的js对象，可以操纵这个对象，去得到数据。

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

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

• 约定接口地址
• 约定类型 (如get/post)
• 约定数据，返回数据格式

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

• mock数据指的是在后端开发没有完成时，前端可以通过mock方法搭建本地服务器，模拟后台数据来实现数据交互的效果。
• 可安装xampp在本地搭建(php等)服务器，也可以安装server-mock，这样不需要特地去写一个后台的处理页面文件来访问数据。

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

var isDataArrive = true;
//默认数据到来
btn.addEventListener('click',funtion(){

  if(!isDataArrive){
    return;
  }
  //如果数据没有到来，再次点击return掉，执行下面表示数据来了

  var xhr = new XMLHttpRequest()
  xhr.onreadystatechange = function(){
    if(xhr.readystate === 4 && xhr.status ===200){
      xxxxxxxx
    }
    isDataArrive = true;
    //数据到了
  }
  xhr.open()
  xhr.send()
  isDataArrive = false；
  //数据发送，数据没有到来
})

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

代码

资料：

你真的会使用XMLHttpRequest吗？