Ajax 异步通信基础

jcLee95 的个人博客

已入驻阿里云博客

邮箱 ：291148484@163.com

本文地址：

- https://developer.aliyun.com/article/

- https://blog.csdn.net/qq_28550263/article/details/125801370

目 录

1. Ajax 概述

• 1.1 什么是 Ajax
• 1.2 Ajax 的优势 和 缺点

2. Ajax 的使用

• 2.1 体验 Jquery 中使用 ajax
  
• 2.2 创建一个 Ajxa 对象

• 2.2.1 IE 浏览器（已经淘汰）
• 2.2.2 chrome 等浏览器

• 2.3 使用 Ajax 发送请求

• 2.3.1 配置请求信息
• 2.3.2 配置请求头
• 2.3.3 使用send()方法发送请求
• 2.3.4 添加事件监听

• 2.3.4.1 关于 EventTarget
• 2.3.4.2 注册事件监听器
• 2.3.4.3 删除事件监听器
• 2.3.4.4 分派事件到目标对象

• 2.3.5 示范1：发起 GET 请求
• 2.3.6 示范2：发起 POST 请求
• 2.3.7 同步与异步

• 2.4 Ajax 事件
  

3. jQuery 中的 Ajax

• 3.1 概述
• 3.2 $.ajax() 方法

• 3.2.1 概述
• 3.2.2 关于 ajax() 方法的设置
• 3.2.3 更多例子

• 3.3 $.load() 方法

• 3.3.1 概述
• 3.3.2 回调函数
• 3.3.3 页面片段的加载
• 3.3.4 脚本的执行

• 3.4 $.get() 方法 和 $.post() 方法

• 3.4.1 $.get() 方法
• 3.4.2 $.post() 方法

• 3.5 $.getScript() 方法 和 $.getJSON() 方法

• 3.5.1 $.getScript() 方法
• 3.5.2 $.getJSON() 方法

• 3.6 序列化

• 3.6.1 概述
• 3.6.2 serialize()方法
• 3.6.3 serializeArray() 方法
• 3.6.4 $param() 方法

1. Ajax 概述

1.1 什么是 Ajax

Ajax 全称为 async javascript and XML，即 异步JavaScript和XML ，它使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。XMLHttpRequest 对象是称为 Ajax（异步 JavaScript 和 XML）的技术的一部分。使用 Ajax 后可以使用 XMLHttpRequest API 在浏览器和服务器之间传递数据，而无需重新加载网页。Ajax 请求由 JavaScript 代码触发，当你的代码向 URL 发送请求后收到响应时，可以触发回调函数来处理响应。因为请求是异步的，所以您的其余代码会在处理请求时继续执行，因此必须使用回调来处理响应。

1.2 Ajax 的优势 和 缺点

从使用来看，Ajax 不需要插件的支持，是需要使用原生的JavaScript。从体验效果上看，使用 Ajax 不需要刷新页面就可以异步地更新页面上地数据，因此用户体验将更好。从服务器角度来看，可以减小服务器带宽地负担，因为用户只需要页面上地一小片数据时，不会再需要重新请求整个页面。

Ajax 目前对搜索引擎不很友好，或者说因为爬虫技术目前无法很好地应对 Ajax 异步数据处理问题，更多地停留在解析页面已经有地数据。即使是 google 和 bing ，在处理异步数据时也不会等待到异步数据全部加载完成。因此为了让网页被搜索引擎捕捉到时，需要做 SEO （搜索引擎优化）。

2. Ajax 的使用

2.1 体验 Jquery 中使用 ajax

$.ajax({
    url: "./xxx.xxx",                    // 请求的地址
    sucess: function(json_str){          // 请求成功后，拿着返回的字符串，一般时json，进一步相应处理
        var arr = JSON.parse(json_str);
        //...
    }
})

2.2 创建一个 Ajxa 对象

我们习惯上将一个 Ajax 对象简称为 xhr，它在不同浏览器中的使用方式有所不同。

2.2.1 IE 浏览器（已经淘汰）

IE9 以下版本

const xhr = new ActiveXObject('Microsoft.XMLHTTP');

IE9及以上版本

const xhr = new XMLHttpRequest();

