如何将jQuery的$ .ajax（）用于异步HTTP请求

最新推荐文章于 2022-06-15 15:29:57 发布

dingshi7798

最新推荐文章于 2022-06-15 15:29:57 发布

阅读量359

点赞数

文章标签： javascript 前端 php ViewUI

如今，开发人员倾向于放弃jQuery及其用于DOM操作和Ajax请求的便捷方法，从而使其广受欢迎。 关于Ajax请求， Fetch API或Axios库现在是执行异步操作的更流行的工具。 也就是说，jQuery仍然非常活跃，并且为全球近70,000个网站提供支持。 这意味着在开发人员的日常工作中，知道如何使用jQuery仍然很有价值，例如支持遗留代码库或维护使用jQuery作为重要依赖项的项目。

Ajax是一项技术，允许开发人员发出异步HTTP请求，而无需刷新整个页面。为了使该过程比纯JavaScript少一些麻烦，开发人员多年来一直在使用jQuery库。在我的文章jQuery速记Ajax方法简介中，我讨论了jQuery最常用的Ajax速记方法： $.get() ， $.post()和$.load() 。它们是在几行代码中发出Ajax请求的便捷方法。

有时，我们需要对我们要进行的Ajax调用进行更多控制。例如，我们要指定在Ajax调用失败或需要执行Ajax请求的情况下应采取的措施，但是只有在一定时间内检索到它的结果才需要。在这种情况下，我们可以依靠jQuery提供的另一个函数$.ajax() ，这是本教程的主题。

`$.ajax()`函数

jQuery $.ajax()函数用于执行异步HTTP请求。它是很久以前添加到库中的，自1.0版开始存在。 $.ajax()函数是前面提到的文章中讨论的每个函数使用预设配置在后台调用的功能。该函数的签名如下所示：

$.ajax(url[, settings])
$.ajax([settings])

url参数是一个字符串，其中包含您要通过Ajax调用访问的URL，而settings是一个对象文字，其中包含Ajax请求的配置。

在第一种形式中，此函数使用url参数和settings指定的选项执行Ajax请求。在第二种形式中，URL是在settings参数中指定的，或者可以省略，在这种情况下，将向当前页面发出请求。

下一部分将描述此功能接受的选项列表，该列表很长，因此我将简短说明。如果您想深入研究它们的含义，可以参考$.ajax()的官方文档。

`settings`参数

您可以指定许多不同的选项，以根据需要弯曲$.ajax() 。在下面的列表中，您可以找到它们的名称和描述（按字母顺序排列）：

accepts ：在请求标头中发送的内容类型，它告诉服务器它将作为回报接受哪种响应。
async ：将此选项设置为false可以执行同步请求。
beforeSend ：请求前的回调函数，可用于在发送jqXHR对象之前对其进行修改。
cache ：将此选项设置为false可强制浏览器不缓存请求的页面。
complete ：请求完成时（在执行success和error回调之后）要调用的函数。
contents ：一个对象，该对象确定库如何解析响应。
contentType ：发送到服务器的数据的内容类型。
context ：一个对象，用作所有与Ajax相关的回调的上下文（ this ）。
converters ：包含dataType到dataType转换器的对象。
crossDomain ：将此属性设置为true可以在同一域上强制跨域请求（例如JSONP）。
data ：执行Ajax请求时要发送到服务器的数据。
dataFilter ：用于处理XMLHttpRequest的原始响应数据的函数。
dataType ：服务器期望返回的数据类型。
error ：如果请求失败，将调用的函数。
global ：是否为此请求触发全局Ajax事件处理程序。
headers ：要发送到服务器的其他标headers的对象。
ifModified ：仅当自上次请求以来响应已更改时，如果您想强制请求成功，则将此选项设置为true 。
isLocal ：如果要强制jQuery将当前环境识别为“本地”，请将此选项设置为true 。
jsonp ：一个字符串，用于覆盖JSONP请求中的回调函数名称。
jsonpCallback ：指定JSONP请求的回调函数名称。
mimeType ：一个字符串，它指定要覆盖XHR mime类型的mime类型。
password ：XMLHttpRequest用来响应HTTP访问认证请求的密码。
processData ：如果您不希望传递给data选项的data （如果还没有字符串）被处理并转换为查询字符串，则将此选项设置为false 。
scriptAttrs ：定义一个具有其他属性的对象，以在“脚本”或“ jsonp”请求中使用。
scriptCharset ：在请求中使用的脚本标签上设置charset属性，但仅在使用“脚本”传输时才适用。
statusCode ：一个数字HTTP代码对象，当响应具有相应的代码时将调用该对象。
success ：如果请求成功，将调用的函数。
timeout ：一个数字，用于指定请求的超时时间（以毫秒为单位）。
traditional ：如果您希望使用传统的参数序列化样式，请将其设置为true 。
type ：要发出的请求的类型，可以是“ POST”或“ GET”。
url ：一个字符串，其中包含将请求发送到的URL。
username ：XMLHttpRequest用来响应HTTP访问认证请求的用户名。
xhr ：用于创建XMLHttpRequest对象的回调。
xhrFields ：要在本机XHR对象上设置的对象。

