【前端开发】AJAX小白逆袭指南：从0到1轻松上手-CSDN博客

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&param2=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 方法的参数发送给服务器。