AJAX

1. ajax是什么？有什么作用？

• ajax（全称是Asynchronous JavaScript and XML）就是用JS向服务端发起请求，并获取服务器返回的数据。
• ajax的作用就是，在浏览器与Web服务器之间使用异步数据传输（HTTP请求）从服务器获取数据。可以在不重新加载整个网页的情况下，通过JavaScript发送请求、接受服务器传来的数据，然后操作DOM将新数据对网页的某部分进行更新。
• ajax发起请求一共四步：

  1. 创建一个XMLHttpRequest对象
     var xmlhttp = new XMLHttpRequest();

  2. 监听请求成功后的状态变化
     xmlhttp.onreadystatechange = function() {
     if (this.readyState == 4 && this.status == 200) {
     // 处理数据
     console.log(xmlhttp.responseText);
     }
     };
     

     

  3. 设置请求参数
     xmlhttp.open("get/post", "url", true/false);

  4. 发送请求
     xmlhttp.send(str); // str为使用post方式发送请求时，提交的参数，使用get方式提交请求时参数加在url后面

2. 前后端开发联调需要注意那些事情？后端接口完成前如何mock数据？（npm install -g server-mock）

• 前后端开发联调需要注意事项：
  1. 约定数据：有哪些需要传输的数据，数据类型是什么；
  2. 约定接口：确定接口名称及请求和响应的格式，请求的参数名称、响应的数据格式；
  3. 根据这些约定整理成接口文档
• 后端接口完成前mock数据：可以根据接口文档，使用假数据来验证我们制作的页面响应和接口是否正常。可以搭建php本地服务器用，php写脚本提供临时数据；也可使用server-mock或Mock.js，它能拦截ajax请求并根据请求中的内容来随机生成符合你要求的假数据，模拟后端环境让你完成对页面和接口的测试。

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

可以加一个状态锁，在触发ajax前先上锁，之后用户再怎么点击都不会触发ajax，直至代码执行完再开锁。
更多方法参考：怎样防止重复发送 Ajax 请求？—知乎

本文版权属吴天乔所有，转载务必注明出处。