前端知识链条中少不了的一环 --Ajax

前言

当我们步入前端大门，走过 HTML，看过 CSS，翻过 JavaScript，接下来你该遇到的，就是它了--Ajax。

这个也是前端与后端交互所必需的东西，非常之重要。所以才有了标题的说法，它是前端知识链条中少不了的一环。

什么是 Ajax？

Ajax 的核心是 JavaScript 对象 XmlHttpRequest，XmlHttp 使我们可以使用 JavaScript 向服务器提出请求并处理响应，而不阻塞用户。

通过 XMLHttpRequest 对象，前端开发人员就可以在页面加载以后进行页面的局部更新等操作。

Ajax 作用是什么？

• 通过异步模式，提升了用户体验

• 不在使用 form 表单提交（会出现跳转情况），提升了用户体验

• Ajax 可以实现局部刷新，不用在更新整个页面，传统的网页（不适用 Ajax），想要更新内容必须重载整个页面。

这就使得 web 应用程序能够更加敏捷的回应用户操作，避免了多次向服务端发送那些重复的数据。

详解 Ajax 创建请求步骤

GET 请求

步骤如下：

• 创建一个对象

• 设置请求参数

• 发送请求

• 监听请求成功后的状态变化

  var request = new XMLHttpRequest()  request.open("GET", "url")  request.send()  request.onreadystatechange = function() {      if (this.readyState == 4 && this.status == 200) {        console.log(request.responseText)      }  }

• open()

• ​ open()方法创建了 http 请求，它有三个参数，第一个参数指定了提交的方式是 POST 还是 GET，第二个参数是指定要提交的地址是哪，第三个参数是指定异步还是同步（true or false）【目前已经废弃第三个参数】

• send()

• send()方法表示着发送请求，不需要任何参数

• 监听请求成功后的状态变化

• onreadystatechange：监听请求状态改变，readyState 改变时会调用此方法，一般用于指定回调函数

  readyState：共有五个状态

  • 0：未初始化

  • 1：open 方法成功调用后

  • 2：服务器已经答应客户端的请求

  • 3：交互中，http 头信息已经接收，响应数据未接收

  • 4：完成

  responseText：服务器端返回的文本内容，默认是字符串

  status：服务器端返回的状态码

  statusText：服务器端返回的状态码文本说明信息

POST 请求

步骤如下：

• 创建一个对象

• 设置请求参数

• 设置请求头

• 发送请求

• 监听请求成功后的状态变化可以看出，post 请求比 get 请求多出了一个设置请求头的步骤，也请大家记住，这个步骤千万不要忘记！

  let XHR = new XMLHttpRequest();   XHR.open("POST", "url");   XHR.setRequestHeader("Content-type","application/x-www-form-urlencoded");   XHR.send(data);  XHR.onreadystatechange = function () {    if (XHR.readyState == 4 && XHR.status == 200) {      console.log(XHR.responseText);       XHR = null; // 此处是为了释放对象，不写也行，js本身也会进行回收    }  }

• send()：解释一下这里 send 里为什么有个 data，这是我们通过 Ajax 发送 post 请求给服务器发送了一组 data 数据。

• setRequestHeader()：设置请求头

• readyState 值说明 ：

• 0.初始化,XHR 对象已经创建,还未执行 open

• 1.载入,已经调用 open 方法,但是还没发送请求

• 2.载入完成,请求已经发送完成

• 3.交互,可以接收到部分数据

• 4.数据全部返回

• status 值说明:

• 200：成功

• 404：没有发现文件、查询或 url

• 500：服务器内部发生错误

Ajax 中 GET 与 POST 请求的区别

• 刚刚我们已经说过，get 请求我们不用设置请求头，而 post 请求需要。

• 使用 get 请求的时候，参数在 url 中显示，而使用 post 方式则不会显示出来。

• 使用 get 请求发送的数据量小，post 请求发送的数据量大。

• get 请求能够被缓存，post 不进行缓存。get 请求能够被保存在浏览器的历史记录中（密码等私密数据采用 get 方式提交，别人查看历史记录就能直接看到这些数据，造成数据泄漏）。

• get 产生一个 TCP 数据包，post 产生两个 tcp 数据包。

• 对于 get，浏览器会把 header 跟 data 一起发出去，服务器响应 200，并返回数据。

• 对于 post，浏览器先发送 header，服务器响应 continue，浏览器再发送 data，服务器响应 200，并返回数据。

最后

都是一群为了自己未来拼命学习的人，希望未来的我们会因为当时的环境而感激在大一大二就开始耗费时光，开始奋斗的自己！

每日一问：今天你卷了没？