跳转到主要内容

AJAX

什么是 AJAX？

AJAX是异步 JavaScript 和 XML 的缩写。XML是一种数据交换格式，UX 是软件开发人员用户体验的简写。Ajax 是一种 Internet 通信技术，它允许用户浏览器中显示的网页向服务器请求特定信息，并在同一页面上显示此新信息，而无需重新加载整个页面。您已经可以想象这将如何改善用户体验。

虽然 XML 是使用的传统数据交换格式，但交换实际上可以是任何方便的格式。在使用PHP代码时，许多开发人员更喜欢JSON，因为从传输的数据流创建的内部数据结构更易于交互。

要查看 AJAX 的实际效果，请转到 WordPress 管理区域并添加类别或标签。单击“添加新”按钮时请密切注意，请注意页面发生变化但实际上并未重新加载。不相信？检查浏览器的后台历史记录，如果页面已重新加载，您将看到该页面的两个条目。

AJAX 甚至不需要用户操作即可工作。Google 文档每隔几分钟就会使用 AJAX 自动保存您的文档，而无需您启动保存操作。

为什么使用 AJAX？

显然，它改善了用户体验。AJAX 允许您呈现动态、响应迅速、用户友好的体验，而不是呈现无聊的静态页面。用户可以立即得到反馈，表明他们采取的某些操作是正确还是错误。在发现某一字段存在错误之前，无需提交整个表格。输入数据后即可验证重要字段。或者可以在用户键入时提出建议。

AJAX 可以显着减少来回流动的数据量。仅需要交换相关数据，而不是所有页面内容，这就是页面重新加载时发生的情况。

特别与 WordPress 插件相关，AJAX 是迄今为止启动独立于 WordPress 内容的流程的最佳方式。如果您以前编写过 PHP，您可能会通过简单地链接到新的 PHP 页面来完成此操作。单击链接的用户启动该过程。这样做的问题是，当您链接到新的外部 PHP 页面时，您无法访问任何 WordPress 功能。过去，开发人员通过wp-load.php在新的 PHP 页面上包含核心文件来访问 WordPress 功能。这样做的问题是您不可能再知道该文件的正确路径。WordPress 架构现在足够灵活，/wp-content/您的插件文件可以从其通常位置移动到安装根目录的一级。你无法知道在哪里wp-load.php是相对于你的插件文件的，你也无法知道安装文件夹的绝对路径。

您可以知道向何处发送 AJAX 请求，因为它是在全局 JavaScript 变量中定义的。您的 PHP AJAX 处理程序脚本实际上是一个操作挂钩，因此与外部 PHP 文件不同，所有 WordPress 功能都自动可用。

如何使用 AJAX？

如果您是 WordPress 新手，但有在其他环境中使用 AJAX 的经验，则需要重新学习一些内容。WordPress 实现 AJAX 的方式很可能与您习惯的不同。如果一切对你来说都是新的，没问题。您将在这里学习基础知识。一旦您开发了基本的 AJAX 交换，就可以轻而易举地扩展该基础并开发具有出色用户界面的杀手级应用程序！

WordPress 中的任何 AJAX 交换都有两个主要组件。客户端 JavaScript 或 jQuery 和服务器端 PHP。所有 AJAX 交换都遵循以下事件顺序。

  1. 某种页面事件会启动 JavaScript 或 jQuery 函数。该函数从页面收集一些数据并通过 HTTP 请求将其发送到服务器。因为使用 JavaScript 处理 HTTP 请求很尴尬，而且 jQuery 无论如何都捆绑到 WordPress 中，所以从现在开始我们将只关注 jQuery 代码。直接使用 JavaScript 进行 AJAX 是可能的，但当 jQuery 可用时就不值得这样做。
  2. 服务器接收请求并对数据执行某些操作。它可以组装相关数据并将其以 HTTP 响应的形式发送回客户端浏览器。这不是必需的，但由于需要让用户了解正在发生的事情，因此很少不发送某种响应。
  3. 发送初始 AJAX 请求的 jQuery 函数接收服务器响应并对其执行某些操作。它可能会更新页面上的某些内容和/或通过某种方式向用户呈现消息。

将 AJAX 与 jQuery 结合使用

现在我们将定义jQuery 文章中的代码片段中的“do stuff”部分。我们将使用$.post()方法，它有 3 个参数：发送 POST 请求的 URL、要发送的数据以及处理服务器响应的回调函数。不过，在此之前，我们需要提前做好一些计划，以免造成阻碍。我们进行以下分配以供稍后在回调函数中使用。其目的在回调部分会更加明显。


var this2 = this;

网址

所有 WordPress AJAX 请求都必须发送到wp-admin/admin-ajax.php. 正确、完整的 URL 需要来自 PHP，jQuery 无法自行确定该值，并且您不能在 jQuery 代码中对 URL 进行硬编码并期望其他人在其站点上使用您的插件。如果页面来自管理区域，WordPress 将在全局 JavaScript 变量ajaxurl中设置正确的 URL 。对于公共区域的页面，您需要自己建立正确的 URL 并使用wp_localize_script() 将其传递给 jQuery 。PHP 部分将对此进行更详细的介绍。现在只需知道适用于前端和后端的 URL 可用作您将在 PHP 段中定义的全局对象的属性。在 jQuery 中，它的引用方式如下：


my_ajax_obj.ajax_url

数据

所有需要发送到服务器的数据都包含在数据数组中。除了应用程序所需的任何数据之外，您还必须发送操作参数。对于可能导致数据库更改的请求，您需要发送一个随机数，以便服务器知道该请求来自合法来源。我们提供给.post()方法的示例数据数组如下所示：


