AJAX

什么是AJAX

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

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

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

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

 

为什么使用AJAX

显然，它改善了用户体验。AJAX允许您呈现动态、响应迅速、用户友好的体验，而不是呈现一个枯燥、静态的页面。用户可以立即得到反馈，表明他们采取的某些行动是对的或错的。在发现某个字段有错误之前，无需提交整个表单。输入数据后，即可验证重要字段。也可以根据用户类型提出建议。

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

具体来说，与WordPress插件相关的是，AJAX是目前为止启动独立于WordPress内容的进程的最佳方式。如果您以前编写过PHP，您可能只需要链接到一个新的PHP页面就可以实现这一点。链接后的用户启动该过程。问题是，当你链接到一个新的外部PHP页面时，你不能访问任何WordPress函数。过去，开发人员通过在新的PHP页面上包含核心文件wp-load.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;

 

URL

所有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

 

数据

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

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

下面解释每个组件。

 

Nonce

Nonce是“Number used ONCE”的缩写。它本质上是分配给任何形式服务的每个实例的唯一序列号。nonce是用PHP脚本建立的，并以与URL相同的方式传递给jQuery，作为全局对象中的一个属性。在这种情况下，它被引用为my_ajax_obj.nonce。

如果您将这个nonce值键入_ajax_nonce，那么最容易实现。如果与验证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格式的数据也是一种有用的数据格式。甚至不需要回复。如果没有，则不需要指定回调。为了用户体验的利益，让用户知道任何请求发生了什么总是一个好主意，因此建议总是响应并提供一些发生了什么事情的指示。

在我们的示例中，我们用服务器响应替换单选input的当前文本，其中包括由书名标记的文章数量。这是我们的匿名回调函数：

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

data包含整个服务器响应。前面我们用var this2 = this;给this2分配了触发更改事件的对象（引用为this）。这是因为闭包中的变量范围只扩展了一个级别。通过在事件处理程序（最初仅包含“/* do stuff */”的部分）中赋值this2，我们能够在回调中使用它，若用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
			}
		);
	} );
} );

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