聊聊如何将jQuery的$.ajax()用于异步HTTP请求

作者：Terry2020.05.25来源：Web前端之家浏览：9409评论:0

现在是框架盛行的时期，但是技术归根于本，为什么这样说呢？举个例子，之前部门找一个前端，面试了一些童鞋，发现很多都只知道用框架去开发项目，问了一些原生基础的知识，回答不出来。可以这么说吧，框架“伤害” 了他们。所以建议大家学习前端，必须从基础学起，然后再去应用框架，这样你才会成为一位优秀的前端开发工程师。

回到主题，今天给大家回忆下“jQuery的$.ajax()用于异步HTTP请求”的技术。

有童鞋就问了，现在谁还用jQuery？其实如果你只是做一个简单的页面，用很简单的代码搞定了，你还要用去框架？

废话不多说，开始学习吧！

描述

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指定的参数和选项执行Ajax请求settings。在第二种形式中，URL是在settings参数中指定的，或者可以省略，在这种情况下，将向当前页面发出请求。

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

该`settings`参数

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

accepts：在请求标头中发送的内容类型，它告诉服务器它将接受哪种响应。
async：将此选项设置false为执行同步请求。
beforeSend：请求前的回调函数，可用于jqXHR在发送对象之前对其进行修改。
cache：设置此选项可false强制浏览器不缓存请求的页面。
complete：请求完成时（执行after success和errorcallbacks）将要调用的函数。
contents：确定库将如何解析响应的对象。
contentType：发送到服务器的数据的内容类型。
context：一个对象，用作this所有与Ajax相关的回调的上下文（）。
converters：包含dataType到dataType转换器的对象。
crossDomain：将此属性设置true为在同一域上强制执行跨域请求（例如JSONP）。
data：执行Ajax请求时要发送到服务器的数据。
dataFilter：用于处理XMLHttpRequest的原始响应数据的函数。
dataType：期望从服务器返回的数据类型。
error：如果请求失败，将调用的函数。
global：是否为此请求触发全局Ajax事件处理程序。
headers：附加标头的对象发送给服务器。
ifModified：将此选项设置true为仅当自上一个请求以来响应已更改时才想强制请求成功。
isLocal：true如果要强制jQuery将当前环境识别为“本地”，请设置此选项。
jsonp：一个字符串，用于覆盖JSONP请求中的回调函数名称。
jsonpCallback：指定JSONP请求的回调函数名称。
mimeType：一个字符串，用于指定要覆盖XHR MIME类型的MIME类型。
password：与XMLHttpRequest一起用于响应HTTP访问认证请求的密码。
processData：false如果您不希望传递到该data选项的数据（如果还没有字符串）被处理并转换为查询字符串，则将该选项设置为。
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-分别指定在请求成功或失败的情况下该怎么做。

从Joined.in中检索讲话 `$.ajax()`

我要讨论的第二个示例创建一个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请求的查询字符串的一部分，因此我还将type属性设置指定GET为其值。最后，我编写了一个error回调以在出现错误的情况下显示一条消息，success 回调，以在成功的情况下显示演讲的标题和描述。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="action-button">Click me to load info!</button>
    <div id="info"></div>
    <small>Demo created by <a href="https://www.jiangweishan.com">Web前端之家</a></small>

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
        $('#action-button').click(function() {
            $.ajax({
                url: 'https://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'
            });
        });
    </script>
</body>
</html>