jQuery ajax模板及各引數介紹
Ajax簡介:
Ajax 即“Asynchronous Javascript And XML”(非同步 JavaScript 和 XML),是指一種建立互動式網頁應用的網頁開發技術。
Ajax = 非同步 javaScript 和 XML(標準通用標記語言的子集)。
Ajax 是一種用於建立快速動態網頁的技術。
Ajax 是一種在無需重新載入整個網頁的情況下,能夠更新部分網頁的技術。
通過在後臺與伺服器進行少量資料交換,Ajax 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下,對網頁的某部分進行更新。
傳統的網頁(不使用 Ajax)如果需要更新內容,必須過載整個網頁頁面。
一、常用的比較通用ajax請求模板:
$.ajax({ url: "/base/data", //請求的url type: "GET", //請求方式 dataType: "jsonp", //返回格式為json jsonp: "jsonpCallback", //服務端用於接收callback呼叫的function名的引數 async: true, //請求是否非同步,預設為非同步,ajax重要特性 cache : false, //不會從瀏覽器快取中載入請求資訊 timeout:5000, //超時時間 data: { "id": "value" }, //傳遞引數值 beforeSend:function(XMLHttpRequest){ //請求前的處理 }, success:function(data, textStatus){ //請求成功時... }, error:function(XMLHttpRequest, textStatus, errorThrown){ //請求出錯... }, complete: function(XMLHttpRequest, textStatus) { //請求完成,成功失敗均呼叫... } });
二、ajax方法請求引數
1.url
型別:String
預設為當前地址傳送請求的頁面。
2.type
型別:String
請求方式:(post或get)預設為get。
其它 HTTP 請求方法,如 PUT 和 DELETE 也可以使用,但僅部分瀏覽器支援。
3.timeout
型別:Number
設定請求超時時間(毫秒)。此設定將覆蓋$.ajaxSetup()方法的全域性設定。
4.async
型別:Boolean
預設設定為true,所有請求均為非同步請求。如果需要同步請求,請將此選項設定為false。
5.cache
型別:Boolean
預設為true(當dataType為Script時,預設為false),設定false將不會從瀏覽器快取中載入請求資訊。
6.data
型別:Object / String
傳送到伺服器的資料。將自動轉換為請求字串格式。GET 請求中將附加在 URL 後。
檢視 processData 選項說明以禁止此自動轉換。必須為 Key/Value 格式。
如果為陣列,jQuery 將自動為不同值對應同一個名稱。 如 {foo:["bar1", "bar2"]} 轉換為 '&foo=bar1&foo=bar2'。
7.dataType
型別:String
預期伺服器返回的資料型別。如果不指定,jQuery將自動根據HTTP包的mine資訊返回responseXML或responseText,並作為回撥函式引數傳遞。
資料型別如下:
- xml:返回XML文件,可用jQuery處理。
- html:返回純文字HTML資訊;包含的script標籤會在插入DOM時執行。
- script:返回純文字javascript程式碼。不會自動快取結果,除非設定了cache引數。注意在遠端請求時(不在同一個域下),所有post請求都將轉為get請求。
- json:返回JSON資料。
- jsonp:JSON格式。使用JSONP形式呼叫函式時,例如myurl?callback=?,JQuery將自動替換後一個“?”為正確的函式名,以執行回撥函式。
- text:返回純文字字串。
8.success
型別:Function
請求成功後呼叫的回撥函式,有兩個引數。
引數:
(1)data 由伺服器返回,並根據dataType引數進行處理後的資料。
(2)textStatus描述狀態的字串。
function(data, textStatus){
//data可能是 xmlDoc, jsonObj, html, text, etc...
this; //呼叫本次ajax請求時傳遞的options引數
}
9.error
型別:Function
請求失敗時被呼叫的函式。該函式有3個引數。
引數:
(1)XMLHttpRequest物件
(2)錯誤資訊
(3)捕獲的錯誤物件(可選)
function(XMLHttpRequest, textStatus, errorThrown){
//通常情況下textStatus和errorThrown只有其中一個包含資訊
this; //呼叫本次ajax請求時傳遞的options引數
}
10.contentType
型別:String
當傳送資訊至伺服器時。設定內容編碼型別。
預設為 "application/x-www-form-urlencoded" 該預設值適合大多數應用場合。
11.beforeSend
型別:Function
傳送請求前可以修改XMLHttpRequest物件的函式,
例如新增自定義HTTP頭。在beforeSend中如果返回false可以取消本次ajax請求。XMLHttpRequest物件是唯一的引數。
function(XMLHttpRequest){
this;//呼叫本次ajax請求時傳遞的options引數
}
12.complete
型別:Function
請求完成後呼叫的回撥函式(請求成功或失敗均呼叫)。
引數:
(1)XMLHttpRequest物件
(2)描述成功請求型別的字串。
function(XMLHttpRequest, textStatus){
this; //呼叫本次ajax請求時傳遞的options引數
}
13.dataFilter
型別:Function
給Ajax返回的原始資料進行預處理的函式。提供data和type兩個引數。
(1)data是Ajax返回的原始資料
(2)type是呼叫$.ajax() 時提供的dataType引數。函式返回的值將由jQuery進一步處理。
function(data,type){
//返回處理後的資料
return data;
}
14.global
型別:Boolean
預設為true。表示是否觸發全域性ajax事件。
設定為false將不會觸發全域性ajax事件,
ajaxStart和ajaxStop可用於控制各種ajax事件。
15.ifModified
型別:Boolean
預設為false。僅在伺服器資料改變時獲取新資料。伺服器資料改變判斷的依據是Last-Modified頭資訊。預設值是false,即忽略頭資訊。
16.jsonp
型別:String
在一個jsonp請求中重寫回調函式的名字。
該值用來替代在"callback=?"這種GET或POST請求中URL引數裡的"callback"部分,
例如:{jsonp:'onJsonPLoad'} 會導致將 "onJsonPLoad=?" 傳給伺服器。
17.username
型別:String
用於響應HTTP訪問認證請求的使用者。
18.password
型別:String
用於響應HTTP訪問認證請求的密碼。
19.processData
型別:Boolean
預設為true。傳送的資料將被轉換為物件(從技術角度來講而非字串)以配合預設內容型別"application/x-www-form-urlencoded"。如果要傳送DOM樹資訊或者其他不希望轉換的資訊,請設定為false。
20.scriptCharset
型別:String
只有當請求時dataType為"jsonp"或者"script",並且type是GET時才會用於強制修改字符集(charset)。通常在本地和遠端的內容編碼不同時使用。