什么是 AJAX 以及如何在 WordPress 中使用它(分步指南)

已发表: 2021-05-27
wordpress ajax
关注@Cloudways

AJAX 是一种用于网站开发的流行技术,它允许您从后端检索数据并刷新视图,而无需重新加载网页。 因此,它可以帮助您提高网站的交互性、速度和可用性。 每次您执行诸如发表评论或发布推文之类的操作时,AJAX 都会发挥作用。

在这篇文章中,我将告诉你什么是 AJAX 以及如何在 WordPress(也称为 WP AJAX)中使用 AJAX。 让我们继续阅读吧!

  • 什么是 AJAX?
  • AJAX 是如何工作的?
  • 如何在 WordPress 中使用 AJAX?
  • 插件如何重载 admin-ajax.php?
  • 加速 WordPress 仪表板
  • 检测使用 Heartbeat API 的插件

什么是 AJAX?

AJAX 代表 Asynchronous JavaScript And XML,一种允许您异步向服务器发出请求并更改我们的页面而无需重新加载它们的技术。 AJAX 脚本请求服务器返回一些数据,然后用获得的数据修改网页。

例如,想象一个下拉菜单,您可以在其中选择约会日期,而另一个下拉列表会动态显示可供预订的时间。 通过脚本,已向服务器询问可用于选择治疗下拉菜单的时间。

托管 WordPress 主机每月 10 美元起

体验开发人员信任的可靠云托管,以获得性能和速度提升。

免费试用 3 天

AJAX 是如何工作的?

AJAX 的使命是充当您的网站和服务器之间的桥梁。 这种异步技术的核心是 XMLHttpRequest 对象,它允许数据交换。 以下是进行 AJAX 调用的基本步骤:

ajax 是如何工作的

– 来源:W3Schools

  • 指定要发送的信息
  • 设置通话
  • 使用 XMLHttpRequest 对象发送数据
  • 接收并处理来自服务器的响应

好消息是这个过程可以使用 jQuery 库来简化。

如何在 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 帖子。

Heartbeat API 的两个非常突出的特性是:

1.自动保存

当您保存帖子草稿或继续处理它时,WordPress 会自动保存更改。 自动保存和手动保存草稿之间有明显的区别。 查看以下显示两种保存类型的屏幕截图:

发布最后编辑和起草

- 在 WordPress 中自动保存

2.后锁

当您尝试编辑其他用户已经在处理的帖子时,将出现有关该情况的弹出警告。 您可以看到三个操作。

在 wordpress 中进行后期编辑

– 在 WordPress 中发布锁定

由于 WordPress Heartbeat API 创建了服务器和浏览器之间的连接以进行适当的通信和响应,因此上述功能成为可能。

WordPress Heartbeat API 生成与服务器通信的请求,并在接收数据/响应时触发事件。 这通常会增加服务器的负载并最终减慢 WordPress 管理员的速度。

一个活生生的例子

我登录到我的 WordPress 仪表板并开始起草一篇文章。 接下来,我将选项卡打开几分钟并开始浏览其他选项卡。 仪表板仍处于登录状态,您可以看到 admin-ajax 不断发送请求。

admin-ajax.php 向服务器发送请求

– admin-ajax.php 向服务器发送请求

根据上面提到的票证,WordPress 中的 admin-ajax.php 每 15 秒生成一次请求。 该请求可以是与服务器的任何通信。

插件如何重载 admin-ajax.php?

WordPress 中 admin-ajax.php 中的大多数问题都可以归因于已安装插件发出的请求。 这些插件通过发送请求以实现特定功能(例如触发弹出窗口或更新社交共享计数器)使 WordPress 管理员变慢。

也就是说,请求不一定会增加 admin-ajax.php 文件。 如果请求得到正确处理,并且插件开发人员遵循在他们的插件中使用 AJAX 调用的最佳实践,那么 admin-ajax.php 文件就可以了。 因此,在停用任何插件之前对其进行诊断也很重要。

如何诊断 WordPress 中的插件?

正确诊断插件以识别其对 admin-ajax.php 文件的影响非常重要,这可能会减慢 WordPress 管理员的速度。 为此,我们将使用两个工具:GTmetrix 和 WebPageTest。

对于 GTmetrix,导航到其 Waterfall 选项卡以获取完整的请求列表。 仔细查看列表后,您可以看到 admin-ajax.php 文件发出的 POST 请求。

wordpress 中的插件诊断

– WordPress 中的插件诊断

就我而言,这些请求主要是由社交分享插件发出的。 这个特定的插件每 15 秒通过 API 向社交媒体帐户发送一个 ajax 请求,以获取更新的共享计数。

