WordPress中文开发手册

  2. Home
  4. Docs
  6. WordPress中文开发手册
  8. WordPress插件开发
  10. JavaScript
  12. Ajax

Ajax

什么是Ajax？

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

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

要查看Ajax的行动，请转到您的WordPress管理区域并添加一个类别或标签。当您点击添加新按钮时，请注意页面更改，但实际上不会重新加载。不相信检查浏览器的后台历史记录，如果页面已重新加载，您将看到该页面的两个条目。

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

为什么要使用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处理程序脚本实际上是一个动作钩子，所以所有WordPress函数都可以自动使用，与外部PHP文件不同。

如何使用Ajax？

如果您是新来的WordPress，但在其他环境中使用Ajax的经验，您将需要重新学习一些东西。 WordPress实现Ajax的方式最有可能与您以前使用的方式不同。如果一切都是新的，没问题。你将在这里学习基础知识。一旦开发了一个基本的Ajax交换机，那么在这个基础上进行扩展就可以开发出一个令人敬畏的用户界面的杀手级应用程序！

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

某些页面事件会启动JavaScript或jQuery函数。该函数从页面收集一些数据，并通过HTTP请求将其发送到服务器。由于使用JavaScript处理HTTP请求是尴尬的，并且jQuery已经捆绑到WordPress中，我们将仅关注来自这里的jQuery代码。具有直接JavaScript的Ajax是可行的，但在jQuery可用时不值得。
服务器接收请求并对数据执行某些操作。它可以组合相关数据，并以HTTP响应的形式将其发送回客户端浏览器。这不是一个要求，但是由于保持用户了解发生了什么是可取的，所以很少发送某种响应。
发送初始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是“使用ONCE”的portmanteau。 它本质上是分配给任何形式的每个实例的唯一的十六进制序列号。 nonce是用PHP脚本建立的，并以与URL相同的方式传递给jQuery，作为全局对象中的属性。 在这种情况下，它被引用为my_ajax_obj.nonce。

注意：每次使用一个真实的随机数需要刷新，所以下一个Ajax调用有一个新的，未使用的随机数作为验证发送。 事实上，WordPress的nonce实现不是一个真正的随机数。 在24小时内可以根据需要多次使用相同的随机数。 生成具有相同种子短语的随机数将始终产生相同的数字，持续12小时，之后将最终生成新的数字。

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

如果您将这个随机数值键入_ajax_nonce，最简单。 如果与验证随机数的PHP代码进行协调，则可以使用其他键，但使用默认值更容易，而不用担心协调。 这是键值对的声明出现的方式：

_ajax_nonce: my_ajax_obj.nonce

Action

所有WordPress Ajax请求都必须在数据中包含一个动作参数。 该值是一个任意字符串，部分用于构建用于挂接Ajax处理程序代码的操作标签。 这个值对Ajax调用的目的是一个很简单的描述。 毫不奇怪，这个价值的关键是“行动”。 在这个例子中，我们将使用“my_tag_count”作为动作值。 该键值对的声明如下所示：

action: "my_tag_count"

这个数组中还包括服务器需要完成任务的任何其他数据。 如果有很多字段要传输，有两种通用格式将数据字段组合成一个字符串，以便更方便的传输，XML和JSON。 使用这些格式是可选的，但无论您做什么，都需要与服务器端的PHP脚本进行协调。 有关这些格式的更多信息，请参见以下回调部分。 以这种格式接收数据比发送数据更常见，但它可以同时工作。

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

title: this.value

Callback

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

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

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

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

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

XML

XML是Ajax的经典数据交换格式。 这是Ajax毕竟是'X'。 它仍然是一种可行的交换格式，即使使用本机PHP函数可能很困难。 许多PHP程序员因此而喜欢使用JSON交换格式。 如果您使用XML，解析方法取决于正在使用的浏览器。 将Microsoft.XMLDOM ActiveX用于Internet Explorer，并使用DOMParser进行其他操作。

JSON

通常，JSON的重量轻且易于使用，因此常常受益。 你可以使用eval()来解析JSON，但不要这样做！ 使用eval()具有重大的安全隐患。 相反，使用一个专门的解析器，这也更快。 使用解析器对象JSON的全局实例。 为了确保它可用，请确保它与页面上的其他脚本一起排队。 有关入队的更多信息将在PHP部分稍后介绍。

Other

只要数据格式与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 /子文件夹中。 除非你有理由去做，否则你也可以遵守惯例。 在这个例子中，我们将命名我们的文件myjquery.js