好的设计是无形的！ 这就像设置了自动温度控制的空调。 直到你觉得太热或太冷，你才会去关注它，而是专注于手头的任务，或者只是享受你的时间。

对于上网的用户来说，Ajax 就像一台自动空调。 它使网站使用起来更流畅、更快速，从而带来愉快的体验。 最重要的是，它只是有效！

如果您更喜欢视频，那么您很幸运！

了解如何轻松使用 Ajax：

• Ajax 究竟是什么？
• Ajax 基础
• 在 WordPress 中使用 Ajax 所需的技能
• 在WordPress中使用Ajax的过程
• 使用 Ajax 的著名 WordPress 插件

Ajax 究竟是什么？

Ajax 是一种 Web 开发技术，代表 一个同步 JavaScript 一个nd X机器学习. 它用于创建交互式且有趣的动态 Web 应用程序。 使用 Ajax，您无需等待网页重新加载即可看到更改。 一切都在后台自动处理，而不会中断您正在做的事情，从而增强您的用户体验。

您可能已经在 Web 上遇到过 Ajax。 Google 搜索的自动完成功能可能是最受欢迎的功能。 谷歌地图是另一个。 实时更新推文、Facebook 评论、Reddit 帖子、YouTube 点赞，所有这些令人难以置信的用户体验都归功于 Ajax 和相关技术。

在这篇文章中，我将向您简要介绍 Ajax，列出它的优点，解释它在 WordPress 中的工作原理，然后我们将一头扎进创建一个简单的 WordPress Ajax 插件。

听起来很有趣？ 让我们开始吧。

Ajax 基础

Ajax 使用编程语言（如 HTML/CSS、JavaScript、XML/JSON）和服务器端脚本语言（PHP、ASP.NET 等）的组合。 它的工作原理是将数据从浏览器发送到服务器，服务器处理它并发回响应。 浏览器使用此响应来更新网页，而无需重新加载它。

这是通常的情况：

• 用户操作会触发浏览器中的事件（如按钮单击）。
• Ajax 调用激活，它使用 XML/JSON 向服务器发送请求。
• 服务器端脚本处理此请求。 如果需要，它还可以访问数据库。
• 然后服务器将响应发送回浏览器。
• 第二个 JavaScript 函数称为回调函数，它接收响应并更新网页。

Ajax 的众多优势

1. 最大限度地减少带宽使用并优化网络操作，因为不需要服务器处理数据负载。
2. 为用户和服务器节省时间，因为用户可以立即看到来自服务器的响应。
3. 提高了性能。 由于没有发送整页数据，Ajax 提高了网页/应用程序的性能、速度和可用性。
4. 响应能力增强。 通过消除整页重新加载，网站将变得更快、响应更快，从而更加用户友好。

在 WordPress 中使用 Ajax 所需的技能

• 了解 HTML、CSS 和 JavaScript（jQuery 就够了）
• 基本熟悉 XML 或 JSON 数据交换格式
• 用于服务器端脚本编写的 PHP 技术诀窍

如果您的 jQuery 或 PHP 知识一触即发，请不要担心！ 您仍然可以遵循教程逻辑。 如果您遇到问题或需要帮助，请随时进入评论部分:)

WordPress 中的 Ajax 介绍

WordPress 的核心已经使用 Ajax，但仅限于管理屏幕。 例如，当您管理评论或添加/删除类别或帖子中的项目时，您可以通过 Ajax 看到即时更新。 这也是备受喜爱的自动保存功能背后的技术。

Ajax 最常与 WordPress 上的 jQuery 函数一起使用，因为与 VanillaJS 相比，它要简单得多。 此外，WordPress 核心已经加载了 jQuery 库。

以下是在 WordPress 中使用 Ajax 的过程：

1. 用户触发 Ajax 请求，该请求首先传递给 admin-ajax.php 文件在 wp-admin 文件夹。
2. Ajax 请求需要提供至少一条数据（使用 GET 或 POST 方法）。 这个请求被称为 行动.
3. 代码在 admin-ajax.php 使用 行动 创建两个钩子： wp_ajax_youraction 和 wp_ajax_nopriv_youraction. 这里， 你的行动 是 GET 或 POST 变量的值 行动.
4. 第一个钩子 wp_ajax_youraction 仅对登录用户执行，而第二个钩子 wp_ajax_nopriv_youraction 专为已注销的用户提供服务。 如果您想针对所有用户，则需要分别触发他们。
5. 为优雅降级计划钩子函数。 它确保您的代码即使在禁用 JavaScript 的浏览器上也能正常工作。

让我们创建一个 WordPress Ajax 插件

每一次伟大的旅程都始于一步，我们的学习也是如此。 让我们构建一个名为的基本 WordPress 插件 发布点赞计数器 具有以下特点：

• 登录用户可以喜欢帖子。
• 该插件会记录喜欢的帖子总数并显示它们。
• 帖子喜欢计数器会在前端即时更新。
• 如果已注销的用户尝试点赞帖子，则会显示错误消息。

首先，创建一个空的 WP 插件并激活它。 如果您需要这方面的帮助，可以参考我们的 WordPress 插件开发指南。 WordPress Codex 还有一个关于编写 WP 插件的详细页面。

