jQuery与Ajax之间的那些事儿_ajax complete(xhr, ts)-CSDN博客

本文链接：https://blog.csdn.net/weixin_45846241/article/details/106873740

定义和用法

ajax() 方法通过 HTTP 请求加载远程数据。

该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $. p o s t 等。$ .ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。

最简单的情况下，$.ajax() 可以不带任何参数直接使用。

注意：所有的选项都可以通过 $.ajaxSetup() 函数来全局设置。

参数

必须要的参数：
url
类型：String
默认值: 当前页地址。发送请求的地址。

type
类型：String
默认值: “GET”)。请求方式 (“POST” 或 “GET”)，默认为 “GET”。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。

dataType
类型：String
预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:

“xml”: 返回 XML 文档，可用 jQuery 处理。
“html”: 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
“script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 “cache” 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
“json”: 返回 JSON 数据。
“jsonp”: JSONP 格式。使用 JSONP 形式调用函数时，如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
“text”: 返回纯文本字符串

data
类型：String
发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:[“bar1”, “bar2”]} 转换为 ‘&foo=bar1&foo=bar2’。

success
类型：Function
请求成功后的回调函数。
参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。
这是一个 Ajax 事件。

error
类型：Function
默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。
有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。
如果发生了错误，错误信息（第二个参数）除了得到 null 之外，还可能是 “timeout”, “error”, “notmodified” 和 “parsererror”。
这是一个 Ajax 事件。

可选的参数：
complete(XHR, TS)
类型：Function
请求完成后回调函数 (请求成功或失败之后均调用)。
参数： XMLHttpRequest 对象和一个描述请求类型的字符串。
这是一个 Ajax 事件。

context
类型：Object
这个对象用于设置 Ajax 相关回调函数的上下文。也就是说，让回调函数内 this 指向这个对象（如果不设定这个参数，那么 this 就指向调用本次 AJAX 请求时传递的 options 参数）。比如指定一个 DOM 元素作为 context 参数，这样就设置了 success 回调函数的上下文为这个 DOM 元素。

timeout
类型：Number
设置请求超时时间（毫秒）。此设置将覆盖全局设置。

async
类型：Boolean
默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。
注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

案例

<div>
        <button>发送ajax请求数据</button>
</div>
 <script>
     $('button').on('click', function(){
         console.log("开始发送ajax请求！");
         // 工具方法
         $.ajax({
             url:'01.php',//接口文档中给的链接
             type : 'POST',//请求方式
             /*
             jsop跨域，只能使用get方法，如果我们设置的是post方法，jQuery自动跳转为get方法
             在jQuery中会先判断是否为同源请求，如果同源，那么这是的是get就是get，设置的是post就是post
             如果不同元，无论设置什么都改为get
             */
             dataType:'jsonp',//jsonp跨域
             data : {//参数 ，可以写字符串，也可以写对象
                 username : 'lilei',
                 password : '123456'
             },
             success:function(response){
                 // 请求成功以后才会执行
                 console.log(response);
                 console.log(this);
             },
             error:function(e){
                 // 请求失败才执行
                 console.log(e);
             },
             /*以上参数是必须的，以下参数是一些用的较少的*/
             complete:function(){
                 //请求完成以后触发，不关心请求是否成功
                 // 用途：在success执行之后（根据数据绘制的DOM元素已经完成），在此方法中不给元素绑定事件
             },
             context : $('div'),//可以改变回调函数中的上下文  -> this
             timeout : 800,//设置请求时长，比如 请求800毫秒就终止，终止了complete会执行
             async: true//是否异步 一般都是默认值true  false为同步请求
         });

     });
 </script>