2.2.2 chrome等浏览器

const xhr = new XMLHttpRequest();

2.3 使用 Ajax 发送请求

2.3.1 配置请求信息

创建 XMLHttpRequest 实例对象后（以下称xhr），可以使用 xhr 的相关方法。在其提供的诸方法中，使用open()方法来配置请求信息：

xhr.open(method, url);
xhr.open(method, url, async);
xhr.open(method, url, async, user);
xhr.open(method, url, async, user, password);

XMLHttpRequest .open()方法用于初始化一个请求代码。XMLHttpRequest .open()方法的参数含义如下：

2.3.2 配置请求头

使用XMLHttpRequest.setRequestHeader()方法可以设置 HTTP 请求头。该方法必须在 open() 方法和 send() 之间调用。如果多次对同一个请求头赋值，只会生成一个合并了多个值的请求头。其语法格式为：

xhr.setRequestHeader(header, value);

该方法的参数含义如下：

2.3.3 使用send()方法发送请求

XMLHttpRequest.send() 方法用于发送 HTTP 请求。如果是异步请求（默认为异步请求），则此方法会在请求发送后立即返回；如果是同步请求，则此方法直到响应到达后才会返回。XMLHttpRequest.send() 方法接受一个可选的参数，其作为请求主体；如果请求方法是 GET 或者 HEAD，则应将请求主体设置为 null。其格式为：

xhr.send();
xhr.send(ArrayBuffer data);
xhr.send(ArrayBufferView data);
xhr.send(Blob data);
xhr.send(Document data);
xhr.send(DOMString? data);
xhr.send(FormData data);

其中，参数 body 为在 XHR 请求中要发送的数据体，格式上看，它可以是：

• document： 在这种情况下，它在发送之前被序列化。
• XMLHttpRequestBodyInit：是从 per the Fetch spec （规范中）可以是 Blob, BufferSource, FormData, URLSearchParams, 或者 USVString 对象。
• null

默认值：如果 body 没有指定值，则默认值为 null 。

2.3.4 事件监听与处理

作为 XMLHttpRequest 实例的属性之一，所有浏览器都支持 onreadystatechange。后来许多浏览器实现了一些额外的事件（onload、onerror、onprogress 等）更多现代浏览器，包括 Firefox，除了可以设置 on* 属性外，也提供标准的监听器 addEventListener() API 来监听 XMLHttpRequest 事件。

2.3.4.1 关于 EventTarget

EventTarget 是一个 DOM 接口，由可以接收事件、并且可以创建侦听器的对象实现。Element，document 和 window 是最常见的 event targets 。本文中的XMLHttpRequest 对象也可以作为 event targets。

2.3.4.2 注册 事件监听器

使用 EventTarget.addEventListener() 方法将指定的监听器注册到 EventTarget 上。本节中，监听的是 XMLHttpRequest 事件，以一个 xhr 为 target。addEventListener 方法的语法格式为：

// 此处 target 即 xhr
xhr.addEventListener(type, listener, options);
xhr.addEventListener(type, listener, useCapture);

2.3.4.3 删除 事件监听器

EventTarget.removeEventListener() 方法用于从EventTarget 中删除事件监听器。该方法的语法格式为：

target.removeEventListener(type, listener[, options]);
target.removeEventListener(type, listener[, useCapture]);

其中参数：

参数 options 的可选项有：

• capture: 一个 Boolean 表示这个类型的事件将会被派遣到已经注册的侦听器，然后再派遣到 DOM 树中它下面的任何 EventTarget。
• mozSystemGroup（非标准）: 仅可运行于 XBL 或者 Firefox Chrome，它是一个 Boolean，用于定义是否将侦听器添加到系统组。

2.3.4.4 分派 事件到目标对象

EventTarget.dispatchEvent() 方法用于将事件分派到此 EventTarget。当 EventTarget 为 XMLHttpRequest 对象时，即分派到你创建的 xhr 对象。dispatchEvent() 方法的语法格式为：

cancelled = !target.dispatchEvent(event)

其中参数如下：

2.3.5 示范1：发起 GET 请求

