$.ajax()方法详解

JQ这个库，可以说几乎只要是个前端都会用。但会用不代表你对它很熟。

你有熟记它的API么？你用充分研究过它的每一个方法么？

如果你像小生一样，是个典型的code user。那你很可能会在面试的时候被虐。

因为很多面试官都会拿一些比较细的Point来考你，估计他们认为，一个优秀的前端，应该对一个框架滚瓜烂熟吧。

虽然我对这一观点是不敢苟同的，因为这和专注偷懒20年的思想相违背。

黑猫白猫，只要能抓到老鼠，就是好猫嘛。

不过，作为求职者，适者生存，为了能拿到offer，你还是得老老实实的跟着趋势走。

OK，废话到此为止。今天的主角是——$.ajax()

其实我也只是把中文api搬了一遍，当中有一些细节根据我个人的理解在描述上略作修改而已...

但是这么一个搬运过程，最起码我是认真的过了它一遍，反正能记住多少算多少了。

 

$.ajax()多用于发送异步请求，然后根据返回的结果来执行后续回调操作。

它的参数是一个包含了多个属性的对象，30来个，真的很多...

记住它是不现实的了，mark下，在关键的时候方便查阅才是王道。（当然背书达人或者大脑空虚内存过多者，请主动忽略这句...）

 

1.url

一个用来包含发送请求的 URL 字符串。

 

2.accepts

默认：取决于数据类型。

内容类型发送请求头，告诉服务器什么样的响应会接受返回。如果 accepts 设置需要修改，推荐在 $.ajaxSetup() 方法中做一次。

 

3.async

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

 

4.beforeSend

用于指定发送请求之前要执行的函数。该函数有唯一的一个参数，此参数是这是一个 XMLHttpRequest 对象。在 beforeSend 中如果返回 false 可以取消本次 ajax 请求。

 

5.cache

是否缓存请求回来的信息，根据dataType的设置不同，默认值不同。(dataType 为 script 和 jsonp 时默认为 false，其余情况默认为 true) 

 

6.complete

用于指定请求完成后回调函数。该函数有两个参数，第一个参数是一个 XMLHttpRequest 对象，第二个参数是一个描述成功请求类型的字符串。

 

7.contents

一个以"{字符串:正则表达式}"配对的对象，用来确定jQuery将如何解析响应，给定其内容类型。

 

8.contentType

发送信息至服务器时内容编码类型。使用默认值就能适用于大多数情况。(默认: "application/x-www-form-urlencoded") 如果你明确地传递了一个 content-type 给 $.ajax()，那么他必定会发送给服务器，哪怕没有数据要发送

 

9.context

用于设置 Ajax 相关回调函数的上下文。也就是说，让回调函数内this指向这个对象（如果不设定这个参数，那么this就指向调用本次AJAX请求时传递的options参数）

 

10.converters

默认： {"* text": window.String, "text html": true, "text json": jQuery.parseJSON, "text xml": jQuery.parseXML}

用于设置各个数据类型对应的数据类型转换函数，转换函数返回响应的转化值。

 

11.crossDomain

用于设置是否跨域请求（默认为false）。如果你想在同一域下强制跨域请求（如 JSONP 形式），将 crossDomain 设置为 true 即可。

 

12.data

发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。

 

13.dataFilter

用于设置返回数据预处理函数，用于对 Ajax 返回的原始数据进行预处理。该函数包含 data 和 type 两个参数：data 是 Ajax 返回的原始数据，type 是调用 $.ajax 时提供的 dataType 参数。函数返回的值将由 jQuery 进一步处理。

 

14.dataType

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

"xml": 返回 XML 文档，可用 jQuery 处理。

"html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。

"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非将 cache 参数设置为 true。注意：在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用 DOM 的 script 标签来加载)

"json": 返回 JSON 数据 。

"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 "?" 为正确的函数名，以执行回调函数。

"text": 返回纯文本字符串

 

15.error

用于设置请求失败时的回调函数。该函数包含三个参数，第一个参数是一个 XMLHttpRequest 对象，第二个参数是一个描述状态的字符串，第三个参数是捕获的异常对象。

 

16.global

