Ajax 请求发送步骤详解及代码示例 - JavaScript - 常规

Ajax 发送请求的步骤及代码示例

Ajax 是一种在网页中使用 JavaScript 进行异步数据交互的技术。它允许我们在不刷新页面的情况下与服务器进行通信，从而实现动态内容加载、数据更新等功能。

以下是使用 Ajax 发送请求的步骤：

创建 XMLHttpRequest 对象
```
let xhr = new XMLHttpRequest();
```
设置请求方式和请求地址
```
xhr.open('GET', 'http://example.com/api');
```
- open() 方法接受两个参数：
  - 第一个参数是请求方式，例如 GET、POST、PUT、DELETE 等。
  - 第二个参数是请求地址。
设置请求头（可选）
```
xhr.setRequestHeader('Content-Type', 'application/json');
```
- setRequestHeader() 方法用于设置请求头，它接受两个参数：
  - 第一个参数是请求头名称。
  - 第二个参数是请求头值。
发送请求
```
xhr.send();
```
- send() 方法用于发送请求。如果请求方式是 GET，则不需要传递参数。如果请求方式是 POST，则可以传递一个字符串或 FormData 对象作为参数。
监听请求状态变化事件
```
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
}
```
- onreadystatechange 属性用于监听请求状态变化事件。
- readyState 属性表示请求的状态，取值范围为 0 到 4，分别代表：
  - 0: 未初始化
  - 1: 已打开
  - 2: 已发送
  - 3: 正在接收
  - 4: 已完成
- status 属性表示 HTTP 状态码，200 表示请求成功。
- responseText 属性包含服务器返回的响应数据。

完整代码：

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

注意：

上述代码仅为示例，实际应用中需要根据具体需求进行调整。
为了安全起见，建议使用 HTTPS 协议进行 Ajax 请求。
为了提高效率，建议使用异步的方式进行 Ajax 请求。
可以使用 fetch() API 或 jQuery 的 $.ajax() 方法来简化 Ajax 请求的代码。