// 1. 创建 xht 对象
var xhr = new XMLHttpRequest();
// 2. 配置请求参数
xhr.open('GET', '/server', true);
// 3. 定义回调
xhr.onload = function () {
   // 请求结束后，在此处写处理代码
};
// 4. 执行请求，可以多次调用 send方法 执行不同请求
xhr.send(null);
xhr.send('string');
xhr.send(new Blob());
xhr.send(new Int8Array());
xhr.send(document);
// xhr.send(...)

2.3.6 示范2：发起 POST 请求

// 1. 创建 xht 对象
var xhr = new XMLHttpRequest();
// 2. 配置请求参数
xhr.open("POST", '/server', true);
//发送合适的请求头信息
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// 3. 定义回调
xhr.onload = function () {
    // 请求结束后，在此处写处理代码
};
// 4. 执行请求，可以多次调用 send方法 执行不同请求
xhr.send("foo=bar&lorem=ipsum");
xhr.send('string');
xhr.send(new Blob());
xhr.send(new Int8Array());
xhr.send(document);
// xhr.send(...)

2.3.7 同步与异步

2.3.8 请求的终止

XMLHttpRequest.abort() 方法 用于终止一个已被发出的请求，其语法格式为：

xhrInstance.abort();

例如：

var xhr = new XMLHttpRequest();
xhr.open('GET', '/server', true);
xhr.send();
xhr.send();
if (YOUR_CONDITION) {
  xhr.abort();
}

2.4 Ajax 事件

jQuery 中的 Ajax事件

Ajax请求产生许多不同的事件，您可以订阅这些事件。有两种类型的事件:Local 事件和 Global 事件。这是Ajax事件的完整列表，按照事件被触发的顺序排列。每个Ajax请求都会触发缩进事件(除非设置了全局选项)。ajaxStart 和 ajaxStop事件是与所有Ajax请求相关的事件。

3. jQuery 中的 Ajax

3.1 概述

从上文我们知道不同的浏览器以不同的方式实现 Ajax API，这意味着开发人员必须考虑所有不同的浏览器以确保 Ajax 可以通用，因此我们开发者更希望有一种统一的Ajax调用方式，恰好 jQuery 提供了 Ajax 支持，可以抽象出令人痛苦的浏览器差异，这就是为什么我们为什么要在这里介绍 jQuery 中的 Ajax。jQuery 既提供了一个功能齐全的$.ajax()方法，也提供了简单的便捷方法，例如$.get()、$.getScript()、$.getJSON()、$.post()和$().load()。jQuery 对这些 Ajax 的封装分为三个层次：

3.2 $.ajax() 方法

3.2.1 概述

$.ajax()方法是一种强大而直接的创建 Ajax 请求的方法，是 jQuery 中提供的一个选项式API。它需要一个配置对象，其中包含 jQuery 完成请求所需的所有指令。这种方法提供了指定请求 成功 和 失败 回调的能力，这启发了 ECMAScript 中 Promise 的诞生。该方法的语法格式如下：

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

其中参数：

3.2.2 关于 ajax() 方法的设置

3.2.3 更多例子

【eg1】

// 使用核心 $.ajax() 方法
$.ajax({
    // 当前请求的 URL
    url: "post.php",
    // 要发送的数据 (将被转换为查询字符串)
    data: {
        id: 123
    },
    // 无论这是POST还是GET请求
    type: "GET",
    // 我们期望返回的数据类型
    dataType : "json",
})
  // 请求成功(完成)时运行的代码
  // 响应被传递给该函数
  .done(function( json ) {
     $( "<h1>" ).text( json.title ).appendTo( "body" );
     $( "<div class=\"content\">").html( json.html ).appendTo( "body" );
  })
  // 请求失败时要运行的代码
  // 原始请求和状态代码被传递给该函数
  .fail(function( xhr, status, errorThrown ) {
    alert( "Sorry, there was a problem!" );
    console.log( "Error: " + errorThrown );
    console.log( "Status: " + status );
    console.dir( xhr );
  })
  // 不管成功或失败都要运行的代码
  .always(function( xhr, status ) {
    alert( "The request is complete!" );
  });

【eg2】：