{
  _ajax_nonce: my_ajax_obj.nonce, // nonce
  action: "my_tag_count", // action
  title: this.value // data
}

下面解释每个组件。

随机数

Nonce是“Numberused ONCE”的合成词。它本质上是分配给所服务的任何形式的每个实例的唯一序列号。随机数是使用 PHP 脚本建立的，并以与 URL 相同的方式传递给 jQuery，作为全局对象中的属性。在本例中，它被引用为my_ajax_obj.nonce。

笔记

每次使用真正的随机数时都需要刷新，以便下一个 AJAX 调用有一个新的、未使用的随机数来发送作为验证。事实上，WordPress 的随机数实现并不是真正的随机数。除非您注销，否则在 24 小时内可以根据需要多次使用相同的随机数。使用相同的种子短语生成随机数将在 12 小时内始终产生相同的数字，之后最终将生成新的数字。

如果您的应用程序需要严格的安全性，请实现一个真正的随机数系统，其中服务器发送一个新的随机数来响应 Ajax 请求，以便脚本用于验证下一个请求。

如果将此随机数值键入_ajax_nonce ，这是最简单的。如果它与验证随机数的 PHP 代码协调，您可以使用不同的密钥，但仅使用默认值而不用担心协调会更容易。以下是该键值对的声明方式：


_ajax_nonce: my_ajax_obj.nonce

行动

所有 WordPress AJAX 请求都必须在数据中包含操作参数。该值是一个任意字符串，部分用于构造用于挂钩 AJAX 处理程序代码的操作标记。该值作为 AJAX 调用目的的非常简短的描述很有用。毫不奇怪，这个值的关键是'action'。在此示例中，我们将使用“my_tag_count”作为我们的操作值。该键值对的声明如下所示：


action: "my_tag_count"

服务器完成其任务所需的任何其他数据也包含在该数组中。如果有很多字段需要传输，有两种常见的格式可以将数据字段组合成单个字符串以方便传输：XML 和 JSON。使用这些格式是可选的，但无论您做什么都需要与服务器端的 PHP 脚本协调。有关这些格式的更多信息可在以下回调部分中找到。接收这种格式的数据比发送数据更常见，但两种方式都可以。

在我们的示例中，服务器只需要一个值，即所选书名的单个字符串，因此我们将使用键'title'。在 jQuery 中，触发事件的对象始终包含在变量this中。因此，所选元素的值为this.value。我们对该键值对的声明如下所示：


title: this.value

回调函数

回调处理程序是在发出请求后从服务器返回响应时执行的函数。再次，我们通常会在这里看到匿名函数。该函数传递一个参数，即服务器响应。响应可以是任何内容，从是或否到庞大的 XML 数据库。JSON 格式的数据也是一种有用的数据格式。甚至不需要响应。如果没有，则不需要指定回调。为了用户体验的利益，让用户知道任何请求发生了什么总是一个好主意，因此建议始终响应并提供一些发生情况的指示。

在我们的示例中，我们将无线电输入后面的当前文本替换为服务器响应，其中包括由书名标记的帖子数量。这是我们的匿名回调函数：


function( data ) {
  this2.nextSibling.remove();
  $( this2 ).after( data );
}

数据包含整个服务器响应。之前我们使用var this2 = this;行将触发更改事件的对象（引用为this ）分配给this2 。。这是因为闭包中的变量作用域仅扩展了一级。通过在事件处理程序中分配this2 （最初只包含“/* do stuff */”的部分），我们可以在回调中使用它，而this超出了范围。

服务器响应可以采用任何形式。应将大量数据编码到数据流中以便于处理。XML 和 JSON 是两种常见的编码方案。

XML

XML 是 AJAX 的旧数据交换格式。毕竟它是 AJAX 中的“X”。尽管使用本机 PHP 函数可能很困难，但它仍然是一种可行的交换格式。出于这个原因，许多 PHP 程序员更喜欢 JSON 交换格式。如果您确实使用 XML，则解析方法取决于所使用的浏览器。对 Internet Explorer 使用 Microsoft.XMLDOM ActiveX，对其他所有内容使用 DOMParser。请注意，自 5.8 版本以来，WordPress 不再支持 Internet Explorer。

JSON

JSON 通常因其轻量级和易用性而受到青睐。您实际上可以使用eval()解析 JSON ，但不要这样做！使用eval()会带来重大的安全风险。相反，使用专用的解析器，这也更快。使用解析器对象JSON的全局实例。为了确保它可用，请确保它与页面上的其他脚本一起排队。有关排队的更多信息将包含在稍后的PHP 部分中。

其他

只要数据格式与 PHP 处理程序协调，它可以是您喜欢的任何格式，例如逗号分隔、制表符分隔或任何适合您的结构。

客户端总结

现在我们已经将回调添加为$.post()函数的最终参数，我们已经完成了示例 jQuery Ajax 脚本。所有的部分放在一起看起来像这样：


jQuery(document).ready(function($) {         //wrapper
	$(".pref").change(function() {          //event
		var this2 = this;                  //use in callback
		$.post(my_ajax_obj.ajax_url, {      //POST request
			_ajax_nonce: my_ajax_obj.nonce, //nonce
			action: "my_tag_count",         //action
			title: this.value               //data
			}, function(data) {            //callback
				this2.nextSibling.remove(); //remove current title
				$(this2).after(data);       //insert server response
			}
		);
	} );
} );

该脚本可以输出到网页上的块中，也可以包含在其自己的文件中。该文件可以驻留在 Internet 上的任何位置，但大多数插件开发人员将其放置在/js/插件主文件夹的子文件夹中。除非你有理由不这样做，否则你最好遵循惯例。对于这个例子，我们将命名我们的文件myjquery.js

 
无评论
回到顶部