找到你的主题的帖子模板

之后，您需要找到您的主题 单个.php 帖子模板。 当查询单个帖子时使用它，这是我们希望帖子点赞计数器所在的位置。 该文件可以在活动主题的根文件夹中找到。 保持打开以进行编辑。

为 Ajax 调用准备好帖子模板

让我们在这里创建一个链接，让用户喜欢帖子。 如果用户启用了 JavaScript，它将使用我们稍后创建的 JavaScript 文件； 如果没有，它会直接点击链接。 将下面给出的代码放在您的 单个.php 文件。

或者，您可以将此代码添加到任何 模板部件 你的 单个.php 文件包括。 例如，如果您使用的是官方 二十九 主题，您可以将此代码插入主题的 内容-single.php 文件。 为了测试这个插件代码，我将它插入到这个文件的最后 div.entry-内容 部分。

在没有 JavaScript 的情况下解决 Ajax 调用

单击上面创建的链接将带您到 admin-ajax.php 脚本，但您不会看到任何有用的输出，因为您尚未创建任何函数来运行您的操作。

为此，请在您的插件文件中创建一个函数，并将其添加到 WordPress 为您创建的两个挂钩中。 按照如下所示的代码进行操作：

如果一切正常，当登录用户单击 喜欢这个帖子 链接，它上面的点赞计数器应该会自动增加 1。 对于禁用 JavaScript 的浏览器，页面将刷新，但仍会显示更新的点赞数。

除了抛出错误消息之外，处理注销用户的函数在这里没有做太多事情。 它只是作为一个例子。 当然，您可以以此为基础，为访问者提供更多有用的选项。

最后，添加对 JavaScript 的支持

在最后添加对 JavaScript 的支持是一个很好的做法，因为它使事情变得更加清晰。 要在 WordPress 上使用 Ajax，您需要将 jQuery 库以及插件的自定义 JavaScript 文件加入队列。 为此，请转到您的插件并附加以下脚本：

完成后，是时候创建 liker_script.js JavaScript 文件。 然后您必须将此文件上传到前面代码中引用的位置（提示：它是您插件的根文件夹）。 这是代码 liker_script.js：

这 my_user_like() 我们插件中定义的函数应该向我们的浏览器发送响应作为 JSON 编码的结果数组，它也可以用作 JavaScript 对象。 使用它，我们可以在不重新加载网页的情况下更新帖子的数量。

就是这样！ 欢呼吧！

您现在已经为您的插件启用了 Ajax 功能。 当然，您可以对此进行扩展并根据自己的喜好添加更多功能。 来吧，调整它，直到你成功！

使用 Ajax 的著名 WordPress 插件

需要一些 Ajax 灵感来激发您的热情吗？ 查看这些出色的 WordPress 插件，它们利用 Ajax 的强大功能来构建强大的功能和更流畅的用户体验。

1. 延迟加载插件
   延迟加载是一种用于改善初始页面加载时间的 Web 开发技术。 它是通过延迟加载资源密集型资产来完成的，这些资产在浏览器的视口中对用户不可见。 当用户向下滚动网页时，这些资产会自动加载。 Smush 的免费版本支持延迟加载。
2. 成型机
   一个完全可扩展的表单制作插件，还支持投票、测验、带有付款选项的订单等。它有一个选项可以使用 Ajax 提交表单，为用户提供无缝体验。
3. 使用 Ajax 登录
   使用这个功能丰富的插件，为您的 WordPress 网站提供流畅的 Ajax 登录和注册效果。 如果您希望为您的用户提供比默认 WordPress 更好的登录和注册体验，那就别无所求。
4. WP-PostRatings
   这个简单的插件为您的 WordPress 网站的帖子和页面添加了一个 Ajax 评级系统。 它还为评级添加了短代码支持，以便您可以在任何地方显示它们。
5. YITH WooCommerce Ajax 产品过滤器
   一个非常有用且功能强大的 WooCommerce 插件，可让您应用所需的确切过滤器来显示您正在寻找的产品变体。 Ajax 确保这一切都在瞬间发生。
6. Ajax 搜索精简版
   由 Ajax 提供支持的 WordPress 响应式实时搜索插件。 它还包括 Google 自动完成和关键字建议。 使用此插件在您的网站上为您的用户提供更好的搜索体验。
7. 简单的 Ajax 聊天
   您有没有想过是否可以在网站上与其他用户实时聊天？ 这个 Ajax 驱动的插件就是解决这个问题的答案。 它是移动兼容的，并且可以根据您的喜好进行高度定制。

前往 WordPress.org 的插件存储库以获得更出色的 Ajax 实现。

保持冷静和阿贾克斯！

对 有好处的对用户和服务器也有好处，但你需要平衡它。 Ajax 是您增强网站性能和用户体验的强大工具。 但是你应该只在必要的地方使用它。 始终关注用户体验方面。 一开始会有点粗糙，但是一旦您掌握了 Ajax 的基础知识，就无法阻止您！

• 阿贾克斯
• 代码
• 插入
• WordPress