$.ajax()方法详解学习

来源:互联网 发布:哪有软件培训 编辑:程序博客网 时间:2024/05/22 13:32

在工作总是会有很多地方用到异步请求,有时候用快捷方法 get/post 或者getJson不能满足自己的需求,所以必须使用底层的ajax来实现异步请求,每次写完下次在用到的时候就记不清楚了,就在这里记录一下,方便自己以后使用和其他人学习!
主要是参考整理JQuery的文档和一些好博客内容!记录一下平常工作最常用的!
一:首先贴出ajax的例子

 var ajaxRequest=$.ajax({            url: '${pageContext.request.contextPath}/sysback/productbabyset/saveBabyRelate',//提交的URL            type: "POST",            timeout:1000,            async: false,             cache: true,           // data: $('#mainForm').serialize(), // 要提交的表单,必须使用name属性            data : {data:data},            dataType: "json",             beforeSend : function(XMLHttpRequest, textStatus){                //参数:XMLHttpRequest对象和一个描述成功请求类型的字符串。            },            success: function (data, textStatus) {                //data:由服务器返回,并根据dataType参数进行处理后的数据                //textStatus:描述状态的字符串。                doing something...            },            error: function(XMLHttpRequest, textStatus, errorThrown){                 //XMLHttpRequest对象                          //textStatus的值:null, timeout, error, abort, parsererror                  //errorThrown的值:收到http出错文本,如 Not Found 或 Internal Server Error                alert(XMLHttpRequest.readyState + XMLHttpRequest.status + XMLHttpRequest.responseText); //详见参考文章$.ajax的error,complete,success方法             }            complete: function(XMLHttpRequest, textStatus){                //XMLHttpRequest对象                //textStatus的值:success,notmodified,nocontent,error,timeout,abort,parsererror                 doing something...                //For Example : request timeout                if(status=='timeout'){                 ajaxRequest.abort(); // Do not send ajax request               }            }        }); 

二:讲解其中各个属性详解

  • (1)url : 类型: String

    一个用来包含发送请求的URL字符串。默认为当前页地址。

  • (2)type : 类型String

    HTTP 请求方法 (比如:”POST”, “GET “, “PUT”)。默认为”GET”请求,例如put和delete也可以使用,但仅部分浏览器支持。

  • (3)timeout:类型: Number

    设置请求超时时间(毫秒)。此设置将覆盖.ajaxSetup().ajax 访问成功的那个时间点;如果几个其他请求都在进步并且浏览器有没有可用的连接,它有可能在被发送前就超时了。

  • (4)async : async (默认: true) 类型: Boolean

    默认设置下,所有请求均为异步请求(也就是说这是默认设置为 true )。如果需要发送同步请求,请将此选项设置为 false 。跨域请求和 dataType: “jsonp” 请求不支持同步操作。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。

  • (5)cache : cache (默认: true, dataType为”script”和”jsonp”时默认为false) 类型:
    Boolean

    如果设置为 false ,浏览器将不缓存此页面。注意: 设置cache为 false将在 HEAD和GET请求中正常工作。它的工作原理是在GET请求参数中附加”_={timestamp}”(详见ajax防止缓存)。该参数不是其他请求所必须的,除了在IE8中,当一个POST请求一个已经用GET请求过的URL。

  • (6)data : 类型: PlainObject 或 String 或 Array ,发送到服务器的数据。

    要求为Object或String类型的参数,发送到服务器的数据。如果已经不是字符串,将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换,可以查看  processData选项。对象必须为key/value格式,例如{foo1:”bar1”,foo2:”bar2”}转换为&foo1=bar1&foo2=bar2。如果是数组,JQuery将自动为不同值对应同一个名称。例如{foo:[“bar1”,”bar2”]}转换为&foo=bar1&foo=bar2。

  • (7)dataType : (default: Intelligent Guess (xml, json, script, or
    html)) 类型: String,从服务器返回你期望的数据类型
    responseXML或responseText,并作为回调函数参数传递。可用的类型如下:
    xml:返回XML文档,可用JQuery处理。
    html:返回纯文本HTML信息;包含的script标签会在插入DOM时执行。
    script:返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时(不在同一个域下),所有post请求都将转为get请求。
    json:返回JSON数据。
    jsonp:JSONP格式。使用SONP形式调用函数时,例如myurl?callback=?,JQuery将自动替换后一个“?”为正确的函数名,以执行回调函数。
    text:返回纯文本字符串

  • (8)beforeSend :类型: Function( jqXHR jqXHR, PlainObject settings )

    请求发送前的回调函数,用来修改请求发送前jqXHR(在jQuery 1.4.x的中,XMLHttpRequest)对象,此功能用来设置自定义 HTTP 头信息,等等。该jqXHR和设置对象作为参数传递。这是一个Ajax事件 。在beforeSend函数中返回false将取消这个请求

  • (9)success : 类型: Function( Object data, String textStatus, jqXHR
    jqXHR )

    请求成功后的回调函数。这个函数传递3个参数:从服务器返回的数据,并根据dataType参数进行处理后的数据,一个描述状态的字符串;还有 jqXHR(在jQuery 1.4.x前为XMLHttpRequest) 对象。

  • (10)error : 类型: Function( jqXHR jqXHR, String textStatus, String
    errorThrown )

    请求失败时调用此函数。有以下三个参数:jqXHR (在 jQuery 1.4.x前为XMLHttpRequest) 对象、描述发生错误类型的一个字符串 和 捕获的异常对象。如果发生了错误,错误信息(第二个参数)除了得到null之外,还可能是”timeout”, “error”, “abort” ,和 “parsererror”。 当一个HTTP错误发生时,errorThrown 接收HTTP状态的文本部分,比如: “Not Found”(没有找到) 或者 “Internal Server Error.”(服务器内部错误)。

  • (11)complete : 类型: Function( jqXHR jqXHR, String textStatus )

    请求完成后回调函数 (请求success 和 error之后均调用)。这个回调函数得到2个参数: jqXHR (在 jQuery 1.4.x中是 XMLHTTPRequest) 对象和一个描述请求状态的字符串(“success”, “notmodified”, “nocontent”,”error”, “timeout”, “abort”, 或者 “parsererror”) 。
    三:拓展快捷方法get/post/getJson 方法

  • (1):get
    jQuery.get( url [, data ] [, success ] [, dataType ] )

$.ajax({  url: url,  data: data,  success: success,  data类型:dataType});
$.get("data.php",{data:"data"},function(data){      $("#data").html(data);//返回的data是json类型    },"json");
  • (2):post
    jQuery.post( url [, data ] [, success ] [, dataType ] )
    相当于:
$.ajax({  type: "POST",  url: url,  data: data,  success: success,  dataType: dataType});
$.post("data.php",{data:"data"},function(data){      $("#data").html(data);//返回的data是json类型    },"json");
其中get和post的解释说明:**url**类型:String一个包含发送请求的URL字符串.**data**类型:PlainObject or String一个普通对象或字符串,通过请求发送给服务器。**success**类型:Function( PlainObject data, String textStatus, jqXHR jqXHR )当请求成功后执行的回调函数。 如果提供dataType选项,那么这个success选项是必须的, 但你可以使用null或jQuery.noop作为占位符。**dataType**类型:String从服务器返回的预期的数据类型。默认:智能猜测(xml, json, script, text,html)。

- (3):getJson
jQuery.getJSON( url [, data ] [, success(data, textStatus, jqXHR) ] )
相当于:

$.ajax({  dataType: "json",  url: url,  data: data,  success: success});
$.getJSON("data.php",{data:"data"},function(jsonData){    $("#data").html(jsonData.id);}//无需设置,直接获取的数据类型为json);

四:参考文章
1:$.ajax方法详解
2:$.ajax的error,complete,success方法
3:jQuery.ajax 文档

0 0
原创粉丝点击