ajax引數詳解+例項
ajax很多時候都能用到,在網上看到了很多關於ajax引數的介紹,但是都沒有提供實際的詳解。來做個小總結以防不時之需。
1.url
要求為String型別的引數,(預設為當前頁地址)傳送請求的地址。
2.type
要求為String型別的引數,請求方式(post或get)預設為get。注意其他http請求方法,例如put和delete也可以使用,但僅部分瀏覽器支援。
post和get區別:
(1)post更安全(不會作為url的一部分,不會被快取、儲存在伺服器日誌、以及瀏覽器瀏覽記錄中)
(2)post傳送的資料更大(get有url長度限制)
(3)post能傳送更多的資料型別(get只能傳送ASCII字元)
(4)post比get慢
(5)post用於修改和寫入資料,get一般用於搜尋排序和篩選之類的操作(淘寶,支付寶的搜尋查詢都是get提交),目的是資源的獲取,讀取資料)
(6)get用來獲取靜態資料
3.timeout
要求為Number型別的引數,設定請求超時時間(毫秒)。此設定將覆蓋$.ajaxSetup()方法的全域性設定。
4.async
要求為Boolean型別的引數,預設設定為true,所有請求均為非同步請求。如果需要傳送同步請求,請將此選項設定為false。
function jsonjson() { $.ajax({ type:'post', //async:true,//非同步 預設 async:false,//同步 url:'${pageContext.request.contextPath }/item/jsonjson.action', success:function(date){ alert("1"); } }); alert("2"); }
如果是非同步,先列印2在列印1 程式不會等待結果 直接往下面執行;
如果是同步,先列印1在列印2 從上到下按順序執行。
5.cache
要求為Boolean型別的引數,預設為true(當dataType為script時,預設為false),設定為false將不會從瀏覽器快取中載入請求資訊。
6.data
換為字串格式。get請求中將附加在url後。防止這種自動轉換,可以檢視 processData選項。物件必須為key/value格式,
例如{foo1:"bar1",foo2:"bar2"}轉換為&foo1=bar1&foo2=bar2。
如果是陣列,JQuery將自動為不同值對應同一個名稱。例如{foo:["bar1","bar2"]}轉換為&foo=bar1&foo=bar2。
標準形式
data:'{"name":"手機","price":99}',
7.dataType
要求為String型別的引數,預期伺服器返回的資料型別。如果不指定,JQuery將自動根據http包mime資訊返回responseXML或responseText,並作為回撥函式引數傳遞。可用的型別如下:
xml:返回XML文件,可用JQuery處理。
html:返回純文字HTML資訊;包含的script標籤會在插入DOM時執行。
script:返回純文字JavaScript程式碼。不會自動快取結果。除非設定了cache引數。注意在遠端請求時(不在同一個域下),所有post請求都將轉為get請求。
json:返回JSON資料。
jsonp:JSONP格式。使用SONP形式呼叫函式時,例如myurl?callback=?,JQuery將自動替換後一個“?”為正確的函式名,以執行回撥函式。
text:返回純文字字串。
前臺:
function jsonjson()
{
$.ajax({
type:'post',
dataType:'json',
url:'${pageContext.request.contextPath }/item/jsonjson.action',
success:function(date){
alert(date);
alert(date.name);
}
});
}
後臺:
@RequestMapping("/jsonjson")
public @ResponseBody Items jsonjson()
{
Items item = new Items();
item.setName("手機");
item.setPrice(1900f);
return item;
}
ajax請求dataType值為json,jquery就會把後端返回的字串嘗試通過JSON.parse()嘗試解析為js物件。
dataType值改為'text',結果彈出框直接顯示後臺返回的json字串。
dataType值改為'html',結果彈出框直接顯示後臺返回的json字串。
注:能顯示的是json字串,顯示為[object,object]為json物件 ,可以通過date.name直接獲得其屬性值。
8.contentType
dateType是接受的資料型別,contentType指傳送的資料型別。
預設為:"application/x-www-form-urlencoded" 常用的有:contentType:'application/json;charset=utf-8',
9.success
要求為Function型別的引數,請求成功後呼叫的回撥函式,有兩個引數。
(1)由伺服器返回,並根據dataType引數進行處理後的資料。
(2)描述狀態的字串。
function(data, textStatus){
//data可能是xmlDoc、jsonObj、html、text等等
this; //呼叫本次ajax請求時傳遞的options引數
}
10.error
要求為Function型別的引數,請求失敗時被呼叫的函式。該函式有3個引數,即XMLHttpRequest物件、錯誤資訊、捕獲的錯誤物件(可選)。ajax事件函式如下:
function(XMLHttpRequest, textStatus, errorThrown){
//通常情況下textStatus和errorThrown只有其中一個包含資訊
this; //呼叫本次ajax請求時傳遞的options引數
}
11.beforeSend
要求為Function型別的引數,傳送請求前可以修改XMLHttpRequest物件的函式,例如新增自定義HTTP頭。在beforeSend中如果返回false可以取消本次ajax請求。XMLHttpRequest物件是惟一的引數。
function(XMLHttpRequest){
this; //呼叫本次ajax請求時傳遞的options引數
}
12.complete
要求為Function型別的引數,請求完成後呼叫的回撥函式(請求成功或失敗時均呼叫)。引數:XMLHttpRequest物件和一個描述成功請求型別的字串。
function(XMLHttpRequest, textStatus){
this; //呼叫本次ajax請求時傳遞的options引數
}
13.dataFilter
要求為Function型別的引數,給Ajax返回的原始資料進行預處理的函式。提供data和type兩個引數。data是Ajax返回的原始資料,type是呼叫jQuery.ajax時提供的dataType引數。函式返回的值將由jQuery進一步處理。
function(data, type){
//返回處理後的資料
return data;
}
14.dataFilter
要求為Function型別的引數,給Ajax返回的原始資料進行預處理的函式。提供data和type兩個引數。data是Ajax返回的原始資料,type是呼叫jQuery.ajax時提供的dataType引數。函式返回的值將由jQuery進一步處理。
function(data, type){
//返回處理後的資料
return data;
}
15.global
要求為Boolean型別的引數,預設為true。表示是否觸發全域性ajax事件。設定為false將不會觸發全域性ajax事件,ajaxStart或ajaxStop可用於控制各種ajax事件。
16.ifModified
要求為Boolean型別的引數,預設為false。僅在伺服器資料改變時獲取新資料。伺服器資料改變判斷的依據是Last-Modified頭資訊。預設值是false,即忽略頭資訊。
17.jsonp
要求為String型別的引數,在一個jsonp請求中重寫回調函式的名字。該值用來替代在"callback=?"這種GET或POST請求中URL引數裡的"callback"部分,例如{jsonp:'onJsonPLoad'}會導致將"onJsonPLoad=?"傳給伺服器。
18.username
要求為String型別的引數,用於響應HTTP訪問認證請求的使用者名稱。
19.password
要求為String型別的引數,用於響應HTTP訪問認證請求的密碼。
20.processData
要求為Boolean型別的引數,預設為true。預設情況下,傳送的資料將被轉換為物件(從技術角度來講並非字串)以配合預設內容型別"application/x-www-form-urlencoded"。如果要傳送DOM樹資訊或者其他不希望轉換的資訊,請設定為false。
21.scriptCharset
要求為String型別的引數,只有當請求時dataType為"jsonp"或者"script",並且type是GET時才會用於強制修改字符集(charset)。通常在本地和遠端的內容編碼不同時使用。