如果您从未听说过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 ，代表主要内容。 我们要做的是异步加载由主菜单中的链接所引用的页面的主要内容，理想情况下，其main-menu为ID。 我们只想检索此元素内的内容，因为布局的其他部分不会更改，因此不需要加载它们。

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

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

$('#main-menu a').click(function(event) {// Prevents the default behavior which is// to load the page synchronouslyevent.preventDefault();// Load the HTML code referenced by this.href// into the element having ID of #main$('#main').load(this.href);});

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

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

$('#main-menu a').click(function(event) {event.preventDefault();$('#main').load(this.href + ' #main *');});

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

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

通过load()使用回调

callback参数可用于通知用户该操作已完成。 让我们最后一次更新上一个示例，以使用它。

这次，我们假设我们有一个具有notification-bar ID的元素，该ID将被用作……通知栏。

$('#main-menu a').click(function(event) {event.preventDefault();$('#main').load(this.href + ' #main *', function(responseText, status) {if (status === 'success') {$('#notification-bar').text('The page has been successfully loaded');} else {$('#notification-bar').text('An error occurred');}});});

下面显示了此代码的实时演示，并对演示进行了一些小的改进：

请参阅CodePen上SitePoint （ @SitePoint ） 提供的load（）的Pen jQuery Ajax示例 。

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

$.post()

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

它们的工作方式相似（执行对服务器的请求），并且其签名和接受的参数相同。 唯一的区别是，一个发送POST请求，另一个发送GET请求。 很明显，不是吗？

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

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

$.post(url[, data][, callback][, type])

参数说明如下：

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

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

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

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

$('input').blur(function() {var data = {};data[this.name] = this.value;$.post('/user',data,function(responseText) {if (responseText.status === 'error') {$('#notification-bar').html('<p>' + responseText.message + '<p>');}});});

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

为了让您更好地了解这种JSON对象的外观，下面是一个示例：

{"status": "error","message": "Username already in use"
}

该代码的实时演示如下所示：

请参阅CodePen上SitePoint （ @SitePoint ）的Pen Ajax $ .post / $ 。get 示例 。

注意：CodePen上的代码要求使用GET请求而不是POST才能使Ajax起作用，但是该想法仍然适用。

如我所说， $.get()除了具有发出GET请求的能力外，与$.post()相同。 因此，下一节将很短，我将重点介绍一些用例，而不是重复相同的信息。

$.get()

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

$.get(url[, data][, callback][, type])

参数与$.post()方法的参数相同，因此在此不再赘述。

$.get()函数非常适合那些服务器始终为给定参数集返回相同结果的情况。 对于您希望用户能够共享的资源来说，这也是一个不错的选择。 例如，GET请求是运输服务（例如火车时刻表信息）的理想选择，因为人们需要搜索相同的日期和时间才能获得相同的结果。 此外，如果页面能够响应GET请求，则用户将能够与朋友共享获得的结果-URL的魔力。

结论

在本文中，我们讨论了jQuery最常用的Ajax速记方法。 它们是执行Ajax请求的非常方便的方法，并且如我们所见，在其基本版本中，仅用一行代码即可实现我们想要的功能。

查看jQuery的Ajax速记文档，以获取有关这些方法和其他方法的更多信息。 尽管这里没有讨论其他内容，但是您应该也可以使用在本文中获得的知识来开始与其他人一起工作。

From: https://www.sitepoint.com/introduction-jquery-shorthand-ajax-methods/