$.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,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
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 [,dataType ] )
相当于：

$.ajax({
  type: "POST",
  url: url,dataType: dataType
});

$.post("data.PHP","json");

其中get和post的解释说明：
**url**
类型:String
一个包含发送请求的URL字符串.
**data**
类型:PlainObject or String
一个普通对象或字符串，通过请求发送给服务器。
**success**
类型:Function( PlainObject data,jqXHR jqXHR )
当请求成功后执行的回调函数。 如果提供dataType选项，那么这个success选项是必须的， 但你可以使用null或jQuery.noop作为占位符。
**dataType**
类型:String
从服务器返回的预期的数据类型。默认：智能猜测（xml,text，html）。

- （3）：getJson
jQuery.getJSON( url [,success(data,jqXHR) ] )
相当于：

$.ajax({ dataType: "json",url: url,data: data,success: success });

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

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

原文地址：https://www.jb51.cc/ajax/162108.html

$.ajax()方法详解学习

相关推荐