$.ajax({
  // 请求头将告诉服务器它将接受什么样的响应作为回应
  accepts: {
    mycustomtype: 'application/x-some-custom-type'
  },
  // 有关如何反序列化 `mycustomtype` 的说明
  converters: {
    'text mycustomtype': function(result) {
      // Do Stuff
      return newresult;
    }
  },
  // 期待一个从服务器返回的 `mycustomtype`
  dataType: 'mycustomtype'
});

【eg3】

指定一个DOM元素作为上下文将使它成为请求的完整回调的上下文：

$.ajax({
  url: "test.html",
  context: document.body
}).done(function() {
  $( this ).addClass( "done" );
});

【eg4】

当响应状态为404时，将发出以下警报：

$.ajax({
  statusCode: {
    404: function() {
      alert( "page not found" );
    }
  }
});

【eg5】

$.ajax({
   url: a_cross_domain_url,
   xhrFields: {
      withCredentials: true
   }
});

3.3 $.load() 方法

3.3.1 概述

load() 方法用于从web 服务器上获取静态的数据文件，能载入远程 HTML 代码并将其插入到 DOM 中，其语法格式为：

$.load( url [, data ] [, complete ] )

其中参数：

这个方法是从服务器获取数据的最简单的方法。类似于 $.get(url, data, success)， 其区别在于 load() 是一个方法而不是全局函数，并且它有一个 隐式回调函数。当检测到成功响应时（即，当 textStatus 为 success 或 notmodified时）。load() 将匹配元素的HTML内容 置为 返回的数据。如果选择器没有匹配的元素，则Ajax请求将不会被发送。

使用该方法时，如果传入的 data 为一个对象时将使用POST 请求，否则使用 GET 请求。

3.3.2 回调函数

3.3.3 页面片段的加载

与 $.get() 不同， .load() 方法允许我们指定要插入的远程文档的一部分。这是通过url参数的特殊语法实现的。如果字符串中包含一个或多个空格字符，则第一个空格后面的字符串部分被认定为 jQuery选择器，它确定要加载的内容。

jQuery使用浏览器的. innerHTML 属性解析检索到的文档，并将其插入到当前文档中。在这个过程中，浏览器通常会过滤文档中的元素，比如 <html>、<title>或 <head> 元素。因此，由 .load()方法可能与通过浏览器直接检索的文档不完全相同。

3.3.4 脚本的执行

当使用不带后缀选择器表达式的 URL 调用 . load() 时，内容会在删除脚本之前传递到 . html()。这将在脚本块被丢弃之前执行它们。但是，如果调用 .load() 时在 URL 后面附加了一个选择器表达式，那么脚本会在 DOM 更新之前被删除，因此不会被执行。

比如下面作为文档的一部分加载到#a中的任何JavaScript都将成功执行：

$( "#a" ).load( "xxx.html" );

而下面被加载到#b中的文档中的脚本块被剥离并且不被执行：

$( "#b" ).load( "xxx.html #target" );

例：将另一页的列表项加载到有序列表中

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>demo</title>
  <script src="/static/js/jquery-3.5.0.js"></script>
  <script>
    $( "#new-projects" ).load( "xxx.html #projects li" );
  </script>
</head>
<body>
 <ol id="new-projects"></ol>
</body>
</html>

其中上面用到的，xxx.html 的内容为：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>xxx Page</title>
</head>
<body>
<h1>Popular jQuery Projects</h1>
<ul id="projects">
  <li>jQuery</li>
  <li>jQuery UI</li>
  <li>jQuery Mobile</li>
  <li>QUnit</li>
  <li>Sizzle</li>
</ul>
</body>
</html>

注：由于浏览器安全限制，大多数“Ajax”请求都遵循同源策略。请求无法从不同的域、子域、端口或协议成功检索数据。

3.4 $.get() 方法 和 $.post() 方法

这两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。比较而言，GET 和 POST请求方式都可以用来提交数据，只不过不同的是 GET 提交参数一般显示在 URL 上，POST 通过表单提交不会显示在 URL 上，因此 POST 更具隐蔽性。GET 请求保留在浏览器历史记录中，而POST 请求不会保留在浏览器历史记录中。由于GET 提交参数一般显示在 URL 上，因此GET 请求有长度限制，而POST 请求对数据长度没有要求。