$.ajax()方法详解学习

大家好，又见面了，我是全栈君。

在工作总是会有很多地方用到异步请求，有时候用快捷方法 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()里的全局设置。超时周期开始于 .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 文档

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/121237.html原文链接：https://javaforall.cn