jQuery 中的 Ajax 详解

一、概念

众所周知，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 语法。