JQuery的简介速记Ajax方法

核心要点

• jQuery 简写 Ajax 方法提供了一种简化 Ajax 调用的方法，它使用预设配置为特定目的包装了 $.ajax() 方法。本文讨论的方法包括 load()、$.post() 和 $.get()。
• load() 方法允许从服务器加载数据并将其放入选定的元素中。它使用 URL、可选数据和可选回调函数。此方法可用于异步加载网页的主要内容。
• $.post() 方法用于向服务器发送 POST 请求，并将数据作为请求正文的一部分发送。此方法非常适合可能导致服务器端状态发生变化的请求。
• $.get() 方法启动对服务器的 GET 请求，非常适合服务器始终针对给定参数集返回相同结果的情况，或者用户需要共享资源的情况。

你是否从未听说过 Ajax 这个术语？我敢打赌，几乎所有人的手都放下，贴近身体。Ajax（最初代表异步 JavaScript 和 XML）是最常用的客户端方法之一，有助于创建异步网站和 Web 应用程序。

当然可以使用原始 JavaScript 执行 Ajax 调用，但是处理代码的所有不同部分可能会很麻烦。如果你必须支持像 Internet Explorer 6 这样的古老浏览器，情况更是如此。

幸运的是，jQuery 为我们提供了一套处理这些问题的方法，使我们能够专注于我们希望通过代码完成的任务。jQuery 提供了一个主要方法 $.ajax()，它可以高度配置以适应你的任何需求。它还提供了一套简写方法，称为简写方法，因为它们只是具有预设配置的 $.ajax() 方法的包装器，每个方法都服务于单一目的。

除 $.ajax() 方法外，所有方法都有一个共同点：它们不操作一组 DOM 元素，而是直接从 jQuery 对象调用。因此，我们不会像这样编写语句：

$('p').ajax(...);

这将选择页面中的所有段落，然后调用 ajax() 方法，而是编写：

$.ajax(...);

在本文中，我们将讨论三个最常用的 jQuery 简写方法：load()、$.post() 和 $.get()。

load()

我们将讨论的第一个方法是 load()。它使我们能够从服务器加载数据并将返回的数据（通常是 HTML 代码）放入选择匹配的元素中。在实际使用之前，让我们看看它的签名：

load(url[, data][, callback])

每个参数的含义如下：

• url：指定要向其发送请求的资源的 URL 的字符串；
• data：一个可选字符串，应该是格式良好的查询字符串，或者必须作为请求参数传递的对象。如果传递字符串，则请求方法将为 GET，如果传递对象，则请求方法将为 POST。如果省略此参数，则使用 GET 方法；
• callback：Ajax 请求完成后调用的可选回调函数。此函数最多接受三个参数：响应文本、请求的状态字符串和 jqXHR 实例。在回调函数内部，上下文 (this) 会逐个设置到集合的每个元素。

这看起来很难用吗？让我们看一个具体的例子。

假设你的网站中有一个 ID 为 main 的元素，它代表主要内容。我们要做的是异步加载主菜单中链接引用的页面的主要内容，理想情况下，其 ID 为 main-menu。我们只想检索此元素内部的内容，因为布局的其他部分不会更改，因此不需要加载它们。

这种方法旨在作为一种增强，因为如果访问网站的用户禁用了 JavaScript，他们仍然可以使用通常的同步机制浏览网站。我们希望实现此功能，因为它可以提高网站的性能。在此示例中，我们假设菜单中的所有链接都是内部链接。

使用 jQuery 和 load() 方法，我们可以使用以下代码完成此任务：

$('p').ajax(...);

等等！你能看出这段代码有什么问题吗？你们中的一些人可能会注意到，这段代码检索了引用的页面的所有 HTML 代码，而不仅仅是主要内容。执行此代码会导致类似于有两个镜子，一个在另一个前面：你看到一个镜子在一个镜子里面，在一个镜子里面，依此类推。我们真正想要的是只加载目标页面的主要内容。

为了解决这个问题，jQuery 允许我们在指定的 URL 后立即添加一个选择器。使用 load() 方法的此功能，我们可以将之前的代码改写为：

$.ajax(...);

这次我们检索页面，然后过滤 HTML 代码，只注入 ID 为 main 的元素的后代。我们包含了通用选择器（*），因为我们希望避免在 #main 元素内有 #main 元素；我们只想要 #main 内的内容，而不是 #main 本身。

