jquery ajax学习笔记

这两天做项目的时候频繁用到jquery ajax,很多东西都忘了。于是写下这篇文章,加深印象,也方便自己日后查阅。

先看一下基本版本:

$.ajax({
    url: url,    //请求的url地址
    dataType: datatype,   //服务器返回的值类型
    async: true, //请求是否异步,默认为异步
    data: { 
        "id": "value" ,
        "param":"param"
    },//发送到服务器的参数
    type: "GET",   //请求方式
    beforeSend: function() {
        //请求前的处理
    },
    success: function(data) {
        //请求成功时处理
    },
    complete: function() {
        //请求完成的处理
    },
    error: function() {
        //请求出错处理
    }
});

接下来来详细看一下各个属性

  • url 请求的url地址,String类型

  • dataType 服务器返回的值的类型。【若没有填写,jQuery会自动根据HTTP包MIME信息来智能判断。若填写错了反而会有问题】有以下几种类型:

    • “xml”: 返回XML文档,可用 jQuery 处理。

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

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

    • “json”: 返回 JSON 数据

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

    • “text”: 返回纯文本字符串

  • data 发送到服务器的参数。GET请求中将附加在URL后。

  • type 请求方式GET【默认方式】 | POST

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

  • cache Boolean类型。【默认】true。当dataType为script和jsonp时默认为 false。设置为false将不缓存此页面。
    【默认情况下,请求总会被发出去,但浏览器有可能从它的缓存中调取数据。要禁止使用缓存的结果,可以设置 cache 参数为 false】

  • contentType 发送信息至服务器时内容编码类型。默认值: “application/x-www-form-urlencoded”。
    contentType:”application/x-www-form-urlencoded; charset=utf-8″

  • beforeSend 发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。(没有实践过,不是很懂。)

  • success 请求成功后的回调函数。参数:由服务器返回,并根据 dataType 参数进行处理后的数据;描述状态的字符串。

  • dataFilter 在请求成功之后调用。提供 data 和 type 两个参数:data 是 Ajax 返回的原始数据,type 是调用 jQuery.ajax 时提供的 dataType 参数。并且必须返回新的数据(可能是处理过的)传递给 success 回调函数。

  • error 很明显是请求失败时调用此函数。有以下三个参数:XMLHttpRequest 对象、错误信息、(可选)捕获的异常对象。如果发生了错误,错误信息(第二个参数)除了得到 null 之外,还可能是 “timeout”, “error”, “notmodified” 和 “parsererror”。

  • complete 请求完成后回调函数 (请求成功或失败之后均调用)。参数: XMLHttpRequest 对象和一个描述请求类型的字符串。

  • global 是否触发全局AJAX事件。默认为true | 【不触发则设置为】false。用于阻止响应注册的回调函数,比如 .ajaxSend,或者 ajaxError,以及类似的方法。这在有些时候很有用,比如发送的请求非常频繁且简短的时候,就可以在 ajaxSend 里禁用这个。

  • ifModified 仅在服务器数据改变时获取新数据。默认值: false。使用 HTTP 包 Last-Modified 头信息判断。在 jQuery 1.4 中,它也会检查服务器指定的 ‘etag’ 来确定数据没有被修改过。
    【如果希望判断数据自从上次请求后没有更改过就报告出错的话,设置ifModified为true】

  • jsonp 在一个 jsonp 请求中重写回调函数的名字。这个值用来替代在 “callback=?” 这种 GET 或 POST 请求中 URL 参数里的 “callback” 部分,比如 {jsonp:’onJsonPLoad’} 会导致将 “onJsonPLoad=?” 传给服务器。

  • jsonpCallback 为 jsonp 请求指定一个回调函数名。这个值将用来取代 jQuery 自动生成的随机函数名。这主要用来让 jQuery 生成度独特的函数名,这样管理请求更容易,也能方便地提供回调函数和错误处理。
    你也可以在想让浏览器缓存 GET 请求的时候,指定这个回调函数名。

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

  • password 用于响应 HTTP 访问认证请求的密码
    如果服务器需要 HTTP 认证,可以使用用户名和密码可以通过 username 和 password 选项来设置。

  • processData 默认值: true。默认情况下,通过data选项传递进来的数据,如果是一个对象(技术上讲只要不是字符串),都会处理转化成一个查询字符串,以配合默认内容类型 “application/x-www-form-urlencoded”。
    【发送 DOM 树信息或其它不希望转换的信息设置为false】。

  • scriptCharset 只有当请求时 dataType 为 “jsonp” 或 “script”,并且 type 是 “GET” 才会用于强制修改 charset
    通常只在本地和远程的内容编码不同时使用。

  • timeout 设置请求超时时间(毫秒)。此设置将覆盖全局设置。

参考文章:jQuery ajax()方法|菜鸟教程
jQuery ajax w3school

    原文作者:lsxj
    原文地址: https://segmentfault.com/a/1190000005039298
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