什么是Ajax

devtools/2025/2/23 17:52:44/

什么是 AJAX？

AJAX（Asynchronous JavaScript and XML）是一种用于创建异步 Web 应用程序的技术。它允许网页在不重新加载整个页面的情况下，与服务器进行数据交换并更新部分页面内容。AJAX 的核心是通过 JavaScript 发送 HTTP 请求，并在后台与服务器通信，然后根据服务器的响应动态更新页面。

AJAX 的工作原理

创建 XMLHttpRequest 对象：通过 JavaScript 创建一个 XMLHttpRequest 对象（现代浏览器也支持 fetch API）。
发送请求：使用该对象向服务器发送请求。
接收响应：服务器处理请求并返回数据（通常是 JSON 或 XML 格式）。
更新页面：JavaScript 解析服务器返回的数据，并动态更新网页内容。

简单的 AJAX 代码示例

以下是一个使用 XMLHttpRequest 对象的简单 AJAX 示例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AJAX 示例</title>
</head>
<body><h1>AJAX 示例</h1><button id="loadData">加载数据</button><div id="content"></div><script>document.getElementById('loadData').addEventListener('click', function() {// 1. 创建 XMLHttpRequest 对象var xhr = new XMLHttpRequest();// 2. 配置请求xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);// 3. 设置回调函数，处理响应xhr.onload = function() {if (xhr.status >= 200 && xhr.status < 300) {// 请求成功，解析响应数据var data = JSON.parse(xhr.responseText);document.getElementById('content').innerHTML = `<h2>${data.title}</h2><p>${data.body}</p>`;} else {// 请求失败console.error('请求失败:', xhr.statusText);}};// 4. 发送请求xhr.send();});</script>
</body>
</html>

代码解释

创建 XMLHttpRequest 对象：var xhr = new XMLHttpRequest();
配置请求：xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1', true);
- GET：请求方法。
- 'https://jsonplaceholder.typicode.com/posts/1'：请求的 URL。
- true：表示异步请求。
设置回调函数：xhr.onload 用于处理服务器响应。
- 如果请求成功（状态码 200-299），解析响应数据并更新页面内容。
- 如果请求失败，输出错误信息。
发送请求：xhr.send();

使用 `fetch` API 的示例

现代 JavaScript 推荐使用 fetch API，它更简洁且支持 Promise：

document.getElementById('loadData').addEventListener('click', function() {fetch('https://jsonplaceholder.typicode.com/posts/1').then(response => {if (!response.ok) {throw new Error('请求失败');}return response.json();}).then(data => {document.getElementById('content').innerHTML = `<h2>${data.title}</h2><p>${data.body}</p>`;}).catch(error => {console.error('错误:', error);});
});