Ajax 异步通信基础

举报
jcLee95 发表于 2023/06/15 00:36:42 2023/06/15
【摘要】 本文介绍Ajax地用法,包括JQuery中地用法。
Ajax 异步通信基础

jcLee95 的个人博客
邮箱 :291148484@163.com

目 录




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


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

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



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

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



IE9 以下版本

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

IE9及以上版本

const xhr = new XMLHttpRequest();

const xhr = new XMLHttpRequest();


创建 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。 可选参数

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

xhr.setRequestHeader(header, value);

该方法的参数含义如下:

参数 描述
header 属性的名称
value 属性的值

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 


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


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


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

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

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,用于定义是否将侦听器添加到系统组。

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

cancelled = !target.dispatchEvent(event)

其中参数如下:

参数 描述
event 是要被派发的事件对象
target 被初始化使用和决定触发事件目标

// 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(...)

// 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(...)


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

xhrInstance.abort();

例如:

var xhr = new XMLHttpRequest();
xhr.open('GET', '/server', true);
xhr.send();
xhr.send();

if (YOUR_CONDITION) {
  xhr.abort();
}

事件 描述 说明
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对象(如果需要,设置附加的头)。)
  • ajaxSend
Global事件 这个全局事件也是在请求运行之前触发的。
  • success
Local 事件 只有当请求成功时(服务器没有错误,数据没有错误),才会调用此事件。
  • ajaxSuccess
Global 事件 只有当请求成功时,才会调用此事件。
  • error
Local 事件 只有当请求出错时,才会调用此事件(一个请求不能同时有错误和成功的回调)。
  • ajaxError
Global 事件 此全局事件的行为与本地错误事件相同。
  • complete
Local 事件 无论请求是否成功,都会调用此事件。即使是同步请求,您也总是会收到完整的回调。
  • ajaxComplete
Global 事件 该事件的行为与complete事件相同,每次Ajax请求完成时都会被触发。
ajaxStop Global 事件 如果不再有Ajax请求被处理,就会触发这个全局事件。


从上文我们知道不同的浏览器以不同的方式实现 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()


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

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

其中参数:

参数 类型 描述
url string 一个字符串,包含请求发送到的URL。
settings object 配置Ajax请求的一组键/值对。所有设置都是可选的。可以为任何带$的选项设置默认值。ajaxSetup()。有关所有设置的完整列表,请参见下面的jQuery.ajax( settings)。

