目录
一、AJAX 是什么？
二、为什么要学习 AJAX？
（一）提升用户体验
（二）减轻服务器压力
（三）实现复杂交互功能
三、AJAX 的工作原理
（一）核心对象：XMLHttpRequest
（二）工作流程详解
四、AJAX 实战演练
（一）准备工作
（二）创建简单的 AJAX 请求
（三）发送 POST 请求
（四）处理服务器响应
五、常见问题与解决方案
（一）跨域问题
（二）错误处理
六、总结与展望
一、AJAX 是什么？
在当今快速发展的互联网时代，网页早已不再是简单的静态页面展示，用户对于网页交互性和响应速度的要求越来越高。AJAX，作为现代网页开发中至关重要的一项技术，正悄然改变着我们与网页的交互方式。
AJAX，全称为 Asynchronous JavaScript and XML，即异步 JavaScript 和 XML 。从名字上看，它主要涉及到 JavaScript 和 XML 技术，但实际上，如今的 AJAX 技术在数据传输格式上，JSON（JavaScript Object Notation）已经逐渐取代了 XML，因其更简洁、轻量，解析速度更快。简单来说，AJAX 是一种创建交互式网页应用的网页开发技术，它允许网页在不重新加载整个页面的情况下，与服务器进行数据交换，从而实现页面局部内容的更新 。
在传统的网页交互模式中，当用户与页面进行交互，比如点击一个链接或提交一个表单时，浏览器会向服务器发送请求，服务器处理请求后返回一个全新的 HTML 页面，浏览器再将这个新页面加载并展示给用户。这个过程中，整个页面都会刷新，用户不仅需要等待页面重新加载的时间，而且页面闪烁的体验也非常不好。假设你在一个电商网站上浏览商品，当你点击 “查看更多商品” 按钮时，整个页面都刷新了，之前浏览的位置、筛选条件等都可能需要重新操作，这无疑会让你感到烦躁。
而 AJAX 打破了这种传统模式。它通过在后台与服务器进行少量数据交换，实现了网页的异步更新。当用户触发某个操作时，JavaScript 代码会创建一个 XMLHttpRequest 对象（这是 AJAX 的核心对象，用于与服务器进行通信），通过这个对象向服务器发送请求。服务器接收到请求后进行处理，并返回数据，通常是 JSON 格式的数据。JavaScript 代码再接收这些数据，并根据数据来更新网页的特定部分，而不需要刷新整个页面 。还是以上述电商网站为例，使用 AJAX 技术后，当你点击 “查看更多商品” 按钮时，页面不会整体刷新，只是商品列表部分会动态更新，展示出更多商品，整个过程流畅自然，大大提升了用户体验。
二、为什么要学习 AJAX？
（一）提升用户体验
在日常上网过程中，你肯定遇到过这样的情况：在一个传统网页上填写表单，点击提交按钮后，整个页面白屏，等待数秒后才重新加载显示结果，原本填写的内容也可能因为页面刷新而丢失；又或者在加载一个包含大量图片或数据的页面时，每次切换页面或加载新内容都要忍受漫长的等待，整个页面闪烁跳动。这些糟糕的体验，都是传统网页交互模式的弊端。
而 AJAX 的出现，彻底改变了这一现状。以表单提交为例，使用 AJAX 技术，当用户点击提交按钮时，页面不会立即刷新，而是在后台悄悄将表单数据发送给服务器 。服务器处理完数据后，再将结果返回给页面，通过 JavaScript 代码，仅更新页面中需要展示结果的部分，整个过程流畅自然，用户几乎感觉不到页面有任何刷新动作 。再比如数据加载，像社交媒体平台的动态加载，当你不断向下滚动页面查看更多动态时，AJAX 会在后台逐渐加载新的动态数据，并将其添加到页面底部，无需刷新整个页面，让你能够无缝浏览内容，大大提升了交互的流畅性和连贯性。 这种无刷新的交互方式，极大地减少了用户等待时间，让用户能够更专注于内容和操作，从而显著提升了用户体验。
（二）减轻服务器压力
服务器就像是一个繁忙的工厂，每天要处理大量来自用户的请求。在传统的网页交互模式下，每次用户请求都会导致整个页面数据的传输和处理。假设一个电商网站的商品详情页，包含商品图片、描述、用户评价等大量信息。当用户仅仅想要查看下一条商品评价时，传统方式会将整个商品详情页的数据重新传输给服务器，服务器再重新处理并返回整个页面，这其中包含了许多用户已经看过、无需再次传输的数据，这无疑增加了服务器的负载，就像工厂不断重复生产一些已经生产过的产品一样浪费资源。
而 AJAX 通过仅传输必要数据，巧妙地解决了这个问题。还是以上述电商网站为例，当用户点击查看下一条商品评价时，AJAX 请求只会将获取下一条评价所需的关键信息（如评价 ID、商品 ID 等）发送给服务器 。服务器根据这些信息，只返回对应的评价内容，而不是整个商品详情页数据。这样一来，服务器处理的数据量大幅减少，负载也随之降低，能够更高效地处理其他用户的请求，就像工厂能够更合理地分配资源，专注生产真正需要的产品，从而提高了整体性能。
（三）实现复杂交互功能
如今，我们在网页上随处可见各种高级交互功能，如搜索引擎的自动完成搜索框，当你输入关键词时，搜索框会实时弹出相关的搜索建议；还有在线聊天系统，消息能够实时更新，无需手动刷新页面；以及一些实时数据监控页面，数据会不断动态变化，展示最新的信息。这些看似神奇的功能，背后都离不开 AJAX 技术的支持。
以自动完成搜索框为例，当你在搜索框中输入内容时，AJAX 会立即捕捉到输入事件，并将输入的关键词发送到服务器 。服务器根据关键词在数据库中进行快速检索，然后将相关的搜索建议以 JSON 数据格式返回给页面 。页面接收到数据后，通过 JavaScript 代码将这些建议实时显示在搜索框下方，让你能够快速选择想要的搜索内容，大大提高了搜索效率。在这个过程中，AJAX 实现了页面与服务器的实时交互，无需刷新页面就能动态更新搜索建议。再看实时数据更新，如股票交易网站，股票价格会实时波动。AJAX 通过定时向服务器发送请求，获取最新的股票价格数据，并将这些数据实时更新到页面上，让投资者能够第一时间了解股票的最新行情，这种实时交互功能为用户提供了更加便捷和高效的服务，也使得网页应用的功能更加丰富和强大。
三、AJAX 的工作原理
（一）核心对象：XMLHttpRequest
在 AJAX 技术体系中，XMLHttpRequest 对象扮演着至关重要的角色，它就像是浏览器与服务器之间通信的信使 。通过这个对象，我们可以在网页后台向服务器发送请求，并接收服务器返回的数据，而无需刷新整个页面 。
在 JavaScript 中创建 XMLHttpRequest 对象，需要考虑浏览器兼容性问题 。在现代浏览器（如 Chrome、Firefox、Safari、Edge 等）中，可以直接使用以下方式创建：
let xhr = new XMLHttpRequest();
然而，对于一些老版本的 IE 浏览器（如 IE5、IE6），则需要使用 ActiveXObject 来创建，代码如下：
let xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
这样通过条件判断，我们的代码就能够在不同类型的浏览器中正确创建 XMLHttpRequest 对象，确保 AJAX 功能的正常运行 。
创建好 XMLHttpRequest 对象后，接下来就要用到它的一些关键方法来实现与服务器的通信 。其中，open 方法用于初始化一个请求 。它接收三个主要参数：
method：指定 HTTP 请求的方法，常见的有 GET、POST、PUT、DELETE 等 。GET 方法通常用于从服务器获取数据，数据会附加在 URL 的查询字符串中，例如：https://example.com/api/data?param1=value1¶m2=value2；POST 方法则常用于向服务器提交数据，数据会放在请求体中，相对 GET 方法更适合传输大量数据或敏感信息 。
url：请求的目标 URL，即服务器上处理该请求的资源地址 。
async：一个布尔值，表示请求是否异步执行，默认值为 true 。异步请求意味着在发送请求后，浏览器不会等待服务器响应，而是继续执行后续的 JavaScript 代码，这使得用户可以在请求过程中继续操作页面，大大提升了用户体验 。如果设置为 false，则为同步请求，在这种情况下，浏览器会等待服务器响应完成后才继续执行后续代码，这可能会导致页面卡顿，一般不建议在实际应用中使用同步请求 。
例如，我们要使用 GET 方法向https://api.example.com/user这个 URL 发送一个异步请求，可以这样写：
xhr.open("GET", "https://api.example.com/user", true);
send 方法则是真正将请求发送到服务器的关键方法 。对于 GET 请求，如果没有请求体数据需要发送，可以直接调用xhr.send(); 。而对于 POST 请求，通常需要在 send 方法中传递请求体数据 。例如，我们要向服务器提交一个包含用户名和密码的表单数据，数据格式为 JSON，代码如下：
let data = {
username: "user123",
password: "password123"
};
xhr.setRequestHeader("Content-Type", "application/json"); // 设置请求头，告诉服务器发送的数据是JSON格式
xhr.send(JSON.stringify(data)); // 将数据转换为JSON字符串后发送
在这个例子中，首先通过setRequestHeader方法设置了请求头，指定发送的数据类型为application/json，然后使用JSON.stringify方法将 JavaScript 对象转换为 JSON 字符串，作为 send 方法的参数发送给服务器 。
（二）工作流程详解
为了更清晰地理解 AJAX 的工作过程，我们通过以下步骤来详细展示其工作流程：
创建请求：在网页的 JavaScript 代码中，通过上述方式创建 XMLHttpRequest 对象 。这一步就像是准备好一个信封，为后续发送信息做准备 。
初始化请求：使用 open 方法设置请求的方法（如 GET 或 POST）、目标 URL 以及是否异步等参数 。这相当于在信封上写好收件人地址（URL）、选择邮寄方式（请求方法）以及是否加急（异步标志） 。
发送请求：调用 send 方法将请求发送到服务器 。此时，这个 “信封” 就被投递出去，开始在网络中传输 。
服务器处理：服务器接收到请求后，根据请求的 URL 和方法，找到对应的处理程序来处理请求 。例如，如果是一个获取用户信息的 GET 请求，服务器会从数据库中查询相应的用户数据 。这就好比收件人收到信封后，根据信封上的内容进行相应的处理 。
服务器响应：服务器处理完请求后，将结果返回给浏览器 。返回的数据可以是各种格式，如 JSON、XML、HTML 片段或纯文本等 。这就像是收件人写好回信后，再把信封寄回给发件人 。
接收响应：浏览器中的 XMLHttpRequest 对象接收到服务器的响应 。通过监听onreadystatechange事件，我们可以捕捉到响应状态的变化 。当readyState属性的值变为 4，表示请求已完成，并且可以通过status属性来判断请求是否成功 。如果status的值为 200，则表示请求成功，此时可以通过responseText（如果返回的是文本数据）或responseXML（如果返回的是 XML 数据）等属性来获取服务器返回的数据 。
更新页面：获取到服务器返回的数据后，我们使用 JavaScript 操作 DOM（文档对象模型），将数据更新到网页的指定位置，实现页面局部内容的更新 。比如，将获取到的用户信息显示在网页的用户资料区域 。这一步就像是我们打开回信，把里面的重要信息展示在合适的地方 。
下面以一个简单的流程图来更直观地展示 AJAX 的工作流程：
+-----------------+
| 浏览器 |
+-----------------+
|
| 创建XMLHttpRequest对象
v
+-----------------+
| 初始化请求 |
| (open方法) |
+-----------------+
|
| 设置请求头 (可选)
| 定义回调函数 (onreadystatechange)
| 发送请求 (send方法)
v
+-----------------+
| 服务器 |
+-----------------+
|
| 处理请求
v
+-----------------+
| 返回响应 |
+-----------------+
|
| 接收响应
| (onreadystatechange事件触发)
v
+-----------------+
| 判断请求状态 |
| (readyState和status) |
+-----------------+
|
| 请求成功?
| (readyState === 4 && status === 200)
v
+-----------------+
| 获取响应数据 |
| (responseText等) |
+-----------------+
|
| 更新页面 (操作DOM)
v
+-----------------+
| 完成 |
+-----------------+
四、AJAX 实战演练
（一）准备工作
在开始 AJAX 实战之前，我们需要搭建好开发环境 。首先，确保你已经安装了 Node.js 。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时，它允许我们在服务器端运行 JavaScript 代码，为我们提供了一个方便的开发环境 。你可以从 Node.js 官方网站（https://nodejs.org/en/ ）下载并安装最新的稳定版本 。安装完成后，打开命令行工具，输入node -v，如果能正确输出版本号，说明安装成功 。
接下来，我们选择 Express 框架来搭建服务器 。Express 是一个简洁而灵活的 Node.js Web 应用框架，提供了一系列强大的功能，帮助我们快速构建服务器 。在你的项目目录下，打开命令行工具，执行以下命令初始化项目：
npm init --yes
这会在项目目录下生成一个package.json文件，用于管理项目的依赖和配置信息 。然后，安装 Express 框架：
npm install express
安装完成后，在项目目录下创建一个server.js文件，编写以下代码来创建一个简单的 Express 服务器：
const express = require('express');
const app = express();
const port = 3000;
// 处理GET请求，返回一段简单的文本
app.get('/data', (req, res) => {
res.send('这是从服务器返回的数据');
});
// 启动服务器
app.listen(port, () => {
console.log(`服务器正在运行，端口号：${port}`);
});
保存文件后，在命令行中执行node server.js，启动服务器 。此时，服务器已经在http://localhost:3000上运行，并且可以处理/data路径的 GET 请求 。
为了测试 AJAX 请求，我们还需要创建一个 HTML 页面 。在项目目录下创建一个index.html文件，编写以下代码：
<!DOCTYPE html>
<html lang="zh-CN">
<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>点击获取数据</button>
<div></div>
<script>
// 这里将编写AJAX相关的JavaScript代码
</script>
</body>
</html>
在这个 HTML 页面中，我们创建了一个按钮和一个div元素 。按钮用于触发 AJAX 请求，div元素用于显示从服务器返回的数据 。接下来，我们将在<script>标签中编写 AJAX 代码 。
（二）创建简单的 AJAX 请求
在index.html的<script>标签中，编写以下代码来创建一个简单的 AJAX 请求：
document.getElementById('btn').addEventListener('click', function () {
// 创建XMLHttpRequest对象
let xhr = new XMLHttpRequest();
// 初始化请求，设置请求方法为GET，请求URL为服务器上的/data路径
xhr.open('GET', 'http://localhost:3000/data', true);
// 定义回调函数，当请求状态发生变化时会调用这个函数
xhr.onreadystatechange = function () {
// readyState为4表示请求已完成
if (xhr.readyState === 4) {
// status为200表示请求成功
if (xhr.status === 200) {
// 将服务器返回的数据显示在id为result的div中
document.getElementById('result').innerHTML = xhr.responseText;
} else {
document.getElementById('result').innerHTML = '请求失败，状态码：' + xhr.status;
}
}
};
// 发送请求
xhr.send();
});
在这段代码中，我们首先获取了页面上的按钮元素，并为其添加了点击事件监听器 。当按钮被点击时，会执行以下操作：
创建一个XMLHttpRequest对象 。
使用open方法初始化请求，设置请求方法为GET，请求的 URL 为http://localhost:3000/data，并将异步标志设置为true，表示这是一个异步请求 。
定义onreadystatechange回调函数 。在这个函数中，我们通过检查readyState和status属性来判断请求的状态 。当readyState为 4 且status为 200 时，表示请求成功，我们将服务器返回的数据（通过responseText属性获取）显示在页面的result div 中；否则，显示请求失败的信息 。
最后，使用send方法发送请求 。
保存index.html文件，在浏览器中打开该文件，点击 “点击获取数据” 按钮，你应该能看到从服务器返回的数据显示在下方的div中 。如果请求失败，也会显示相应的错误信息 。
（三）发送 POST 请求
发送 POST 请求与 GET 请求有一些不同之处 。首先，我们需要设置请求头，告诉服务器发送的数据类型 。其次，数据通常放在请求体中发送 。下面是一个发送 POST 请求的示例代码，我们在index.html的<script>标签中添加以下代码：
document.getElementById('btnPost').addEventListener('click', function () {
let xhr = new XMLHttpRequest();
xhr.open('POST', 'http://localhost:3000/data', true);
// 设置请求头，告诉服务器发送的数据是JSON格式
xhr.setRequestHeader('Content-Type', 'application/json');
// 要发送的数据，这里是一个简单的JavaScript对象
let data = {
name: '张三',
age: 25
};
// 定义回调函数
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
document.getElementById('result').innerHTML = xhr.responseText;
} else {
document.getElementById('result').innerHTML = '请求失败，状态码：' + xhr.status;
}
}
};
// 将数据转换为JSON字符串后发送
xhr.send(JSON.stringify(data));
});
在这段代码中，我们创建了一个新的按钮点击事件监听器 。当点击这个按钮时：
创建XMLHttpRequest对象并使用open方法初始化请求，这次请求方法为POST 。
使用setRequestHeader方法设置请求头，将Content-Type设置为application/json，表示发送的数据是 JSON 格式 。
定义要发送的数据，这里是一个包含name和age属性的 JavaScript 对象 。
同样定义onreadystatechange回调函数来处理响应 。
最后，使用JSON.stringify方法将数据转换为 JSON 字符串，并通过send方法发送到服务器 。
为了测试这个 POST 请求，我们还需要在server.js中添加对 POST 请求的处理 。修改server.js代码如下：
const express = require('express');
const app = express();
const port = 3000;
// 用于解析JSON格式的请求体数据
app.use(express.json());
// 处理GET请求，返回一段简单的文本
app.get('/data', (req, res) => {
res.send('这是从服务器返回的数据');
});
// 处理POST请求
app.post('/data', (req, res) => {
console.log('接收到POST请求的数据：', req.body);
res.send('POST请求接收成功，数据已处理');
});
// 启动服务器
app.listen(port, () => {
console.log(`服务器正在运行，端口号：${port}`);
});
在上述server.js代码中，我们使用express.json()中间件来解析 JSON 格式的请求体数据 。当接收到 POST 请求时，服务器会将请求体中的数据打印到控制台，并返回一个成功响应 。
对比 GET 和 POST 请求，主要有以下差异：
数据位置：GET 请求的数据附加在 URL 的查询字符串中，例如http://example.com/api?name=张三&age=25，数据暴露在 URL 中，不太适合传输敏感信息；而 POST 请求的数据放在请求体中，相对更安全 。
数据长度：GET 请求受 URL 长度限制，能传输的数据量较小；POST 请求理论上对数据长度没有限制，适合传输大量数据 。
缓存：GET 请求的结果可能会被浏览器缓存，因为 URL 是固定的；POST 请求一般不会被缓存，每次请求都是全新的 。
（四）处理服务器响应
当服务器返回响应后，我们需要根据不同的 HTTP 状态码和响应数据来对页面进行相应的更新 。在前面的示例中，我们已经简单展示了如何根据状态码判断请求是否成功，并显示响应数据 。下面我们进一步深入讲解 。
解析 JSON 数据：当服务器返回的是 JSON 格式的数据时，我们需要将其解析为 JavaScript 对象，以便在页面中方便地使用 。假设服务器返回的数据如下：
{
"name": "李四",
"age": 30,
"message": "这是一条重要消息"
}
在客户端的 JavaScript 代码中，我们可以这样解析：
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
try {
let data = JSON.parse(xhr.responseText);
document.getElementById('result').innerHTML = `
<p>姓名：${data.name}</p>
<p>年龄：${data.age}</p>
<p>消息：${data.message}</p>
`;
} catch (error) {
document.getElementById('result').innerHTML = '解析JSON数据失败：' + error.message;
}
} else {
document.getElementById('result').innerHTML = '请求失败，状态码：' + xhr.status;
}
}
};
在这段代码中，我们使用JSON.parse方法将responseText解析为 JavaScript 对象 。如果解析成功，就可以根据对象的属性来更新页面内容；如果解析失败，会捕获异常并显示错误信息 。
更新 HTML 元素：除了直接更新innerHTML属性外，我们还可以使用更细粒度的 DOM 操作方法来更新页面元素 。例如，假设服务器返回一个包含用户列表的 JSON 数据：
[
{ "id": 1, "name": "王五", "email": "wangwu@example.com" },
{ "id": 2, "name": "赵六", "email": "zhaoliu@example.com" }
]
我们可以这样更新页面：
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
try {
let users = JSON.parse(xhr.responseText);
let userList = document.getElementById('userList');
userList.innerHTML = ''; // 清空原有内容
users.forEach(user => {
let li = document.createElement('li');
li.innerHTML = `ID: ${user.id}, 姓名: ${user.name}, 邮箱: ${user.email}`;
userList.appendChild(li);
});
} catch (error) {
document.getElementById('result').innerHTML = '解析JSON数据失败：' + error.message;
}
} else {
document.getElementById('result').innerHTML = '请求失败，状态码：' + xhr.status;
}
}
};
在这个示例中，我们首先获取页面上的userList元素（假设是一个<ul>标签），然后清空其原有内容 。接着，遍历解析后的用户列表数据，为每个用户创建一个<li>元素，并将用户信息添加到<li>中，最后将<li>添加到userList中 。通过这种方式，我们可以更灵活地控制页面的更新，而不仅仅是简单地替换整个innerHTML 。
根据不同状态码处理：除了 200 表示请求成功外，还有许多其他常见的状态码，我们可以根据不同的状态码进行相应的处理 。例如：
404 状态码：表示请求的资源不存在 。我们可以在页面上显示 “您请求的内容不存在” 这样的提示信息 。
500 状态码：表示服务器内部错误 。可以显示 “服务器出现错误，请稍后再试” 。
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
switch (xhr.status) {
case 200:
// 处理成功响应
break;
case 404:
document.getElementById('result').innerHTML = '您请求的内容不存在';
break;
case 500:
document.getElementById('result').innerHTML = '服务器出现错误，请稍后再试';
break;
default:
document.getElementById('result').innerHTML = '请求失败，状态码：' + xhr.status;
}
}
};
通过以上方式，我们能够更全面、灵活地处理服务器响应，根据不同的情况为用户提供更友好的交互体验 。
五、常见问题与解决方案
（一）跨域问题
在进行 AJAX 请求时，跨域问题是经常会遇到的一个挑战 。简单来说，跨域是指浏览器限制了从一个源（协议 + 域名 + 端口）加载的页面或脚本与来自另一个源的资源进行交互 。例如，你的网页运行在http://localhost:8080上，而你尝试通过 AJAX 请求http://api.example.com上的数据，这就会触发跨域问题 。
跨域问题产生的根本原因是浏览器的同源策略 。同源策略是浏览器的一项重要安全机制，它限制了不同源之间的资源访问，以防止恶意网站窃取用户数据或执行恶意脚本 。比如，假设没有同源策略，一个恶意网站可以轻易获取你的网上银行页面的 DOM 元素，从而窃取你的账号密码等敏感信息 。
为了解决跨域问题，常见的解决方案有以下两种：
JSONP（JSON with Padding）：JSONP 是一种利用<script>标签的 src 属性不受同源策略限制的特性来实现跨域数据获取的方法 。其原理是通过动态创建<script>标签，将请求的 URL 作为 src 属性的值，服务器返回的数据会以 JavaScript 函数调用的形式包裹起来，例如callback({data: '这里是数据'})，其中callback是前端定义的回调函数名 。前端在接收到返回的 JavaScript 代码后，会立即执行这个函数，从而获取到数据 。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSONP示例</title>
</head>
<body>
<button>点击通过JSONP获取数据</button>
<div></div>
<script>
function jsonpCallback(data) {
document.getElementById('jsonpResult').innerHTML = JSON.stringify(data);
}
document.getElementById('jsonpBtn').addEventListener('click', function () {
let script = document.createElement('script');
script.src = 'http://example.com/api/data?callback=jsonpCallback';
document.body.appendChild(script);
});
</script>
</body>
</html>
在上述代码中，当点击按钮时，会动态创建一个<script>标签，其 src 属性指向服务器的 API 地址，并带上callback=jsonpCallback参数，告诉服务器将数据用jsonpCallback函数包裹返回 。服务器返回类似jsonpCallback({name: '张三', age: 20})这样的代码，浏览器接收到后会立即执行jsonpCallback函数，将数据显示在页面上 。
JSONP 的优点是兼容性好，几乎所有浏览器都支持，实现起来也相对简单 。然而，它也有明显的缺点，比如只支持 GET 请求，因为数据是通过 URL 参数传递的，这就限制了其在需要发送大量数据或进行 POST、PUT 等请求场景下的应用；而且安全性相对较低，因为它是通过执行服务器返回的 JavaScript 代码来获取数据，如果服务器被攻击，返回恶意代码，可能会导致安全问题 。
CORS（Cross – Origin Resource Sharing，跨域资源共享）：CORS 是一种更现代、更强大的跨域解决方案，它是一个 W3C 标准 。CORS 通过在服务器端设置响应头来允许跨域请求 。当浏览器发现 AJAX 请求跨源时，会自动在请求头中添加Origin字段，标识请求来自哪个源 。服务器接收到请求后，如果允许该源的请求，会在响应头中添加Access-Control-Allow-Origin字段，其值为允许的源（可以是具体的域名，也可以是*表示允许所有源） 。例如，在 Node.js 的 Express 框架中，可以这样设置：
const express = require('express');
const app = express();
app.use((req, res, next) => {
res.header('Access-Control-Allow-Origin', '*'); // 允许所有源跨域，生产环境建议设置具体域名
res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
next();
});
app.get('/data', (req, res) => {
res.send('这是允许跨域访问的数据');
});
const port = 3000;
app.listen(port, () => {
console.log(`服务器运行在端口 ${port}`);
});
在前端，使用 AJAX 请求时，代码与同源请求并无区别：
let xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:3000/data', true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log(xhr.responseText);
}
}
};
xhr.send();
CORS 的优点是支持所有类型的 HTTP 请求（GET、POST、PUT、DELETE 等），安全性较高，因为它是通过服务器端的配置来控制跨域访问，而不是像 JSONP 那样依赖于执行外部 JavaScript 代码 。但它的兼容性略逊于 JSONP，不过在现代浏览器中，几乎都已经支持 CORS 。
（二）错误处理
在 AJAX 请求过程中，可能会出现各种错误，及时有效地处理这些错误，能够提升用户体验，也有助于我们调试代码 。常见的错误类型有：
网络错误：当网络连接不稳定或中断时，会导致 AJAX 请求失败 。例如，用户在移动网络环境下，信号突然变差，或者在使用公共 WiFi 时，网络出现故障 。在 JavaScript 中，可以通过监听onerror事件来捕获网络错误 。以原生的 XMLHttpRequest 对象为例：
let xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/data', true);
xhr.onerror = function () {
console.log('网络错误，请求无法完成');
};
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log(xhr.responseText);
}
}
};
xhr.send();
在上述代码中，当网络出现问题导致请求失败时，onerror事件会被触发，输出错误信息 。
服务器错误：服务器在处理请求时可能会出现错误，返回非 200 的状态码 。比如，服务器端代码出现异常，数据库连接失败，或者请求的资源不存在等 。我们可以在onreadystatechange事件中，根据status属性来判断服务器返回的状态码，进行相应的错误处理 。
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log(xhr.responseText);
} else if (xhr.status === 404) {
console.log('请求的资源不存在');
} else if (xhr.status === 500) {
console.log('服务器内部错误');
} else {
console.log('请求失败，状态码：' + xhr.status);
}
}
};
在这个示例中，根据不同的状态码，输出不同的错误信息，让我们能更清楚地了解请求失败的原因 。
语法错误或逻辑错误：在编写 AJAX 代码时，可能会出现语法错误，比如拼写错误、缺少分号等，或者逻辑错误，比如请求参数传递错误 。对于语法错误，浏览器的控制台会直接提示错误信息，我们可以根据提示来修改代码 。而逻辑错误则需要我们仔细检查代码逻辑，通过调试工具（如 Chrome 浏览器的开发者工具）逐步排查 。例如，在发送 POST 请求时，忘记设置Content-Type请求头，导致服务器无法正确解析请求体数据，这时就需要仔细检查代码，确保请求头设置正确 。通过合理的错误处理机制，我们可以让 AJAX 请求在各种情况下都能有良好的表现，提高应用的稳定性和可靠性 。
六、总结与展望
通过对 AJAX 的学习，相信你已经掌握了这项强大技术的核心要点 。我们从 AJAX 的基本概念入手，了解到它是一种能够实现网页异步更新的技术，通过 XMLHttpRequest 对象在后台与服务器进行数据交换，从而避免了页面的整体刷新 。在原理部分，深入剖析了 XMLHttpRequest 对象的创建、请求初始化、发送以及响应处理的全过程，明白了 AJAX 工作流程中各个环节的重要性 。
在实战演练中，我们亲自上手，搭建开发环境，使用 Node.js 和 Express 框架搭建服务器，通过原生的 JavaScript 代码创建 AJAX 请求，实现了 GET 和 POST 请求的发送，并学会了如何处理服务器返回的各种响应数据，包括 JSON 数据的解析和 DOM 操作来更新页面内容 。同时，也遇到并解决了一些常见问题，如跨域问题和错误处理，掌握了 JSONP 和 CORS 这两种常见的跨域解决方案，以及针对不同类型错误的处理策略 。
AJAX 在现代网页开发中应用广泛，无论是提升用户体验的无刷新交互，还是实现复杂的实时数据更新功能，它都发挥着不可或缺的作用 。然而，技术的发展永无止境，随着互联网技术的不断进步，AJAX 也在不断演进 。未来，AJAX 将在更多复杂场景中得到应用，比如在大型单页应用（SPA）中，与各种前端框架（如 Vue、React、Angular）深度结合，实现更高效的数据交互和页面渲染 。同时，随着移动互联网的发展，AJAX 在移动端网页和混合应用开发中也将持续发挥重要作用 。
希望大家能够继续深入学习 AJAX 技术，不断探索其在更多场景下的应用 。可以尝试将 AJAX 应用到实际项目中，通过实践来加深对它的理解和掌握 。也可以已关注 AJAX 相关的最新技术动态，如 Fetch API 等更现代的网络请求技术，它们在一定程度上简化了 AJAX 操作，提供了更强大的功能 。相信通过不断学习和实践，你将在 AJAX 技术领域取得更大的进步，为网页开发带来更多创新和惊喜 。
暂无评论内容