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 跨域请求发送验证凭据