AJAX 发布请求 - JavaScript

在前端开发中，我们经常需要向后台服务器发送 HTTP 请求并获取响应信息。传统的方式是使用表单提交，但这种方式会导致页面刷新，用户体验不好，而且无法在后台处理完请求后，将结果即时返回到页面上。为了解决这个问题，我们可以使用 AJAX 发布请求。本文将详细介绍 AJAX 发布请求的相关知识。

AJAX 是什么？

AJAX 全称 asynchronous JavaScript and XML，中文名为“异步 JavaScript 和 XML 技术”，是一种在客户端和服务端之间实现无刷新数据交互的技术。AJAX 技术使用了 XMLHttpRequest 对象实现异步请求，可以在不刷新整个页面的情况下更新部分页面。

XMLHttpRequest 对象

XMLHttpRequest 对象用于在后台与服务器交换数据。使用 AJAX 发布请求的核心就是 XMLHttpRequest 对象。下面是一个创建 XMLHttpRequest 对象的示例：

let xhr = new XMLHttpRequest();

创建 XMLHttpRequest 对象后，可以通过其提供的方法和属性来发送 HTTP 请求和处理响应结果。

发送 HTTP 请求

发送 HTTP 请求有多种方式，常见的有以下几种：

GET 请求

GET 请求用于从服务器获取数据。下面是一个通过 AJAX 发送 GET 请求获取数据的示例：

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

上述代码中，xhr.open() 方法用于配置请求，第一个参数为请求方式，第二个参数为请求地址，第三个参数为是否异步。当 xhr.readyState 为 4，xhr.status 为 200 时，表示请求成功，可以通过 xhr.responseText 获取响应结果。

POST 请求

POST 请求用于向服务器提交数据。下面是一个通过 AJAX 发送 POST 请求提交数据的示例：

let xhr = new XMLHttpRequest();
xhr.open('POST', '/submit', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  }
}
let data = {name: '张三', age: 18};
xhr.send(JSON.stringify(data));

上述代码中，xhr.setRequestHeader() 方法用于设置请求头，第一个参数为头名称，第二个参数为头值。xhr.send() 方法用于发送请求，并将数据作为参数传递给该方法。在服务器端，可以通过获取请求体来获取提交的数据。

异步请求回调函数

在发送 AJAX 请求时，通常需要注册一个回调函数来处理响应结果。xhr.onreadystatechange 属性用于指定回调函数，该函数会在每次 xhr.readyState 改变时被调用。下面是一个注释版的示例：

let xhr = new XMLHttpRequest();
// 配置请求
xhr.open('GET', '/data', true);
// 注册回调函数
xhr.onreadystatechange = function() {
  // readyState 为 4 表示请求完成，status 为 200 表示请求成功
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText); // 获取响应结果
  }
}
// 发送请求
xhr.send();

AJAX 发布请求的优点

AJAX 发布请求相比于传统的表单提交方式，具有以下几个优点：

1. 不刷新页面：AJAX 发布请求能够无刷新地向后台服务器发送请求并获取响应结果，优化了用户体验，提高了 Web 应用的互动性。
2. 实时响应：AJAX 发布请求能够在后台处理完请求后即时返回响应结果，实现了实时响应效果。
3. 可以异步：AJAX 发布请求可以异步地向服务器发送请求，无需等待响应结果即可执行其他代码，提高了 Web 应用的并发性能。