【Ajax】 Ajax xhr 详解

@[Ajax](【Ajax】 Ajax xhr 详解)

【Ajax】 Ajax xhr 详解

（Asynchronous Javascript and XML）是一种使用JavaScript和XML技术的Web开发技术，能够实现异步请求数据，而不需要刷新整个页面。XHR（XmlHttpRequest）是Ajax中负责处理异步请求的核心对象。

XHR对象可以发送异步请求并接收服务器响应。它具有以下常用属性和方法：

属性：

我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：

1. onreadystatechange：当 readyState 属性改变时触发。
2. readyState：存有XMLHttpRequest的状态信息。从0到4发生变化。
3. responseText：获取字符串形式的响应数据。
4. responseType：设置响应返回的数据类型。
5. status：http状态码，如200表示成功，404表示未找到页面等。
6. statusText：http状态消息，如OK表示成功。

方法：

1. abort()：取消当前异步请求。
2. getAllResponseHeaders()：以字符串形式返回所有的响应头信息。
3. getResponseHeader()：返回指定响应头的值。
4. open(method,url,async)：创建一个新的 HTTP 请求，并规定该请求的方法、URL 以及是否异步处理请求。
5. send()：将请求发送到服务器。
6. setRequestHeader()：向请求添加 HTTP 头。

Ajax请求过程：

创建XHR对象：使用XMLHttpRequest()构造函数来创建一个新的XMLHttpRequest对象；

注册回调函数：注册onreadystatechange事件，该事件在XHR对象的readyState属性发生改变时被触发；

打开连接：通过XHR对象open()方法指定访问的服务端的地址、请求方式等；

发送请求：使用XHR对象的send()方法将请求发送到服务端；

服务端响应：服务端接收到请求后，根据请求参数等返回需要的数据；

解析响应：在onreadystatechange回调函数中，获取XHR对象的responseText属性，然后使用该属性获得服务器响应的数据。

示例代码：

var xhr = new XMLHttpRequest(); // 创建XHR对象
xhr.onreadystatechange = function() { // 注册回调函数
    if (xhr.readyState == 4 && xhr.status == 200) { // XHR成功接收响应
        console.log(xhr.responseText); // 打印响应数据
    }
};
xhr.open('GET', 'example.php', true); // 打开连接
xhr.send(null); // 发送请求

ajax xhr readyState 详解

HttpRequest (XHR) 对象是 AJAX 中用于与服务器通信的核心对象。当我们使用 XHR 对象发送请求时，它会经过一系列状态的变化，这些状态由 readyState 属性表示。

readyState 的取值如下：

0：未初始化。对象已创建，但未调用 open() 方法。

1：打开。已调用 open() 方法，但尚未调用 send() 方法。

2：发送。已调用 send() 方法，但尚未收到响应。

3：接收。已接收部分响应数据。

4：完成。已接收全部响应数据，且可以开始处理。

在发送请求期间，readyState 会从 1 开始逐渐增加，直到请求完成后变为 4。此外，我们还可以使用 onreadystatechange 事件监听 readyState 变化，并在变化时执行特定的操作。例如：

let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.open('GET', 'http://example.com');
xhr.send();

上述代码中，当 XHR 对象的 readyState 变为 4 时，if 条件判断执行，如果响应的状态码为 200，则输出响应内容。