用于设置是否触发全局 ajax 事件回调函数（默认：true）。全局 ajax 事件回调函数就是使用 ajaxStart(callback)，ajaxStop(callback) 等一系列方法设定的回调函数。

 

17.headers

一个额外的"{键:值}"对映射到请求一起发送。此设置会在 beforeSend 函数调用之前被设置；因此，此设置会被 beforeSend 函数内的设置覆盖。

 

18.ifModified

设置是否仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。

 

19.isLocal

用于设置是否允许当前环境被认定为“本地”，（如文件系统），即使jQuery默认情况下不会这么做。以下协议目前公认为本地：file, *-extension, and widget。如果 isLocal 设置需要修改，建议在 $.ajaxSetup() 方法中这样做一次。

 

20.jsonp

在一个JSONP请求中，这个值用来替代在"callback=?"这种 GET 或 POST 请求中URL参数里的"callback"部分。

 

21.jsonpCallback

在一个JSONP请求中，这个值用来替代在"callback=?"这种 GET 或 POST 请求中URL参数里的"?"部分。从Jquery1.5版本开始，你也可以用一个函数作为此参数的设置，这个函数的返回值就是jsonpCallback的结果。

 

22.method

HTTP 请求方法 (比如："POST", "GET")。此参数是 Jquery1.9.0 新增的，如果你使用的版本低于此版本，请使用 type 进行设置。

 

23.mimeType

设定一个 MIME 类型用来覆盖 XHR 的 MIME 类型。

 

24.password

用于响应HTTP访问认证请求的密码

 

25.processData

设置是否将发送到服务器的数据（也就是 data 选项传递进来的数据）转换为请求字符串格式（默认：true）

一般来说，通过 data 选项传递进来的数据，如果是一个对象(从技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请将 processData 选项设置为 false。

 

26.scriptCharset

仅适用于当 "script" 传输使用时（例如，跨域的 "jsonp" 或 dataType 选项为 "script" 和 "GET" 类型）。请求中使用在 script 标签上设置 charset 属性。通常只在本地和远程的内容编码不同时使用。

 

27.statusCode

设置不同的 http 状态码对应的回调函数。例如，如果响应状态是404，将触发下面的函数

$.ajax({
  statusCode: {
    404: function() {
      alert("page not found");
    }
  }
});

如果请求成功，状态代码回调函数的参数就和 success 回调函数的参数一样；如果请求失败，状态代码回调函数的参数就和 error 回调函数的参数一样。

 

28.success

用于设置请求成功时的回调函数。该函数包含三个参数，第一个参数是从服务器返回的数据，并根据 dataFilter 进行预处理后的数据，第二个参数是一个描述状态的字符串，第三个参数是一个 XMLHttpRequest 对象。

 

29.timeout

设置请求超时时间（单位：毫秒）。

 

30.type

HTTP 请求方法 (比如："POST", "GET")，默认为"GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。

 

31.username

用于响应 HTTP 访问认证请求的用户名。

 

32.xhr

默认在IE下为 ActiveXObject 而其他情况下为 XMLHttpRequest。

用于创建 XMLHttpRequest 对象的函数，需要返回一个XMLHttpRequest 对象（IE 下是 ActiveXObject）。用于重写或者提供一个增强的 XMLHttpRequest 对象。

 

33.xhrFields

一对“文件名-文件值”在本机设置XHR对象。例如，如果需要的话，你可以用它来设置 withCredentials 为 true 的跨域请求。（设置 withCredentials 为 true 后，ajax 请求将发送验证凭据）

$.ajax({
   url: a_cross_domain_url,
   xhrFields: {
      withCredentials: true
   }
});

 

最后整理一下我觉得比较重要，平时可能比较少用到，但需要知道的点，以便不知道哪个时候要用上了，却毫无概念：

1.我们能够通过 async 设置来使 $.ajax 发出一个同步请求

2.我们可以通过 crossDomain 设置来强制跨域请求

3.Jquery可以设置 ajax 全局事件回调，global 设置可以控制是否触发这些全局事件回调

4.我们可以通过 xhrFields 设置 withCredentials 为 true 的跨域请求，使得 ajax 跨域请求发送验证凭据