那是很长的清单，不是吗？好吧，作为一名开发人员，您可能在我猜的第五或第六个元素处停止阅读此列表，但这很好。下一节将更加令人兴奋，因为我们将$.ajax()函数和其中一些选项付诸实践。

放在一起

在本节中，我们将看到此功能及其一些选项的使用。

`$.ajax()`第一个示例

我们将从一个简单的演示开始，该演示复制与上一篇文章中开发的代码相同的代码，但是这次我们采用$.ajax() 。为了方便起见，下面显示的是我正在谈论的代码：

$('#main-menu a').on('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');
    }
  });
});

更新此代码段以使用$.ajax()函数，我们获得以下代码：

$('#main-menu a').on('click', function(event) {
  event.preventDefault();

  $.ajax(this.href, {
    success: function(data) {
      $('#main').html($(data).find('#main *'));
      $('#notification-bar').text('The page has been successfully loaded');
},
    error: function() {
      $('#notification-bar').text('An error occurred');
    }
  });
});

在这里您可以看到我使用了函数的第一种形式。我已指定将请求发送到的URL作为第一个参数，然后将设置对象发送为第二个参数。后者仅利用上一节中讨论的几个属性中的两个（ success和error ）来分别指定在请求成功或失败的情况下该怎么做。

使用`$.ajax()`从Joined.in检索演讲

我要讨论的第二个示例创建一个JSONP请求，以从名为Joind.in的服务中检索一些信息。后者是一个网站，活动参与者可以在该网站上留下有关活动及其会话的反馈。具体来说，我将创建一个代码段，使用$.ajax()函数， 以PHP开发人员的眼光检索我的演讲Modern前端的标题和描述。

实现此目标的代码如下：

$.ajax({
  url: 'http://api.joind.in/v2.1/talks/10889',
  data: {
    format: 'json'
  },
  error: function() {
    $('#info').html('<p>An error has occurred</p>');
  },
  dataType: 'jsonp',
  success: function(data) {
    var $title = $('<h1>').text(data.talks[0].talk_title);
    var $description =  $('<p>').text(data.talks[0].talk_description);
    $('#info')
    .append($title)
    .append($description);
  },
  type: 'GET'
});

在上面的代码段中，我使用了上面列出的几个属性。首先，您可以看到我正在使用第二种形式的$.ajax() ，它使我可以将请求发送到的URL指定为对象文字的属性（ url ）。由于Joined.in的API接受JSONP请求，因此在上面的代码中，我通过指定dataType属性来设置要使用的请求类型。然后，我使用data属性来定义要根据API要求从服务器获取的格式类型。但是，后者需要此数据作为GET请求的查询字符串的一部分，因此我还要指定将GET设置为其值的type属性。最后，我编写了一个error回调以在出现错误的情况下显示一条消息，并编写了一个success回调以在success情况下显示讲话的标题和说明。

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