1. 犀牛前端部落首页
  2. jQuery百科

jQuery $.ajax()教程与示例

如今,前端开发者倾向于放弃jQuery及其用于DOM操作和Ajax请求的简便方法,而正是这些方法使jQuery大受欢迎。

对于Ajax请求,Fetch APIAxios库现在是执行异步操作的更流行的工具。尽管如此,jQuery仍然非常活跃,为全球近7万个网站提供了强大的支持。

这意味着了解如何使用jQuery在开发人员的日常工作中仍然是有价值的,比如支持遗留代码库或维护使用jQuery作为重要依赖项的项目。

jQuery $.ajax()教程与示例

Ajax是一种技术,它允许开发人员在不需要刷新整个页面的情况下发出异步HTTP请求。为了使这个过程不像在纯JavaScript中那么麻烦,开发人员已经使用jQuery库很多年了。

在介绍jQuery简写Ajax方法的文章中,俺讨论了一些最常用的jQuery简写方法:$.get()、$.post()和$.load()。它们是在几行代码中发出Ajax请求的简写方法。

有时候,我们需要对Ajax调用进行更多的控制。例如,我们希望指定在Ajax调用失败或需要执行Ajax请求时应该发生什么,但是只有在一定时间内检索到请求的结果时才需要它。在这种情况下,我们可以依赖于jQuery提供的另一个函数$.ajax(),这是这篇文章希望告诉大家的。

$.ajax方法

jQuery $.ajax()函数用于执行异步HTTP请求。它是很久以前添加到库中的,从1.0版就已经存在了。ajax()函数是前面提到的文章中讨论的每个函数使用预设配置在后台调用的函数。该函数的使用方法如下:

/**
* 犀牛前端部落
* https://www.pipipi.net/
*/
$.ajax(url[, settings])
$.ajax([settings])

url参数是一个字符串,其中包含你希望通过Ajax调用访问的url,而settings是一个对象文本,其中包含Ajax请求的配置。

在第一个表单中,该函数使用url参数和设置中指定的选项执行Ajax请求。在第二种形式中,URL在settings参数中指定,或者可以省略,在这种情况下,请求被发送到当前页面。

在下一节中描述的这个函数所接受的选项的列表非常长,所以我将它们的描述保持简短。如果您想深入研究它们的含义,可以参考$.ajax()的官方文档。

设置参数

可以指定许多不同的选项来根据需要调整$.ajax()。在下面的列表中,你可以找到他们的名字和他们的描述按字母顺序排列:

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

这他niang的看起来也太长了吧?

其实作为开发人员,我们需要熟悉的只要5 、6个就行了,接下来俺将把$.ajax()函数和其中一些选项付诸实践。

实践

$.ajax()的第一个例子

我们将从一个简单的演示开始,我们将采用$.ajax()。代码示例如下所示:

/**
* 犀牛前端部落
* https://www.pipipi.net
*/
$('#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()函数替换掉上面的代码,我们得到如下代码:

/**
* 犀牛前端部落
* https://www.pipipi.net
*/
$('#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指定为第一个参数,然后将设置对象指定为第二个参数。

后者仅利用上一节讨论的几个属性中的两个—成功和错误—来分别指定请求成功或失败时应该做什么。

使用ajax获取 Joind.in 数据

俺要大家讨论的第二个示例创建一个JSONP请求来从Joind .in的服务中获取数据。

后者是一个活动参与者可以对活动及其会议留下反馈的网站。具体来说,我将创建一个代码片段,使用$.ajax()函数从PHP开发人员的角度检索我的talk Modern前端的标题和描述。

/**
* 犀牛前端部落
* https://www.pipipi.net
*/
$.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。

因为Join.d在API中接受JSONP请求,在上面的代码中,我通过指定dataType属性来设置希望使用的请求类型。

然后,我使用data属性来定义格式的类型,我希望根据API的要求从服务器获得这种格式。

但是,后者需要将这些数据作为GET请求的查询字符串的一部分,因此我还将type属性设置GET指定为它的值。最后,我编写了一个错误回调以在出错时显示消息,并编写了一个成功回调以在成功时显示演讲的标题和描述。

结论

在本教程中,我讨论了jQuery提供的最强大的Ajax函数$. Ajax()。它允许您执行Ajax请求,并在很大程度上控制如何将请求发送到服务器以及如何处理响应。

为了更好地理解这个函数的潜力,俺强烈建议您尝试使用代码示例,并尝试修改代码以使用settings参数所接受的一些其他选项,看看你的代码最后会不会出现你想要的结果。

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/3065.html

发表评论

登录后才能评论