AJAX准备状态的不同阶段和过程是什么

AJAX 是一种用于向服务器发送异步请求和接收响应的技术。在 AJAX 请求过程中，状态的变化是非常重要的，根据状态的不同阶段，我们可以进行一些相应的处理。下面是 AJAX 准备状态的不同阶段和过程：

1. 创建 XMLHttpRequest 对象

在使用 AJAX 发送请求之前，需要先创建 XMLHttpRequest 对象。XMLHttpRequest 对象提供了向服务器发送请求和接收响应的方法和属性。

var xhr = new XMLHttpRequest();

2. 设置请求参数

在创建 XMLHttpRequest 对象之后，需要设置请求参数，包括请求的 URL、请求方式、是否异步等等。

xhr.open('GET', 'example.com/api/data', true);

3. 发送请求

在设置好请求参数之后，需要通过 send() 方法发送请求。

xhr.send();

4. 监听状态变化

在发送请求后，可以通过监听 XMLHttpRequest 对象的状态变化来判断请求的状态，可以使用 onreadystatechange 属性或者 addEventListener() 方法进行监听。

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText); // 在此处处理响应
  }
};

请求的状态有以下几种：

• 0（未初始化）：XMLHttpRequest 对象已经创建，但是尚未调用 open() 方法。
• 1（载入中）：XMLHttpRequest 对象已经调用了 open() 方法，但是尚未调用 send() 方法。
• 2（载入完成）：XMLHttpRequest 对象已经调用了 send() 方法，但是尚未接收到响应。
• 3（交互中）：XMLHttpRequest 对象已经接收到部分响应数据。
• 4（完成）：XMLHttpRequest 对象已经接收到全部响应数据，可以在此处处理响应。

示例 1

以下是一个使用 AJAX 向服务器发送请求并接收响应的示例：

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

以上代码向 example.com/api/data 发送了一个 GET 请求，并且接收到了服务器返回的数据，可以在控制台中查看响应的内容。

示例 2

以下是一个使用 AJAX 向服务器发送 POST 请求并接收响应的示例：

var xhr = new XMLHttpRequest();
xhr.open('POST', 'example.com/api/data', true);
xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
var data = {name: 'example', value: 'foobar'};
xhr.send(JSON.stringify(data));

以上代码向 example.com/api/data 发送了一个 POST 请求，发送的数据为 JSON 格式的 {name: 'example', value: 'foobar'}，并且接收到了服务器返回的数据，可以在控制台中查看响应的内容。注意需要在调用 send() 方法前设置请求的 Content-Type 为 application/json。