使用原生js实现Ajax

以下是使用原生 JavaScript 实现 AJAX 的基本步骤：

 

1. 创建 XMLHttpRequest 对象

 

XMLHttpRequest 对象可通过 JavaScript 中的 new 关键字创建。例如：

 

```

var xhr = new XMLHttpRequest();

```

 

2. 定义请求的方法、路径和异步标志

 

通过调用 XMLHttpRequest 对象的 open() 方法，设置 HTTP 请求的方法、路径和异步标志。例如：

 

```

xhr.open('GET', 'http://example.com/data.json', true);

```

 

第一个参数是请求方法，这里是 GET 方法；第二个参数是请求路径或 URL，这里是 http://example.com/data.json；第三个参数是异步标志，这里是 true，表示使用异步方式发送请求。

 

3. 设置请求头

 

如果需要设置请求头，可以调用 setRequestHeader() 方法。例如：

 

```

xhr.setRequestHeader('Content-Type', 'application/json');

```

 

这里设置了 Content-Type 请求头，表示发送的请求数据是 JSON 格式的。

 

4. 发送请求

 

调用 send() 方法发送请求。例如：

 

```

xhr.send();

```

 

如果需要发送请求数据，可以在 send() 方法中传入数据。例如：

 

```

xhr.send(JSON.stringify(data));

```

 

这里通过 JSON.stringify() 方法将数据转换成 JSON 格式，然后发送到服务器。

 

5. 监听状态变化

 

通过监听 XMLHttpRequest 对象的 readyState 属性和 status 属性的变化，可以得到请求的状态和响应结果。例如：

 

```

xhr.onreadystatechange = function() {

  if (xhr.readyState === 4 && xhr.status === 200) {

    console.log(xhr.responseText);

  }

};

```

 

readyState 属性表示请求的状态，详见下表：

 

| 值 | 状态描述 |

| --- | --- |

| 0 | 请求未初始化 |

| 1 | 服务器连接已建立 |

| 2 | 请求已接收 |

| 3 | 请求处理中 |

| 4 | 请求已完成且响应已就绪 |

 

status 属性表示响应的状态码，详见 HTTP 状态码。

 

当 readyState 和 status 值都符合预期时，即可读取响应的数据。在本例中，如果 readyState 的值是 4，状态码是 200（表示请求成功），则将响应的数据打印到控制台中。

 

完整的代码示例如下：

 

```

var xhr = new XMLHttpRequest();

 

xhr.open('GET', 'http://example.com/data.json', true);

xhr.setRequestHeader('Content-Type', 'application/json');

xhr.send();

 

xhr.onreadystatechange = function() {

  if (xhr.readyState === 4 && xhr.status === 200) {

    console.log(xhr.responseText);

  }

};

```