设置项 类型 描述
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中)对象 和 一个对请求状态进行分类的字符串(successnotmodifiednocontenterrortimeoutabort  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不要设置任何内容类型头。
【注意】:
  • W3C XMLHttpRequest规范规定字符集总是UTF-8;指定另一个字符集不会强制浏览器更改编码。
  • 对于跨域请求,将内容类型设置为除 application/x-www-form-urlencodedmultipart/form-data  text/plain 之外的任何内容都会触发浏览器向服务器发送预检选项请求。
    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 objectstring 或者 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 请求失败时要调用的函数。
    该函数接收三个参数:
    • jqXHR(在jQuery 1.4.x中,XMLHttpRequest)对象
    • 描述所发生错误类型的字符串
    • 和可选的异常对象(如果发生了异常)。
    其中:
    • 第二个参数的可能值(除了null之外)是"timeout" "error" "abort"、 和 "parsererror"
    • 当HTTP错误发生时,errorThrown 接收HTTP状态的文本部分,如 Not Found  Internal Server Error (在HTTP/2中,它可能是一个空字符串)
    • 从jQuery 1.5开始,错误设置可以接受一个函数数组。每个函数将被依次调用。
    注意:跨域脚本和跨域JSONP请求不会调用此处理程序。这是一个Ajax事件
    global boolean 是否为此请求触发全局Ajax事件处理程序。默认值为true。
    可通过设置为false以防止触发像ajaxStartajaxStop这样的全局处理程序。这可以用来控制各种 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 请求。键表示属性的名称,值是属性的值。
    如果提供了此对象,它将强制使用脚本标记传输。
    例如,这可用于设置 nonceintegritycrossorigin属性,以满足内容安全策略要求。
    scriptCharset string 仅在使用"script"传输时适用。在请求中使用的脚本标记上设置charset属性。当本地页面上的字符集与远程脚本上的字符集不同时使用。或者,可以在scriptAttrs中指定charset属性,这也将确保使用"script"传输。
    statusCode object 一个由数字HTTP代码和函数组成的对象,当响应具有相应的代码时,将调用这些代码和函数。
    如果请求成功,状态代码函数将采用与成功回调相同的参数;如果它导致一个错误(包括3xx重定向),它们将采用与错误回调相同的参数。
    参考:【eg4】
    success function 请求成功时要调用的函数。
    该函数传递三个参数:
    • 从服务器返回的数据,根据dataType参数或dataFilter回调函数(如果指定)进行格式化;
    • 描述状态的字符串;
    • jqXHR(在jQuery 1.4.x,XMLHttpRequest中)对象。

    从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】


    【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
       }
    });
    


    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 请求。



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

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


    当使用不带后缀选择器表达式的 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”请求都遵循同源策略。请求无法从不同的域、子域、端口或协议成功检索数据。


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


    $.get()方法用于发送HTTP GET请求并从服务器获取数据。例如:

    $.get("example.php", function(data) {
      // 成功获取数据后的处理逻辑
      console.log(data);
    });
    
    

    在上面的示例中,我们向服务器发送了一个GET请求,并将响应数据传递给回调函数。回调函数中的data参数包含从服务器返回的数据。


    $.post()方法用于发送HTTP POST请求并从服务器获取数据。例如:

    $.post("example.php", { name: "John", age: 30 }, function(data) {
      // 成功获取数据后的处理逻辑
      console.log(data);
    });
    
    

    在上面的示例中,我们向服务器发送了一个POST请求,并将一些数据作为JavaScript对象传递给服务器。服务器可以使用这些数据进行处理。回调函数中的data参数包含从服务器返回的数据。



    $.getScript()方法用于动态加载并执行服务器上的JavaScript文件。这对于需要按需加载外部JavaScript文件的场景非常有用。例如:

    $.getScript("script.js", function() {
      // 在加载并执行完脚本后执行的回调函数
      // 可以在这里使用加载的脚本
      init();
    });
    
    

    这里我们使用 $.getScript() 方法加载名为"script.js"的外部 JavaScript 文件。一旦脚本加载并执行完毕,将调用回调函数。在回调函数中,您可以使用已加载的脚本执行所需的操作。在这个示例中,我们假设有一个名为init()的函数,我们在回调函数中调用它来初始化页面。


    $.getJSON()方法用于发送HTTP GET请求,并期望从服务器获取JSON格式的数据作为响应。例如:

    $.getJSON("data.json", function(data) {
      // 成功获取JSON数据后的处理逻辑
      console.log(data);
    });
    
    


    在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())来发送序列化后的数据到服务器。


    serialize() 方法将表单元素的值序列化为URL编码字符串。它适用于包含表单字段的表单元素,例如input、select和textarea。
    例如:

    var formData = $("#myForm").serialize();
    console.log(formData);
    

    此例中,我们使用serialize()方法来序列化 *ID 为 “myForm” 的表单元素。serialize() 方法会收集表单元素的名称和值,并将它们转换为URL编码字符串。最后,我们将序列化后的数据打印到控制台上。


    serializeArray() 方法将表单元素的值序列化为一个数组,每个数组项包含字段的名称和值。例如:

    var formArray = $("#myForm").serializeArray();
    console.log(formArray);
    

    此例中,我们使用 serializeArray() 方法来序列化 ID 为 “myForm” 的表单元素。serializeArray() 方法会返回一个包含字段名称和值的对象数组。最后,我们将该数组打印到控制台上。


    $.param() 方法可以用于将任何对象转换为URL编码字符串。它不仅适用于序列化表单数据,还适用于序列化任何JavaScript对象。例如:

    var data = { name: "John", age: 30, city: "New York" };
    var serializedData = $.param(data);
    console.log(serializedData);
    
    

    此例中,我们有一个名为 data 的对象,其中包含一些数据。我们使用$.param() 方法将该对象转换为 URL 编码字符串,并将结果存储在serializedData 变量中。最后,我们将序列化后的数据打印到控制台上。

    【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
    • 点赞
    • 收藏
    • 关注作者

    评论(0

    0/1000
    抱歉,系统识别当前为高风险访问,暂不支持该操作

    全部回复

    上滑加载中

    设置昵称

    在此一键设置昵称,即可参与社区互动!

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。