【精简版】jQuery 中的 Ajax 详解

目录

一、概念

二、jQuery 发送 GET 请求

三、jQuery 发送 POST 请求

四、$.ajax() 方法

1、含义

2、settings 选项

① type 属性

② async 属性

③ headers 属性

④ contentType 属性

⑤ processData 属性

⑥ data 属性

⑦ timeout 属性

⑧ beforeSend(jqXHR) 方法

⑨ success(data, textStatus, jqXHR) 方法

⑩ error(jqXHR, textStatus) 方法

⑪ complete(jqXHR, textStatus) 方法

五、扩展知识

一、概念

        众所周知，jQuery 是一个跨主流浏览器的 JavaScript 库，它封装了 JavaScript 的常用功能代码，简化了 HTML DOM 操作、事件处理、动画设计和 Ajax 交互等任务。jQuery 中的 Ajax 是对 XMLHttpRequest 或 ActiveXObject（IE9以下版本中）的封装，它提供了一种更加方便和强大的方式来与服务器进行数据交换，从而实现在不重新加载整个页面的情况下，对网页进行局部更新。

二、jQuery 发送 GET 请求

//$.ajax() 等同于 jQuery.ajax()，是 jQuery 提供的一个全局函数，用于发送 Ajax 请求。
//该函数接受一个配置对象作为参数，这个对象可以包含各种属性和方法，用于定义 Ajax 请求的不同方面。
$.ajax({
    //属性 type 用于指定请求类型（GET/POST），默认为 GET，其它 HTTP 请求方法仅部分浏览器支持。
    type: 'GET',
    //属性 url 用于指定请求地址。
    url: 'http://127.0.0.1:8080/getData',
    //属性 data 用于指定发送到服务器的数据，GET请求时 data 属性值将自动转换为查询字符串格式并附加在 URL 后。
    //如果 value 为数组，jQuery 将自动为不同值对应同一个名称，如 {foo:["bar1", "bar2"]} 转换为 "&foo=bar1&foo=bar2"。
    data: {param1:value1, param2:value2},
    //方法 success(data, textStatus, jqXHR) 用于指定请求成功后的回调，其中参数 data 表示服务器的响应体信息；
    //textStatus 表示请求的状态，对于成功的请求，值通常是"success"；
    //jqXHR 是 jQuery 对原生 XMLHttpRequest 对象的封装和扩展，提供了更多的方法和属性来处理 HTTP 请求。
    success: function(data,textStatus,jqXHR){
        //XMLHttpRequest 对象的属性 status，用于表示服务器响应的 HTTP 状态码，如200表示成功，404表示未找到等。
        console.log(jqXHR.status);
        //XMLHttpRequest 对象的属性 statusText，用于表示服务器响应的状态描述，如"OK"、"Not Found"等。
        console.log(jqXHR.statusText);
        //XMLHttpRequest 对象的方法getAllResponseHeaders()，以一个字符串形式返回所有的响应头，且每个响应头独占一行。
		console.log(jqXHR.getAllResponseHeaders());
        //参数 data 表示服务器的响应体信息。
        console.log(data);
        //XMLHttpRequest 对象的属性 responseType，用于表示服务器响应体的数据类型，"" (默认值)表示字符串、text 表示字符串、
        //arraybuffer 表示 ArrayBuffer 对象、blob 表示 Blob 对象、document 表示 Document 对象(XML/HTML)、json 表示 JSON 对象。
        console.log(jqXHR.responseType);
    },
    //属性 timeout 用于指定当前请求的最大请求时间，单位为毫秒，如果请求在该时间内未结束则会自动终止，同时执行 error 指定的回调。
    timeout: 2000,
    //方法 error(jqXHR, textStatus) 用于指定请求失败时的回调，
    //其中参数 jqXHR 是 jQuery 对原生 XMLHttpRequest 对象的封装和扩展，提供了更多的方法和属性来处理 HTTP 请求；
    //textStatus 表示请求的状态，对于失败的请求，值通常是"timeout"(请求超时)、"error"(请求未能成功完成)、"abort"(请求被中止)、
    //"parsererror"(解析返回的数据时出错)等。
    error: function(jqXHR,textStatus){
        console.log("请求失败，请稍后重试!");
    }
})

