AJAX 发布请求 JavaScript

什么是 AJAX？

AJAX 英文全称是 Asynchronous JavaScript and XML，即异步 JavaScript 和 XML。其核心是通过浏览器的 XMLHttpRequest 对象来向服务器发送异步请求，从而实现无需刷新页面即可更新数据的效果。

为什么要使用 AJAX？

使用 AJAX 可以带来以下好处：

• 提升用户体验，无需刷新页面即可更新数据
• 减少服务器的请求次数，提高了页面的性能
• 可以实现动态加载数据，减少了页面的加载时间

AJAX 的基本使用方法

创建 XMLHttpRequest 对象

var xhr = new XMLHttpRequest();

发送异步请求

xhr.open('GET', '/data', true);  // true 表示开启异步请求
xhr.send();

监听请求状态

xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
    }
}

以上代码块中，readyState 表示当前请求状态，通常会有以下 5 种取值：

• 0: 请求未初始化
• 1: 服务器链接已建立
• 2: 请求已接受
• 3: 请求处理中
• 4: 请求已完成，且响应已就绪

status 表示服务器响应的状态码，通常会有以下几种：

• 2xx: 成功处理请求
• 3xx: 重定向
• 4xx: 客户端错误
• 5xx: 服务器错误

发送 POST 请求

xhr.open('POST', '/data', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send('name=value');

setRequestHeader 方法可以设置请求头，一般用于 POST 请求时设置请求参数的格式，如 Content-type: application/x-www-form-urlencoded 表示参数的格式为"键值对"。

send 方法中的参数表示请求主体，用于传递参数。

发送 JSON 数据

xhr.open('POST', '/data', true);
xhr.setRequestHeader('Content-type', 'application/json');
xhr.send(JSON.stringify({name: 'value'}));

当需要发送 JSON 数据时，需要将请求头设置为 Content-type: application/json，并将数据通过 JSON.stringify 方法将其转换为 JSON 格式的字符串。

总结

通过 AJAX 发布请求，我们可以实现异步请求，提高用户体验和页面性能。发送异步请求主要是通过 XMLHttpRequest 对象，发送 POST 请求时需要设置请求头，发送 JSON 数据时需要通过 JSON.stringify 方法进行转换。