原生JavaScript AJAX详解：从入门到进阶168

在现代Web开发中，异步数据交互至关重要，而AJAX (Asynchronous JavaScript and XML) 技术正是实现这一目标的关键。虽然现在有了更高级的库如Fetch API和Axios，但理解原生JavaScript AJAX仍然具有重要的学习意义，它能帮助我们更深入地理解底层原理，并更好地掌握前端数据交互的机制。本文将带你全面了解原生JavaScript AJAX，从基本概念到高级应用，逐步深入。

一、AJAX 的核心概念

AJAX 并非一门新的编程语言，而是一种使用现有技术组合实现异步数据交互的技术。它主要依靠以下几个关键组件：
XMLHttpRequest 对象：这是AJAX的核心，它是一个内置的JavaScript对象，用于创建和发送HTTP请求。
HTTP 请求：AJAX 使用HTTP协议与服务器进行通信，常用的方法包括GET和POST。
异步通信：AJAX 的最大特点在于异步性，它可以在不刷新整个页面的情况下与服务器交换数据，从而提供更流畅的用户体验。
JavaScript 解析与更新：服务器返回的数据通常为JSON或XML格式，JavaScript负责解析这些数据并动态更新页面内容。

二、XMLHttpRequest 对象详解

XMLHttpRequest 对象是实现AJAX的关键。其主要方法和属性如下：
open(method, url, async): 打开一个与服务器的连接。method 指定 HTTP 方法 (GET 或 POST)，url 指定服务器 URL，async 指定是否异步 (通常设为 true)。
send(data): 发送请求。对于 GET 请求，data 通常为空；对于 POST 请求，data 则包含要发送的数据。
onreadystatechange: 事件处理程序，当请求状态发生改变时触发。通过监听这个事件，我们可以获取服务器的响应。
readyState: 请求的状态，取值从 0 到 4，分别表示：0 (未初始化)，1 (已打开)，2 (已发送)，3 (正在接收)，4 (已完成)。
status: HTTP 状态码，例如 200 (成功)，404 (未找到)，500 (服务器错误)。
responseText: 服务器返回的文本数据。
responseXML: 服务器返回的XML数据。

三、一个简单的AJAX例子 (GET请求)
function getJSON(url, callback) {
const xhr = new XMLHttpRequest();
('GET', url, true);
= function() {
if ( === 200) {
callback(());
} else {
('Request failed. Returned status of ' + );
}
};
= function() {
('Request failed.');
};
();
}
getJSON('', function(data) {
(data);
// 使用接收到的数据更新页面
});

这段代码定义了一个名为 getJSON 的函数，用于发送 GET 请求并解析 JSON 数据。它使用了 onload 事件处理程序处理成功的请求，以及 onerror 处理失败的请求。需要替换成你的实际数据源URL。

四、处理POST请求

POST 请求用于向服务器发送数据，例如提交表单。需要设置请求头 `Content-Type` 为 `application/x-www-form-urlencoded` 或 `application/json`。
function postJSON(url, data, callback) {
const xhr = new XMLHttpRequest();
('POST', url, true);
('Content-Type', 'application/json');
= function() {
if ( === 200) {
callback(());
} else {
('Request failed. Returned status of ' + );
}
};
= function() {
('Request failed.');
};
((data));
}
const dataToPost = { name: 'John Doe', email: '@' };
postJSON('', dataToPost, function(response) {
(response);
});