什么是 AJAX 以及如何在 WordPress 中使用它

用 AJAX 与 WordPress 是一个常见的组合，网页开发人员通常用它来创建动态和互动的网页内容。通过 AJAX，可以在不刷新整个页面的情况下，更新网页的特定部分。网站访客在前端是察觉不到的。

从本质上讲，AJAX 结合了多种技术，包括 JavaScript、XML 和 XMLHttpRequest 对象。这些技术协同工作，异步地在网页浏览器和服务器之间发送和接收数据。

在本文中，我们会更详细地探讨 AJAX，包括它是如何工作的以及为什么它在 WordPress 中如此有用。还提供逐步指南，教你如何在 WordPress 网站上实现 AJAX，以增强网站的功能。

AJAX 简要概述

AJAX 代表异步 JavaScript 和 XML，是一种技术，可以异步请求服务器，并在不重新加载页面的情况下对页面进行更改。AJAX 脚本请求服务器返回一些数据，然后使用获得的数据修改网页。

例如，假设有一个下拉菜单，选择预约日期，另一个下拉列表动态显示可预订的时间。通过 AJAX 脚本，服务器被请求提供可选的预约时间，以便更新项目的下拉列表。

AJAX 与 REST API 对比

AJAX 和 REST API 经常被比较，因为它们都用于网页开发中，以提升用户体验。让我们来看看它们的主要区别！

AJAX 是如何工作的？

AJAX 是一组网页开发技术，能在网页浏览器和服务器之间进行异步数据交换。它使得网页可以动态更新，而无需重新加载整个页面。

从技术角度来看，AJAX 通过结合 JavaScript、XML（虽然现在 JSON 等其他格式也被广泛使用）和 XMLHttpRequest 对象来实现。以下是其典型的工作流程：

1. 事件触发：用户触发某个事件，如点击按钮或提交表单，从而启动 AJAX 请求。

2. XMLHttpRequest 对象：JavaScript 创建 XMLHttpRequest 对象的实例，作为浏览器和服务器之间的中介。

3. 异步请求：XMLHttpRequest 对象（第 2 步）向服务器发送异步请求，不会干扰或阻止用户与网页的互动。

4. 服务器通信：请求被发送到服务器，服务器处理请求并生成响应。

5. 数据获取：服务器完成处理后，将响应数据返回给浏览器。

6. 动态更新：浏览器使用 JavaScript 操作文档对象模型（DOM），根据收到的响应更新网页内容，而无需重新加载整个页面。

AJAX 请求流程图

通过使用 AJAX，网页开发人员可以创建更具互动性和响应性的网页应用程序。AJAX 使得实时更新、动态内容加载、表单验证等变得可能，极大地改善了用户体验。

它通过减少完全重新加载页面的需求，促进了浏览器与服务器之间更流畅、更快速和更高效的数据交换，使网页交互变得更顺畅。

为什么 AJAX 有用？

AJAX 在多种情况下很有用。下面让我们看看编辑时候最常用到的自动保存WordPress 中的草稿功能。

AJAX 自动保存 WordPress 草稿
AJAX 在 WordPress 中实现了自动保存草稿的功能。这有助于防止数据丢失，并为 WordPress 用户提供无缝的写作体验。

示例：在撰写博客文章或创建页面时，AJAX 可以定期将内容发送到服务器并在后台保存为草稿，无需手动保存或重新加载页面。

AJAX 自动保存草稿

通过在 WordPress 开发中利用 AJAX 技术，用户可以创建更具动态性、互动性和响应性的网页。

在 WordPress 中使用 AJAX

WordPress 本身原生支持 AJAX。可以在 wp-admin 文件夹中看到 “admin-ajax.php” 文件。它最初是为所有从 WordPress 后台发起 AJAX 请求的功能创建的，后来也被用于网站的前端部分。

所有的 WordPress AJAX 请求都必须通过 PHP 脚本处理。换句话说，admin-ajax.php 应该是通过它调用返回内容的操作的 PHP 文件。

早在 2013 年，WordPress 引入了 WordPress Heartbeat API，该 API 提供了几个重要功能，如自动保存功能、登录过期提醒、以及当另一个用户正在撰写或编辑 WordPress 文章时，给出文章锁定警告。

文章锁定

当你尝试编辑另一位用户正在编辑的文章时，会弹出一个警告提示你当前的情况。你将看到三个可操作选项：所有文章、预览、和 接管文章。

接管文章

上述功能得益于 WordPress Heartbeat API，它连接了服务器和浏览器，确保适当的通信和响应。

WordPress Heartbeat API 会生成请求与服务器进行通信，并在收到数据/响应时触发事件。这通常会增加服务器的负载，最终可能会导致 WordPress 后台变慢。

示例

我登录到我的 WordPress 后台并开始撰写一篇文章。接着，打开了多个标签页，浏览其他内容。尽管如此，后台仍然保持登录状态，并且可以看到 admin-ajax.php 持续向服务器发送请求。

根据上述问题，WordPress 中的 admin-ajax.php 每 15 秒会生成一次请求。该请求可以是与服务器的任何通信。

WordPress 中的 AJAX 请求由位于wp-admin 文件夹中的admin-ajax.php文件处理。它是后端和面向用户的 AJAX 功能的指定文件。

要启动 AJAX 请求，必须使用GET或POST方法在请求数据中包含操作参数。

