Ajax 异步通信基础
jcLee95 的个人博客
邮箱 ：291148484@163.com
CSDN 主页：https://blog.csdn.net/qq_28550263?spm=1001.2101.3001.5343
本文地址：https://blog.csdn.net/qq_28550263/article/details/125801370
- 3.1 概述
- 3.2
$.ajax()方法 - 3.3
$.load()方法 - 3.4
$.get()方法 和$.post()方法 - 3.5
$.getScript()方法 和$.getJSON()方法 - 3.6 序列化
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()方法的参数含义如下：
| 参数 | 描述 | 备注 |
|---|---|---|
method |
要使用的 HTTP 方法，比如 GET、POST、PUT、DELETE、等。对于非 HTTP(S) URL 被忽略。 | 必要参数 |
url |
一个 DOMString 表示要向其发送请求的 URL | 必要参数 |
async |
一个可选的布尔参数，表示是否异步执行操作，默认为 true。如果值为 false，send() 方法直到收到答复前不会返回。如果 true，已完成事务的通知可供事件监听器使用。如果 multipart 属性为 true 则这个必须为 true，否则将引发异常 | 可选参数 |
user |
用户名用于认证用途；默认为 null | 可选参数 |
password |
可选的密码用于认证用途，默认为 null。 | 可选参数 |
2.3.2 配置请求头
使用XMLHttpRequest.setRequestHeader()方法可以设置 HTTP 请求头。该方法必须在 open() 方法和 send() 之间调用。如果多次对同一个请求头赋值，只会生成一个合并了多个值的请求头。其语法格式为：
xhr.setRequestHeader(header, value);
该方法的参数含义如下：
| 参数 | 描述 |
|---|---|
| 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]);
其中参数：
| 参数 | 描述 | 说明 |
|---|---|---|
type |
一个字符串，表示需要移除的事件类型，如 “click” | 必须参数 |
listener |
需要从目标事件移除的 EventListener 函数 | 必须参数 |
options |
一个指定事件侦听器特征的可选对象。 | 可选参数 |
useCapture |
指定需要移除的 EventListener 函数是否为捕获监听器。如果无此参数，默认值为 false | 可选参数 |
参数 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)
其中参数如下：
| 参数 | 描述 |
|---|---|
| event | 是要被派发的事件对象 |
| target | 被初始化使用和决定触发事件目标 |
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 事件
| 事件 | 描述 | 说明 |
|---|---|---|
abort |
当 request 被停止时触发，例如当程序调用 XMLHttpRequest.abort() 时 | 也可以使用 onabort 属性。 |
error |
当 request 遭遇错误时触发 | 也可以使用 onerror 属性 |
load |
XMLHttpRequest请求成功完成时触发 | 也可以使用 onload 属性。 |
loadend |
当请求结束时触发，无论请求成功 ( load) 还是失败 (abort 或 error) | 也可以使用 onloadend 属性。 |
loadstart |
接收到响应数据时触发 | 也可以使用 onloadstart 属性。 |
progress |
当请求接收到更多数据时，周期性地触发 | 也可以使用 onprogress 属性。 |
timeout |
在预设时间内没有接收到响应时触发 | 也可以使用 ontimeout 属性。 |
jQuery 中的 Ajax事件
Ajax请求产生许多不同的事件，您可以订阅这些事件。有两种类型的事件:Local 事件和 Global 事件。这是Ajax事件的完整列表，按照事件被触发的顺序排列。每个Ajax请求都会触发缩进事件(除非设置了全局选项)。ajaxStart 和 ajaxStop事件是与所有Ajax请求相关的事件。
| 事件 | 类型 | 描述 |
|---|---|---|
| ajaxStart | Global 事件 | 如果启动了一个Ajax请求，并且当前没有其他Ajax请求正在运行，则会触发此事件。 |
beforeSend |
Local 事件 |
这个事件在Ajax请求启动之前触发，允许您修改XMLHttpRequest对象(如果需要，设置附加的头)。) |
| Global事件 | 这个全局事件也是在请求运行之前触发的。 | |
success |
Local 事件 |
只有当请求成功时(服务器没有错误，数据没有错误)，才会调用此事件。 |
| Global 事件 | 只有当请求成功时，才会调用此事件。 | |
error |
Local 事件 |
只有当请求出错时，才会调用此事件(一个请求不能同时有错误和成功的回调)。 |
| Global 事件 | 此全局事件的行为与本地错误事件相同。 | |
complete |
Local 事件 |
无论请求是否成功，都会调用此事件。即使是同步请求，您也总是会收到完整的回调。 |
| Global 事件 | 该事件的行为与complete事件相同，每次Ajax请求完成时都会被触发。 | |
| ajaxStop | Global 事件 | 如果不再有Ajax请求被处理，就会触发这个全局事件。 |
3. jQuery 中的 Ajax
3.1 概述
从上文我们知道不同的浏览器以不同的方式实现 Ajax API，这意味着开发人员必须考虑所有不同的浏览器以确保 Ajax 可以通用，因此我们开发者更希望有一种统一的Ajax调用方式，恰好 jQuery 提供了 Ajax 支持，可以抽象出令人痛苦的浏览器差异，这就是为什么我们为什么要在这里介绍 jQuery 中的 Ajax。jQuery 既提供了一个功能齐全的$.ajax()方法，也提供了简单的便捷方法，例如$.get()、$.getScript()、$.getJSON()、$.post()和$().load()。jQuery 对这些 Ajax 的封装分为三个层次：
| 层次 | 描述 | |
|---|---|---|
| 第1层 | $.ajax() |
|
| 第2层 | $.load()、$.get()、$.post() … |
|
| 第3层 | $.getScript()、$.getJSON() |
3.2 $.ajax() 方法
3.2.1 概述
$.ajax()方法是一种强大而直接的创建 Ajax 请求的方法，是 jQuery 中提供的一个选项式API。它需要一个配置对象，其中包含 jQuery 完成请求所需的所有指令。这种方法提供了指定请求 成功 和 失败 回调的能力，这启发了 ECMAScript 中 Promise 的诞生。该方法的语法格式如下：
jQuery.ajax( url [, settings ] )
jQuery.ajax( [settings ] )
其中参数：
| 参数 | 类型 | 描述 |
|---|---|---|
url |
string |
一个字符串，包含请求发送到的URL。 |
settings |
object |
配置Ajax请求的一组键/值对。所有设置都是可选的。可以为任何带$的选项设置默认值。ajaxSetup()。有关所有设置的完整列表，请参见下面的jQuery.ajax( settings)。 |
3.2.2 关于 ajax() 方法的设置
| 设置项 | 类型 | 描述 |
|---|---|---|
accepts |
object |
是一组将 给定数据类型 映射到其 MIME类型 的键/值对，在 Accept 请求头 中发送。这个请求头将告诉服务器它将接受什么样的响应作为回报。 注意您需要在 converters 中为此类型指定一个补充条目，这样才能正常工作。参考【eg2】。 |
async |
boolean |
默认情况下，所有请求都是异步发送的(即默认设置为true)。如果需要同步请求，请将此选项设置为false。跨域请求和数据类型:“jsonp”请求不支持同步操作。请注意，同步请求可能会暂时锁定浏览器，从而在请求处于活动状态时禁用任何操作。 从jQuery 1.8开始， async: false 与 jqXHR ( $.Deferred ) 已被否决；您必须使用 success/error/complete 回调选项，而不是 jqXHR 对象的相应方法，如 jqXHR.done()。 |
beforeSend |
function ( jqXHR jqXHR， object 设置 ) |
一个请求前回调函数，可用于在发送前修改jqXHR(在jQuery 1.4.x，XMLHTTPRequest中)对象。使用它来设置自定义标题等。jqXHR 和 settings 对象作为参数传递。这是一个 Ajax事件。在beforeSend函数中返回false将取消请求。从jQuery 1.5开始，无论请求的类型是什么，beforeSend选项都会被调用。 |
cache |
boolean |
如果设置为 false，它将强制浏览器不缓存请求的页面。【注意】：将 cache 设置为 false 只能正确处理 HEAD 和 GET 请求。它通过将 “_={timestamp}” 附加到 GET 参数来工作。除了在 IE8 中当 POST 到一个已经被 GET 请求的 URL 时，其他类型的请求不需要该参数。 |
complete |
function ( jqXHR jqXHR, 字符串状态文本 ) |
请求完成时要调用的函数(在执行成功和错误回调后)。 该函数传递两个参数： jqXHR(在jQuery 1.4.x，XMLHTTPRequest中)对象 和 一个对请求状态进行分类的字符串(success、notmodified、nocontent、error、timeout、abort 或 parsererror)。从jQuery 1.5开始，完整的设置可以接受一组函数。每个函数将被依次调用。这是一个Ajax事件。 |
contents |
object |
字符串/正则表达式对的对象，在给定响应的内容类型的情况下，确定jQuery将如何解析响应。 |
contentType |
boolean 或 string |
向服务器发送数据时，使用此内容类型。 默认为 ”application/x-www-form-urlencoded；charset=UTF-8”，这对于大多数情况来说是合适的。如果你显式地将内容类型传递给 $”.ajax()，那么它总是被发送到服务器(即使没有数据被发送)。从jQuery 1.6开始，您可以传递false来告诉jQuery不要设置任何内容类型头。 【注意】：
|
context |
object |
这个对象将是所有Ajax相关回调的上下文。默认情况下，上下文是一个表示调用中使用的Ajax设置的对象( $.ajaxSettings 与传递给 $.ajax 的设置合并)。参考：【eg3】 |
converters |
object |
包含数据类型到数据类型转换器的对象。每个转换器的值都是一个函数，它返回响应的转换值。 默认值为： {"* text": window.String, "text html": true, "text json": jQuery.parseJSON, "text xml": jQuery.parseXML} |
crossDomain |
boolean |
如果希望在同一个域上强制跨域请求(如JSONP ),请将crossDomain的值设置为true。例如，这允许服务器端重定向到另一个域。 对于同源请求，默认为 false。对于跨域请求，默认为true |
data |
object、string 或者 Array |
要发送到服务器的数据。 如果 HTTP方法 不能有实体，比如 GET，那么数据将被附加到URL后面。 当数据是对象时，jQuery从对象的 键值对 生成数据字符串，除非 processData 选项设置为 false。例如，{ a: "bc", d: "e,f" } 转换为字符串 "a=bc&d=e%2Cf" 。如果值是一个数组，jQuery会根据 traditional 设置的值用相同的键序列化多个值。例如，{ a: [1,2] } 将成为字符串 "a%5B%5D=1&a%5B%5D=2" ，默认设置为 "traditional: false"。当数据作为字符串传递时，它应该已经使用正确的 contentType 编码进行了编码，默认情况下是 application/x-www-form-urlencoded。在 dataType: "json" 或 dataType: "jsonp" 的请求中，如果字符串包 含双问号(??) 或 单问号(?) 在查询字符串中，它被jQuery生成的值替换，该值对于页面上的库的每个副本都是唯一的（例如：jQuery21406515378922229067_1479880736745）。 |
dataFilter |
function => any |
用于处理XMLHttpRequest的原始响应数据的函数。 这是一个过滤响应的预过滤功能，你应该返回清理过的数据。该函数接受两个参数:从服务器返回的 原始数据 和 'dataType' 参数。 |
dataType |
string |
您期望从服务器返回的数据类型。如果没有指定，jQuery将尝试根据响应的MIME类型进行推断(XML MIME类型将产生XML，在1.4 JSON中将产生JavaScript对象，在1.4 script中将执行脚本，其他任何内容都将作为字符串返回)。 |
error |
function |
请求失败时要调用的函数。 该函数接收三个参数：
注意：跨域脚本和跨域JSONP请求不会调用此处理程序。这是一个Ajax事件。 |
global |
boolean |
是否为此请求触发全局Ajax事件处理程序。默认值为true。 可通过设置为 false以防止触发像ajaxStart或ajaxStop这样的全局处理程序。这可以用来控制各种 Ajax事件。 |
headers |
object |
使用 XMLHttpRequest 传输随请求一起发送的附加标头 键值对 的对象。总是添加头X-Requested-With:XMLHttpRequest，但是它的默认XMLHttpRequest 值可以在这里更改。还可以从beforeSend 函数中覆盖 headers 设置中的值。 |
ifModified |
boolean |
仅当自上次请求后响应发生变化时，才允许请求成功。这是通过检查最后修改的报头来完成的。默认值为false，忽略header。在jQuery 1.4中，这种技术还检查服务器指定的 "etag"来捕捉未修改的数据。 |
isLocal |
boolean |
允许当前环境被识别为"local"(例如文件系统)，即使默认情况下jQuery并不这样认为。以下协议目前被认为是 local 协议： file、 *-extension, 和 widget。如果isLocal设置需要修改，建议在$.ajaxSetup()方法中进行。 |
jsonp |
string 或 boolean |
在JSONP请求中覆盖回调函数名。在'callback=?'中将使用该值代替'callback'中查询 url字符串的一部分。因此{jsonp:'onJSONPLoad'}将导致'onJSONPLoad=?'传递给服务器。从jQuery 1.5开始，将 jsonp选项设置为false会阻止jQuery添加 "?callback" 字符串到URL或试图使用=?以转换类型。在这种情况下，还应该显式设置 jsonpCallback 设置。比如{ jsonp: false, jsonpCallback: "callbackName" }。如果你不信任Ajax请求的目标，出于安全原因，可以考虑将 jsonp属性设置为false。 |
jsonpCallback |
string 或 function |
为 JSONP请求 指定回调函数名。将使用该值代替jQuery自动生成的随机名称。 最好让jQuery生成一个唯一的名称，因为这样可以更容易地管理请求并提供回调和错误处理。 当您想要启用更好的GET请求的浏览器缓存时，您可能想要指定回调。 从jQuery 1.5开始，您还可以使用一个函数来进行这种设置，在这种情况下， jsonpCallback 的值被设置为该函数的返回值。 |
method |
string |
用于请求的HTTP方法(例如"POST"、"GET"、"PUT")。默认为 "GET"。 |
mimeType |
string |
覆盖XHR mime类型的mime类型。 |
password |
string |
用于XMLHttpRequest 以响应HTTP访问身份验证请求的密码。 |
processData |
boolean |
默认情况下，作为对象传递给data选项的数据（从技术上讲，除了字符串以外的任何数据）将被处理并转换为查询字符串，符合默认的内容类型"application/x-www-form-urlencoded"。如果要发送DOMDocument 或其他未处理的数据，请将此选项设置为false。默认为 true。 |
scriptAttrs |
object |
定义一个带有附加属性的对象，用于script 或 jsonp 请求。键表示属性的名称，值是属性的值。如果提供了此对象，它将强制使用脚本标记传输。 例如，这可用于设置 nonce、integrity或crossorigin属性，以满足内容安全策略要求。 |
scriptCharset |
string |
仅在使用"script"传输时适用。在请求中使用的脚本标记上设置charset属性。当本地页面上的字符集与远程脚本上的字符集不同时使用。或者，可以在scriptAttrs中指定charset属性，这也将确保使用"script"传输。 |
statusCode |
object |
一个由数字HTTP代码和函数组成的对象，当响应具有相应的代码时，将调用这些代码和函数。 如果请求成功，状态代码函数将采用与成功回调相同的参数；如果它导致一个错误(包括3xx重定向)，它们将采用与错误回调相同的参数。 参考：【eg4】 |
success |
function |
请求成功时要调用的函数。 该函数传递三个参数：
从jQuery 1.5开始， success设置可以接受一组函数。每个函数将被依次调用。这是一个Ajax事件。 |
timeout |
number |
为请求设置超时时间(以毫秒为单位),值为0表示没有超时。 这将覆盖任何用 $.ajaxSetup()设置的全局超时。超时期限从发出 $.ajax 调用时开始；如果其他几个请求正在进行，而浏览器没有可用的连接，则请求可能会在发送之前超时。 |
traditional |
boolean |
如果您希望使用传统样式的参数序列化，请将此项设置为true。 |
type |
string |
方法的别名。如果您使用的是1.9.0之前的jQuery版本，应该使用type。 |
url |
string |
一个字符串，包含请求发送到的URL。 |
username |
string |
用于XMLHttpRequest以响应HTTP访问身份验证请求的用户名。 |
xhr |
function |
用于创建XMLHttpRequest对象的回调。默认为ActiveXObject(如果可用的话)，否则为XMLHttpRequest。重写以提供自己的XMLHttpRequest实现或对工厂的增强。 IE中若可用则默认为 ActiveXObject，否则都为XMLHttpRequest |
xhrFields |
object |
要在本机XHR对象上设置的 fieldName-fieldValue 的对象。例如如果需要，可以使用它将跨域请求的withCredentials设置为true。 参考：【eg5】 |
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 ] )
其中参数：
| 参数 | 类型 | 描述 |
|---|---|---|
url |
string |
包含请求发送到的 URL 的字符串 |
data |
object 或 string |
与请求一起发送到服务器的普通对象或字符串，一般是键值对数据 |
complete |
function （字符串响应文本, 字符串状态文本, jqXHR jqXHR） |
请求完成时执行的回调函数，不论成功或者失败都调用 |
这个方法是从服务器获取数据的最简单的方法。类似于 $.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 请求对数据长度没有要求。
3.4.1 $.get() 方法
$.get()方法用于发送HTTP GET请求并从服务器获取数据。例如：
$.get("example.php", function(data) {
// 成功获取数据后的处理逻辑
console.log(data);
});
在上面的示例中，我们向服务器发送了一个GET请求，并将响应数据传递给回调函数。回调函数中的data参数包含从服务器返回的数据。
3.4.2 $.post() 方法
$.post()方法用于发送HTTP POST请求并从服务器获取数据。例如：
$.post("example.php", { name: "John", age: 30 }, function(data) {
// 成功获取数据后的处理逻辑
console.log(data);
});
在上面的示例中，我们向服务器发送了一个POST请求，并将一些数据作为JavaScript对象传递给服务器。服务器可以使用这些数据进行处理。回调函数中的data参数包含从服务器返回的数据。
3.5 $.getScript() 方法 和 $.getJSON() 方法
3.5.1 $.getScript() 方法
$.getScript()方法用于动态加载并执行服务器上的JavaScript文件。这对于需要按需加载外部JavaScript文件的场景非常有用。例如：
$.getScript("script.js", function() {
// 在加载并执行完脚本后执行的回调函数
// 可以在这里使用加载的脚本
init();
});
这里我们使用 $.getScript() 方法加载名为"script.js"的外部 JavaScript 文件。一旦脚本加载并执行完毕，将调用回调函数。在回调函数中，您可以使用已加载的脚本执行所需的操作。在这个示例中，我们假设有一个名为init()的函数，我们在回调函数中调用它来初始化页面。
3.5.2 $.getJSON() 方法
$.getJSON()方法用于发送HTTP GET请求，并期望从服务器获取JSON格式的数据作为响应。例如：
$.getJSON("data.json", function(data) {
// 成功获取JSON数据后的处理逻辑
console.log(data);
});
3.6 序列化
3.6.1 概述
在jQuery中，Ajax序列化是一种将表单数据转换为URL编码字符串或JSON对象的过程。这种序列化非常有用，特别是在使用Ajax发送表单数据或将数据作为参数传递给服务器时。以下是两种常见的Ajax序列化方法的示例：
1.URL 编码序列化
URL编码序列化将表单数据转换为URL编码字符串，以便作为查询字符串附加到URL上。这在发送GET请求或通过URL参数传递数据时非常有用。使用$.param()方法进行URL编码序列化。例如：
var formData = {
name: "John",
age: 30,
city: "New York"
};
var serializedData = $.param(formData);
console.log(serializedData);
在这个例子中，我们有一个名为 formData 的对象，其中包含了一些表单数据。我们使用 $.param() 方法对该对象进行URL编码序列化，并将结果存储在 serializedData 变量中。最后，我们在控制台上打印了序列化后的数据。
2. JSON 序列化
JSON序列化将表单数据转换为JSON格式的对象，以便在Ajax请求中作为数据参数发送给服务器。这在发送POST请求或通过请求体发送数据时非常有用。使用 JSON.stringify() 方法进行JSON序列化。例如：
var formData = {
name: "John",
age: 30,
city: "New York"
};
var serializedData = JSON.stringify(formData);
console.log(serializedData);
在上面的示例中，我们使用与第一个示例相同的formData对象。但是，这次我们使用JSON.stringify()方法对该对象进行JSON序列化，并将结果存储在serializedData变量中。最后，我们在控制台上打印了序列化后的JSON字符串。
这些示例展示了如何在jQuery中进行Ajax序列化，根据需要选择URL编码序列化或JSON序列化。注意，在实际使用中，您可能需要结合其他Ajax方法（如 .get()或$.post()）来发送序列化后的数据到服务器。
3.6.2 serialize()方法
serialize() 方法将表单元素的值序列化为URL编码字符串。它适用于包含表单字段的表单元素，例如input、select和textarea。
例如：
var formData = $("#myForm").serialize();
console.log(formData);
此例中，我们使用serialize()方法来序列化 *ID 为 “myForm” 的表单元素。serialize() 方法会收集表单元素的名称和值，并将它们转换为URL编码字符串。最后，我们将序列化后的数据打印到控制台上。
3.6.3 serializeArray() 方法
serializeArray() 方法将表单元素的值序列化为一个数组，每个数组项包含字段的名称和值。例如：
var formArray = $("#myForm").serializeArray();
console.log(formArray);
此例中，我们使用 serializeArray() 方法来序列化 ID 为 “myForm” 的表单元素。serializeArray() 方法会返回一个包含字段名称和值的对象数组。最后，我们将该数组打印到控制台上。
3.6.4 $param() 方法
$.param() 方法可以用于将任何对象转换为URL编码字符串。它不仅适用于序列化表单数据，还适用于序列化任何JavaScript对象。例如：
var data = { name: "John", age: 30, city: "New York" };
var serializedData = $.param(data);
console.log(serializedData);
此例中，我们有一个名为 data 的对象，其中包含一些数据。我们使用$.param() 方法将该对象转换为 URL 编码字符串，并将结果存储在serializedData 变量中。最后，我们将序列化后的数据打印到控制台上。
- 点赞
- 收藏
- 关注作者
评论（0）