这个例子很好，但它只显示了可用参数之一的使用。让我们看看更多代码！

使用回调函数与 load()

回调参数可用于通知用户操作的完成情况。让我们最后一次更新之前的示例，以使用它。

这次我们假设我们有一个 ID 为 notification-bar 的元素，它将用作……好吧，通知栏。

load(url[, data][, callback])

掌握了 load() 后，让我们将注意力转移到下一个方法。

$.post()

有时我们不仅想将服务器返回的内容注入到一个或多个元素中。我们可能想要检索数据，然后在检索数据后决定如何处理它。为此，我们可以使用 $.post() 或 $.get() 方法。

它们在功能上相似（向服务器发出请求），并且在签名和接受的参数方面相同。唯一的区别是，一个发送 POST 请求，另一个发送 GET 请求。很明显，不是吗？

如果你不记得 POST 请求和 GET 请求之间的区别，如果我们的请求有可能导致服务器端状态发生变化，从而导致不同的响应，则应使用 POST。否则，它应该是一个 GET 请求。

$.post() 方法的签名是：

$('p').ajax(...);

参数如下所述：

• url：指定要向其发送请求的资源的 URL 的字符串；
• data：jQuery 将作为 POST 请求的一部分发送的可选字符串或对象；
• callback：请求成功后执行的回调函数。在回调函数内部，上下文 (this) 设置为表示在调用中使用的 Ajax 设置的对象。
• type：一个可选字符串，用于指定如何解释响应正文。接受的值为：html、text、xml、json、script 和 jsonp。这也可以是多个以空格分隔的值的字符串。在这种情况下，jQuery 将一种类型转换为另一种类型。例如，如果响应是文本，而我们希望将其视为 XML，我们可以编写“text xml”。如果省略此参数，则响应文本将不进行任何处理或评估就传递给回调函数，并且 jQuery 会尽力猜测正确的格式。

现在你知道了 $.post() 可以做什么以及它的参数是什么，让我们编写一些代码。

假设我们有一个要填写的表单。每次字段失去焦点时，我们都希望将字段数据发送到服务器以验证其有效性。我们将假设服务器以 JSON 格式返回信息。一个典型的用例是验证用户选择的用户名是否尚未被占用。

为了实现此功能，我们可以使用 jQuery 的 $.post() 方法，如下所示：

$.ajax(...);

在此代码中，我们向由相对 URL“/user”标识的页面发送 POST 请求。我们还使用第二个参数 data 向服务器发送失去焦点的字段的名称和值。最后，我们使用回调函数来验证返回的 JSON 对象的 status 属性的值是否为 error，在这种情况下，我们将错误消息（存储在 message 属性中）显示给用户。

为了让你更好地了解这种类型的 JSON 对象可能是什么样子，这里有一个示例：

load(url[, data][, callback])

正如我所说，除了能够发出 GET 请求外，$.get() 与 $.post() 相同。因此，下一节将非常简短，我将关注一些用例，而不是重复相同的信息。

$.get()

$.get() 是 jQuery 提供的发出 GET 请求的方法之一。此方法使用指定的 URL 和提供的可选数据向服务器启动 GET 请求。请求完成后，它还可以执行回调函数。其签名如下：

$('p').ajax(...);

参数与 $.post() 方法的参数相同，因此我不会在这里重复它们。

$.get() 函数非常适合服务器始终针对给定参数集返回相同结果的情况。对于你希望用户能够共享的资源，它也是一个不错的选择。例如，对于交通服务（如火车时刻表信息），人们搜索相同的日期和时间必须获得相同的结果，GET 请求是理想的选择。此外，如果页面能够响应 GET 请求，用户就可以与朋友共享获得的结果——URL 的魔力。

结论

在本文中，我们讨论了一些 jQuery 最常用的 Ajax 简写方法。它们是执行 Ajax 请求的非常方便的方法，正如我们所看到的，在其基本版本中，只需一行代码就可以实现我们想要的功能。

请查看 jQuery 的 Ajax 简写文档，以了解有关这些方法和其他方法的更多信息。尽管我们在这里没有讨论其他内容，但你应该能够利用你在本文中获得的知识来开始使用其他方法。

(此处应添加常见问题解答部分，内容与输入文本中的常见问题解答部分相同)

以上是JQuery的简介速记Ajax方法的详细内容。更多信息请关注PHP中文网其他相关文章！