$.ajax()方法详解学习

时间：2022-07-09 04:40:33

在工作总是会有很多地方用到异步请求，有时候用快捷方法 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 文档
标签：

相关文章