AJAX 简介

现代异步 JavaScript 简介

异步 JavaScript 允许网页在无需重新加载整个页面的情况下，从服务器请求数据并更新内容。这带来了更快、更流畅、更具吸引力的用户体验。

预备知识

在深入了解之前，您应该对以下内容有扎实的理解：

• HTML： 结构化网页内容。（HTML - 超文本标记语言）
• CSS： 美化网页内容。（CSS - 层叠样式表）
• JavaScript 基础： 变量、函数、数据类型、控制流程。
• DOM (文档对象模型)： 使用 JavaScript 与 HTML 元素交互（选择元素、更改内容、处理事件）。

熟悉基本的 HTTP 概念（请求、响应，以及 GET/POST 等方法）也很有帮助。

在此情境下什么是异步 JavaScript？

传统上称为 AJAX (异步 JavaScript 和 XML)，其核心思想保持不变：使网页能够异步地与服务器通信。

关键概念：

• 异步 (Asynchronous)： 操作（如获取数据）在后台发生，使浏览器和用户界面 (UI) 保持响应性。
• JavaScript： 在浏览器中用于发起请求和处理响应的语言。
• 数据交换 (Data Exchange)： 通常涉及向服务器 API 发送请求并接收数据，最常见的格式是 JSON (JavaScript 对象表示法)，尽管 XML 或纯文本也可能用到。

这种技术允许动态更新：

• 提交表单而无需完全刷新页面。
• 用户滚动时加载新数据（无限滚动）。
• 用户输入时自动建议搜索结果。
• 实时更新状态指示器或通知。
• 无需离开当前视图即可获取选中项的详情。

将此与经典网页进行比较，在经典网页中，任何重大更改都需要服务器渲染并发送一个全新的 HTML 页面，这会导致明显的闪烁和延迟。

广泛使用这些技术的应用示例包括：Gmail、Google Maps、Twitter、Facebook、现代仪表板、单页应用 (SPA - Single-Page Application)。

工作原理 (概念流程)

1. 事件发生： 浏览器中发生一个事件（例如，用户点击按钮、在字段中输入、页面加载）。
2. JavaScript 发起请求： JavaScript 代码（使用 Fetch API 或 XMLHttpRequest）创建一个 HTTP 请求并将其发送到 Web 服务器上的特定 URL。
3. 服务器处理请求： 服务器接收到请求，对其进行处理（例如，从数据库中检索数据，执行计算），并准备响应。
4. 服务器发送响应： 服务器将响应数据（通常是 JSON）发送回浏览器。
5. JavaScript 处理响应： JavaScript 接收到响应。它解析数据并更新网页 HTML/DOM 的相关部分。

关键在于，步骤 3、4 和 5 是异步发生的，不会阻塞用户界面。

涉及的核心技术

现代异步 JavaScript 依赖于浏览器特性和标准的结合：

• HTML & CSS： 用于结构和呈现。
• JavaScript： 用于协调整个过程和操作 DOM。
• Fetch API： 用于发起 HTTP 请求的现代浏览器标准（取代了旧的 XMLHttpRequest）。
• Promises 与 Async/Await： 用于高效管理异步操作的 JavaScript 特性。
• JSON (JavaScript 对象表示法)： 浏览器和服务器之间数据交换的标准格式。
• (可选) XML： 仍然可以使用，但在新的 API 中不太常见。
• 服务器端语言/框架： （例如，Node.js、Python、PHP、Ruby、Java、C#）用于在服务器上处理请求以及与数据库或其他资源交互。

立即开始使用现代异步 JS

这些技术内置于现代浏览器中，并依赖于已建立的 Web 标准。让我们探索如何高效地使用它们吧！