zoukankan      html  css  js  c++  java
  • $.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 跨域请求发送验证凭据

  • 相关阅读:
    [No0000139]轻量级文本编辑器,Notepad最佳替代品:Notepad++
    [No0000138]软件开发基础知识
    [No0000137]字符编码详解
    [No0000144]深入浅出图解C#堆与栈 C# Heap(ing) VS Stack(ing)理解堆与栈1/4
    [No0000136]6个重要的.NET概念:栈,堆,值类型,引用类型,装箱,拆箱
    [No0000135]程序员修炼之道 Tips
    phpstorm 调试时浏览器显示The requested resource / was not found on this server
    php注解
    phpStorm 配置PHP_CodeSniffer自动检查代码
    php
  • 原文地址:https://www.cnblogs.com/czf-zone/p/4374320.html
Copyright © 2011-2022 走看看