这个动作参数决定了在admin-ajax.php文件中要触发的具体钩子。

这些钩子被命名为wp_ajax_my_action和wp_ajax_nopriv_my_action，其中my_action 对应于 GET 或 POST 请求中 action 参数的值。

让我们看看如何在 WordPress 中使用它。如果是 WordPress 新手或不懂技术，可能很难理解。重要的是要对 JavaScript 有很好的理解（jQuery 就足够了）以及 HTML、CSS 和 PHP 的知识。

• 使用wp_enqueue_script()函数将负责处理 AJAX 请求的 JavaScript 文件加入队列。确保将其正确加入队列，例如在主题的functions.php或自定义插件文件中。
• 利用wp_localize_script()函数本地化 AJAX 脚本。这允许您将数据从 PHP 代码传递到脚本，使其可在 JavaScript 中访问。
• 使用 WordPress 的wp_send_json()或wp_send_json_success()和wp_send_json_error()函数将响应数据发送回客户端 JavaScript。您可以在响应中包含所需的数据或错误消息。
• 可以使用jQuery.ajax()方法或简写jQuery.post()或jQuery.get()方法将 AJAX 请求发送到服务器。

这些示例展示了如何在 WordPress 的不同场景中使用 AJAX 来增强用户交互、提高性能并提供无缝的用户体验。

分析 admin-ajax.php 请求

插件请求会导致 WordPress 中的 admin-ajax.php 文件出现许多问题。这些插件可能会通过请求特定的功能，如弹窗或社交分享计数更新，导致 WordPress 后台变慢。然而，并非所有请求都会使 admin-ajax.php 文件超载。

如果请求得当处理，并且插件开发人员遵循最佳实践来使用 AJAX 调用，admin-ajax.php 文件应该能正常工作。

接下来，让我们看看一些检查导致网站变慢的 admin-ajax.php 请求的最佳方法。

1. 启用调试模式

通过在网站的 wp-config.php 文件中添加以下代码来启用 WordPress 调试模式：

phpCopy codedefine('WP_DEBUG', true);

2. 监控网络请求

在浏览器中加载你的站点并进入 “检查” > “网络”（Inspect > Network）。按下 Ctrl + R 并找到 admin-ajax.php 文件。在网络请求列表中选择 admin-ajax.php 请求，以查看其详细信息。

注意请求方法（GET 或 POST）、请求参数和响应时间。比较不同请求的响应时间，找出任何明显的差异。

3. 禁用插件

逐个禁用插件，首先从那些最有可能与 admin-ajax.php 交互的插件开始，比如缓存插件或优化插件。

禁用每个插件后，重新加载页面并监控网络请求。记录响应时间或请求大小的任何变化。

4. 确定问题插件

当你注意到响应时间显著改善或 admin-ajax.php 请求的大小减少时，就可以找到导致问题的插件或请求。

加速 WordPress 后台

为了加速 WordPress 后台，最佳做法是禁用 Heartbeat API，或者至少设置更长的时间间隔，这样它就不会每隔几秒钟就向服务器发送请求。

所以，需要安装 Breeze 插件。

登录到网站 WordPress 后台。导航到 “插件” → “添加新插件” → 搜索 “Breeze” → 安装并激活插件。

导航到 设置 → Breeze → Heartbeat API。在这里，会看到四个不同的选项，用于配置 Heartbeat API。

1. 控制 Heartbeat：可以切换按钮，开启或关闭后台、文章编辑器和前端的 Heartbeat API。
2. 前端 Heartbeat：这个选项允许更改前端的行为或完全禁用它。
3. 文章编辑器 Heartbeat：这个选项可以更改 WordPress 文章编辑器的行为或完全禁用它。
4. 后台 Heartbeat：这个选项能更改后台的行为或完全禁用它。

在这里，需要创建多个规则：

默认情况下，WordPress Heartbeat API 使用默认的频率，但可以根据需要创建多个规则。

例如，想要 WordPress 后台（仪表盘）每 2 分钟（120 秒）触发一次，而文章编辑器每 3 分钟（180 秒）触发一次。

因此，必须创建两个规则：一个用于 WordPress 后台，另一个用于文章编辑器。将它们的触发频率分别设置为 2 分钟和 3 分钟。

AJAX 安全考虑事项

在处理 AJAX 时，有一些安全方面需要特别注意。以下是几个重要的安全考虑：

1. AJAX 应用易受跨站脚本攻击（XSS）：这意味着如果没有适当的验证和编码，AJAX 代码很容易被操控。结果，攻击者可以轻松窃取信息、篡改内容并执行恶意操作。
2. AJAX 函数调用以明文方式发送到服务器：如果没有正确的协议，任何人都可以提取敏感信息。这基本上将数据库置于恶意攻击者的控制之下。
3. AJAX 可能与某些互联网浏览器不兼容：不同的浏览器可能处理 AJAX 请求的方式不同，导致兼容性问题。

总结

现在，已经了解了什么是 AJAX，以及它如何通过异步更新和刷新屏幕来改善 Web 应用程序的用户体验。我们还看到了如何在 WordPress 中使用 AJAX，既包括前端也包括后台。

通过 WordPress AJAX，可以创建更具动态性和响应性的站点，在不重新加载页面的情况下与服务器进行交互。希望这篇文章对你们有帮助并提供了有用的信息。