展开选项卡以获取详细信息。 响应选项卡显示触发这些请求的确切位置。

Chrome 附带开发者工具,可以帮助分析各种插件发出的请求。 要检查这一点,请在 Chrome 中打开网站,单击 CTRL + Shift + I,然后单击网络选项卡。

chrome 中的 admix-ajax.php 请求

– Chrome 中的 admix-ajax.php 请求

重新加载页面并查看列表中填充了更新的请求。 在过滤器框中,键入 ajax 或 admin-ajax 以过滤所需的文件。 这使您可以深入了解请求的数量以及它们的频率和请求的来源。

接下来,单击文件以查看更多信息。 在响应选项卡中,它会为您提供一些导致此请求的插件的提示。 就我而言,这一次是由 WP Popular 插件 (WPP) 触发的,该插件可以突出显示特定时间段内最受欢迎的帖子。

为避免这种情况,请确保您使用的插件已更新。 如果不是,请尝试打开支持票,以便其开发人员可以解决问题。 如果可能,您也可以将其替换为另一个已更新且不会超载 admin-ajax.php 文件的插件。

在摆脱任何插件之前进行彻底的诊断很重要,因为某些插件对您的 WordPress 网站至关重要。 这些工具可以帮助您找到根本原因并选择最佳解决方案来解决它。

在下一节中,我们将了解如何减少这些请求并防止 admin-ajax.php 文件过载。

加速 WordPress 仪表板

为了加快 WordPress 后端的速度,最好的做法是禁用 Heartbeat API,或者至少设置更长的时间间隔,这样它就不会每隔几秒就访问服务器。

安装心跳 API 插件

登录到您的 WordPress 管理仪表板。 导航到插件 → 添加新 → 搜索 Breeze → 安装并激活它。

在 wordpress 中安装微风

– 在 WordPress 中安装微风

配置微风插件

导航到设置 → 微风 → 心跳 API。 在那里,您会发现 4 个用于配置 Heartbeat 的不同选项。

  1. 控制心跳:您可以切换按钮以打开或关闭后端、帖子编辑器和前端的心跳 API。
  2. Heartbeat Frontend:这将允许您更改前端的行为或完全禁用它。
  3. Heartbeat Post Editor:这将允许您更改 WP Post Editor 的行为或完全禁用它。
  4. Heartbeat Backend:这将允许您更改后端的行为或完全禁用它。

微风中的心跳api设置

- 微风中的心跳 API 设置

创建多个规则

默认情况下,您会获得 WordPress Heartbeat API 的默认频率,但您可以根据需要创建多个规则。 例如,您可能希望在 2 分钟(120 秒)内触发 WordPress 后端(仪表板),但在 3 分钟(180 秒)内触发帖子编辑器。 为此,您需要创建两个规则:一个用于 WordPress 仪表板,另一个用于帖子编辑器。 将它们的频率分别设置为 2 分钟和 3 分钟。

检测使用 Heartbeat API 的插件

现在您已经设置了所有内容,是时候检查哪些插件正在使用 admin-ajax.php 文件并降低网站速度。

转到 GTmetrix 并输入您网站的 URL。 分析该站点需要一些时间。 完成后,导航到 Waterfall 选项卡,您将看到文件连接和响应所需的时间。 向下滚动一点,看看是否有 POST admin-ajax.php 的条目。 如果是,请将其展开并导航到“发布”选项卡。 从这里,您可以识别罪魁祸首插件。

在我的例子中,插件“桌面切换”正在使用 admin-ajax.php 文件并且不断地向服务器发送请求。 现在是做决定的时候了; 要么用另一个插件替换它,要么用手指交叉。

发布管理员 ajax php

- 发布 admin-ajax.php

概括

考虑到它的功能集,Heartbeat API 在您的 WordPress 网站上非常有用。 但是,如果使用不当,它会通过来回发送 WordPress Ajax 请求来增加 WordPress 后端和前端的加载时间。

这个问题只有两种解决方案。 您可以仅在几个位置禁用/启用 Heartbeat API,或者升级到可以处理请求负载并减少服务器响应时间的托管主机。

经常问的问题

问:什么是 WordPress admin-Ajax?

AJAX 是脚本和技术的集合,它允许网页在不重新加载整个页面的情况下进行更新。 WordPress admin-ajax 是一个包含 WordPress 上的 Ajax 请求编码的文件。 Admin-ajax 在使用 Ajax 的服务器和客户端之间建立连接。

问:AJAX 是否适用于 WordPress?

是的,AJAX 与 WordPress 一起工作,并且在 WordPress 上自动实现,因为它是其后端的一部分。 它用于管理数据库操作而无需重新加载整个页面。