三、jQuery 发送 POST 请求

$.ajax({
    type: 'POST',
    url: 'http://127.0.0.1:8080/saveData',
    //属性 contentType 用于告诉服务器请求体的数据类型是什么，默认值为 application/x-www-form-urlencoded，
    //application/json 表示请求体是 JSON 格式的数据，application/x-www-form-urlencoded 表示请求体是表单数据。
    //contentType: 'application/json; charset=utf-8',
    //属性 processData 用于指定 data 属性值是否需要自动转换，默认为 true。
    //processData: false,
    //属性 data 用于指定发送到服务器的数据，类型可以是 Key/Value 对、JSON 字符串、FromData 对象等，
    //此时此处 data 属性值将自动转换为表单数据格式并放在请求体中。
    data: {param1:value1, param2:value2},
    //JavaScript 内置对象 JSON 的方法stringify()，用于将 JavaScript 对象转换成 JSON 格式的字符串。
    //data: JSON.stringify({ param1:value1,param2:value2 }),
    success: function(data,textStatus,jqXHR){
        //假设响应体为 JSON 格式的字符串，此时我们可以通过 JavaScript 内置对象JSON的方法parse()将其转换成 JavaScript 对象。
        console.log(JSON.parse(data));
    },
    timeout: 2000,
    error: function(jqXHR,textStatus){
        console.log("请求失败，请稍后重试!");
    }
})

四、$.ajax() 方法

1、含义

        $.ajax(url,[settings]) 等同于 jQuery.ajax(url,[settings])，是 jQuery 提供的一个全局函数，用于发送 Ajax 请求。该函数接受一个配置对象作为参数，这个对象可以包含各种属性和方法，用于定义 Ajax 请求的不同方面。

2、settings 选项

① type 属性

含义：用于指定请求类型（GET/POST），默认为 GET。

说明：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。

② async 属性

含义：用于指定请求方式，true 表示异步请求(默认值)，false 表示同步请求。

说明：同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

③ headers 属性

含义：用于设置请求头，值为一个对象"{键:值}"，其中键是请求头的名称、值是请求头的值。

说明：它允许我们向服务器发送额外的 HTTP 请求头，比如认证令牌、客户端类型、内容类型等，从而进行相应的处理。

④ contentType 属性

含义：用于告诉服务器请求体的数据类型是什么，默认值为 application/x-www-form-urlencoded。

说明：application/json 表示请求体是 JSON 格式的数据，application/x-www-form-urlencoded 表示请求体是表单数据。

⑤ processData 属性

含义：用于指示 jQuery 是否应该自动将传入的数据（通过 data 配置项指定的）转换为查询字符串（对于 GET 请求）或发送为表单数据（对于 POST 请求），默认值为 true。

说明：当我们向服务器发送原始数据（ JSON 数据、FormData 对象、Blob 或 ArrayBuffer 等二进制数据）时，应该将 processData 设置为 false。

⑥ data 属性

含义：用于指定发送到服务器的数据，类型可以是 Key/Value 对、JSON 字符串、FromData 对象等。

说明：数据类型为 Key/Value 对且 Value 为数组时，jQuery 将自动为不同值对应同一个名称，如 {foo:["bar1", "bar2"]} 将转换为 "&foo=bar1&foo=bar2"。

⑦ timeout 属性

含义：用于指定当前请求的最大请求时间，单位为毫秒。

说明：如果请求在该时间内未结束则会自动终止，同时执行 error 指定的回调。

⑧ beforeSend(jqXHR) 方法

含义：用于指定请求发送前的回调，若返回 false，则请求将被取消。

说明：它允许我们在请求发送前执行一些操作，比如设置请求头、修改发送的数据、根据某些条件取消请求等；其中参数 jqXHR 是 jQuery 对原生 XMLHttpRequest 对象的封装和扩展，提供了更多的方法和属性来处理 HTTP 请求。

⑨ success(data, textStatus, jqXHR) 方法

含义：用于指定请求成功后的回调。

