AJAX 简介

AJAX 简介

AJAX 允许网页在后台与服务器交互，无需完全重新加载整个页面即可更新部分内容。这使得 Web 应用程序更快、更动态、更用户友好。

什么是 AJAX？

AJAX 代表异步 JavaScript 和 XML（虽然 JSON 现在是更常见的数据格式）。

它不是一种单一的技术，而是利用现有 Web 标准与服务器异步交换数据的一系列技术的集合。这意味着你的 JavaScript 代码可以向服务器发送请求，然后继续运行而无需等待响应，仅在响应到达时更新页面。

主要优点：

• **改善用户体验：**消除了整页重新加载那种破坏性的“停止等待”式交互。
• **减少带宽使用：**仅传输必要的数据，而不是整个页面的标记。
• **提高响应速度：**页面部分内容可以根据用户操作快速更新。

传统网页在每次需要更改内容时都需要完全重新加载，这可能很慢且效率低下。AJAX 克服了这一限制。

示例：搜索框中的自动建议功能、实时表单验证、无限滚动的社交媒体动态、动态更新的仪表盘、交互式地图。

AJAX 的工作原理（概念流程）

以下是典型的 AJAX 流程的简化文本描述：

1. **事件发生：**浏览器中发生一个事件（例如，用户点击按钮、在字段中输入内容）。
2. **JavaScript 请求：**JavaScript 代码创建一个 HTTP 请求（使用 fetch API 或 XMLHttpRequest 对象），指向服务器上的特定 URL。
3. **服务器处理：**服务器接收请求，进行处理（例如，查询数据库、执行计算），可能使用像 PHP 这样的服务器端语言。
4. **服务器响应：**服务器发送回响应，通常包含请求的数据（通常格式化为 JSON）或状态更新。
5. **JavaScript 响应处理：**JavaScript 异步接收响应。然后它处理数据并更新网页 HTML 文档对象模型（DOM）的相关部分，而无需重新加载整个页面。

整个过程在后台发生，允许用户继续与页面其他部分交互。

AJAX 中使用的核心技术

AJAX 依赖于标准 Web 技术的组合：

• **HTML/CSS：**用于构建和美化用户界面。
• **DOM（文档对象模型）：**一个用于访问和操作 HTML 文档结构、样式和内容的 API。
• **JavaScript：**负责协调整个过程、发起请求、处理响应并更新 DOM 的脚本语言。
• **HTTP 请求：**与服务器的异步通信，通常使用：
• **数据格式：**用于在浏览器和服务器之间交换数据的格式。虽然 XML 最初很常见，但 JSON（JavaScript Object Notation） 由于其轻量级特性和与 JavaScript 的轻松集成，现在已成为主要选择。

现代开发：虽然理解 AJAX 的核心原理很有价值，但现代前端框架/库（如 React、Vue、Angular、Svelte）和工具库（如 Axios）通常提供更高级别的抽象，简化了 AJAX 请求的发起和 UI 更新的管理。

历史背景：Google Suggest

AJAX 在 2005 年左右获得了极大的普及，这主要归功于 Google 地图和 Google Suggest 等应用。

Google Suggest 有效地展示了 AJAX 的强大之处：当你在搜索框中输入时，JavaScript 会将部分查询发送到 Google 服务器，服务器返回建议列表并在搜索框下方动态显示——所有这些都不会打断你的输入或重新加载页面。

将 AJAX 与 PHP 结合使用

在接下来的章节中，我们将探讨如何构建 AJAX 交互，其中前端 JavaScript 与使用 PHP 编写的后端脚本通信以获取数据或执行操作。

如果你想更深入地了解 AJAX 的 JavaScript 部分，包括 fetch API 和处理响应，可以在线找到许多优秀的 JavaScript 教程。