说明：参数 data 表示服务器的响应体信息；textStatus 表示请求的状态，对于成功的请求，值通常是"success"；jqXHR 是 jQuery 对原生 XMLHttpRequest 对象的封装和扩展，提供了更多的方法和属性来处理 HTTP 请求。

⑩ error(jqXHR, textStatus) 方法

含义：用于指定请求失败时的回调。

说明：参数 jqXHR 是 jQuery 对原生 XMLHttpRequest 对象的封装和扩展，提供了更多的方法和属性来处理 HTTP 请求；textStatus 表示请求的状态，对于失败的请求，值通常是"timeout"(请求超时)、"error"(请求未能成功完成)、"abort"(请求被中止)、"parsererror"(解析返回的数据时出错)等。

⑪ complete(jqXHR, textStatus) 方法

含义：用于指定请求完成后（无论成功或失败）的回调。

说明：它允许我们执行一些在请求结束后始终需要执行的代码，比如隐藏加载动画、清理资源等；其中参数 jqXHR 是 jQuery 对原生 XMLHttpRequest 对象的封装和扩展，提供了更多的方法和属性来处理 HTTP 请求；textStatus 表示请求的状态，值通常是"success"(请求成功完成)、"timeout"(请求超时)、"error"(请求未能成功完成)、"abort"(请求被中止)、"parsererror"(解析返回的数据时出错)等。

五、扩展知识

        在早期的 jQuery 版本中，$.ajax() 函数返回其创建的 XMLHttpRequest 对象。然而，自 jQuery 1.5 开始，jQuery 团队在这个 jqXHR 对象的基础上，添加了对 Promise 接口的实现。这意味着，$.ajax() 函数现在返回的 jqXHR 对象同时拥有 XMLHttpRequest 对象的所有属性和方法，以及 Promise 接口提供的一系列新方法。Promise 提供了三个核心方法 .then()、.catch()、.finally()，用于处理异步操作的结果。其中，方法 .then() 用于指定 Promise 成功后或失败时的回调；.catch() 用于指定 Promise 失败时的回调；.finally() 用于指定无论 Promise 最终状态如何都会执行的回调。然而，jQuery 为了提供更符合其使用习惯的 API，在实现 Promise 接口的基础上，额外定义了 .done()、.fail()、.always() 方法。这些方法提供了与 .then()、.catch()、.finally() 类似的功能，但具有更明确的语义，使得代码在处理成功、失败和最终完成时的逻辑更加清晰。

$.ajax({
    type: 'POST',
    url: 'http://127.0.0.1:8080/saveData',
    //属性 contentType 用于告诉服务器请求体的数据类型是什么，默认值为 application/x-www-form-urlencoded，
    //application/json 表示请求体是 JSON 格式的数据，application/x-www-form-urlencoded 表示请求体是表单数据。
    contentType: 'application/json; charset=utf-8',
    //属性 processData 用于指定 data 属性值是否需要自动转换，默认为 true。
    processData: false,
    //属性 data 用于指定发送到服务器的数据，类型可以是 Key/Value 对、JSON 字符串、FromData 对象等，
    //JavaScript 内置对象 JSON 的方法stringify()，用于将 JavaScript 对象转换成 JSON 格式的字符串。
    data: JSON.stringify({ param1:value1,param2:value2 }),
    timeout: 2000
})
.done(function(data,textStatus,jqXHR){ //用于指定请求成功后的回调。
    console.log(data);
})
.fail(function(jqXHR,textStatus){ //用于指定请求失败时的回调。
    console.log("请求失败，请稍后重试!");
})
.always(function(jqXHR, textStatus){ //用于指定请求完成后（无论成功或失败）的回调。
    console.log(jqXHR.response);
})

        值得注意的时，虽然 jQuery 的这些方法提供了便利，但在现代的 JavaScript 开发中，直接使用原生的 Promise 接口和 async/await 语法已经成为主流。这些现代 JavaScript 特性提供了更加强大和灵活的异步编程能力，同时保持了代码的简洁性和可读性。因此，对于新的开发项目，建议优先考虑使用原生的 Promise 接口和 async/await 语法。