詳細解讀Jquery各Ajax函數

來源:互聯網
上載者:User
$.get(),$.post(),$.ajax(),$.getJSON()

一,$.get(url,[data],[callback])

說明:url為請求地址,data為請求資料的列表,callback為請求成功後的回呼函數,該函數接受兩個參數,第一個為伺服器返回的資料,第二個參數為伺服器的狀態,是選擇性參數。

而其中,伺服器返回資料的格式其實是字串形勢,並不是我們想要的json資料格式,在此引用只是為了對比說明

$.get("data.php",$("#firstName.val()"),function(data){$("#getResponse").html(data); }//返回的data是字串類型);

二,$.post(url,[data],[callback],[type])

說 明:這個函數跟$.get()參數差不多,多了一個type參數,type為請求 的資料類型,可以是html,xml,json等類型,如果我們設定這個參數為:json,那麼返回的格式則是json格式的,如果沒有設定,就 和$.get()返回的格式一樣,都是字串的

$.post("data.php",$("#firstName.val()"),function(data){$("#postResponse").html(data.name);},"json"//設定了擷取資料的類型,所以得到的資料格式為json類型的);

三,$.ajax(opiton)

說明:$.ajax()這個函數功能強大,可以對ajax進行許多精確的控制,需要詳細說明的請參照相關資料

$.ajax({url: "ajax/ajax_selectPicType.aspx",data:{Full:"fu"},type: "POST",dataType:'json',success:CallBack,error:function(er){BackErr(er);}});

四,$.getJSON(url,[data],[callback])

$.getJSON("data.php",$("#firstName.val()"),function(jsonData){$("#getJSONResponse").html(jsonData.id);}//無需設定,直接擷取的資料類型為json,所以調用時需要使用jsonData.id方式);

When Ajax meets jQuery 基於AJAX的應用現在越來越多,而對於前台開發人員來說,直接和底層的HTTPRequest打交道又不是一件令人愉快的事情。jQuery既然封裝了 JavaScript,肯定已經考慮過AJAX應用的問題。的確,如果用jQuery寫AJAX會比直接用JS寫方便N倍。(不知道用jQuery長了, 會不會喪失對JS的知識了……) 這裡假設大家對jQuery文法已經比較熟悉,來對ajax的一些應用作一些總結。
載入靜態頁面

load( url, [data], [callback] );
url (String) 請求的HTML頁的URL地址
data (Map)(選擇性參數) 發送至伺服器的 key/value 資料
callback (Callback) (選擇性參數) 請求完成時(不需要是success的)的回呼函數
load()方法可以輕鬆載入靜態頁面內容到指定jQuery對象。
$('#ajax-div').load('data.html');

這樣,data.html的內容將被載入到ID為ajax-div的DOM對象之內。你甚至可以通過制定ID來實現載入部分內容的Ajax操作,如:

$('#ajax-div').load('data.html#my-section');

實現GET和POST方法

get( url, [data], [callback] )
url (String) 發送請求的URL地址.
data (Map)(選擇性參數) 要發送給伺服器的資料,以 Key/value 的索引值對形式表示,會做為QueryString附加到請求URL中
callback (Callback) (選擇性參數) 載入成功時回呼函數(只有當Response的返回狀態是success才是調用該方法)
很顯然這是一個專門實現GET方式的函數,使用起來也相當的簡單
$.get('login.php', {   id      : 'Robin',   password: '123456',   gate    : 'index'  }, function(data, status) {   //data為返回對象,status為請求的狀態   alert(data);   //此時假設伺服器指令碼會返回一段文字"你好,Robin!",那麼瀏覽器就會彈出對話方塊顯示該段文字   alert(status);   //結果為success, error等等,但這裡是成功時才能啟動並執行函數  });
post( url, [data], [callback], [type] )
url (String) 發送請求的URL地址.
data (Map)(選擇性參數) 要發送給伺服器的資料,以 Key/value 的索引值對形式表示
callback (Callback) (選擇性參數) 載入成功時回呼函數(只有當Response的返回狀態是success才是調用該方法)
type (String) (選擇性參數) 請求資料的類型,xml,text,json等
同樣是jQuery提供的一個簡便函數,其實用法
$.post('regsiter.php', {   id:'Robin',   password: '123456',   type:'user'  },function(data, status) {   alert(data);  }, "json");

事件驅動的指令碼載入函數:getScript()

getScript( url, [callback] )
url (String) 待載入 JS 檔案地址
callback (Function) (可選) 成功載入後回呼函數
getScript() 函數可以遠程載入JavaScript指令碼並且執行。這個函數可以跨 域載入JS檔案(神奇……?!)。這個函數的意義是巨大 的,它可以很大程度的縮減頁面初次載入的代碼量,因為你可以根據使用者的互動來載入相應的JS檔案,而不必在頁面初始化的時候全部載入。
$.getScript('ajaxEvent.js', function() {   alert("Scripts Loaded!");   //載入ajaxEvent.js,並且在成功載入後顯示對話方塊提示。  });

構建資料通訊的橋樑:getJSON()

getJSON(url,[data],[callback])
url (String) 發送請求地址
data (Map) (可選) 待發送 Key/value 參數
callback (Function) (可選) 載入成功時回呼函數。
JSON 是一種理想的資料轉送格式,它能夠很好的融合與JavaScript或其他宿主語 言,並且可以被JS直接使用。使用JSON相比傳統的通過 GET、POST直接發送”裸體”資料,在結構上更為合理,也更為安全。至於jQuery的getJSON()函數,只是設定了JSON參數的 ajax()函數的一個簡化版本。這個函數也是可以跨域使用的,相比get()、post()有一定優勢。另外這個函數可以通過把請求url寫 成”myurl?callback=X”這種格式,讓程式執行回呼函數X。
$.getJSON('feed.php',{   request: images,   id:      001,   size:    large   }, function(json) {    alert(json.images[0].link);    //此處json就是遠程傳回的json對象,假設其格式如下:    //{'images' : [    // {link: images/001.jpg, x :100, y : 100},    // {link: images/002.jpg, x : 200, y 200:}    //]};   } );

更底層的ajax()函數
雖然get()和post()函數非常簡潔易用,但是對於更複雜的一些設計需求還是無法實現,比如在ajax發送的不同時段做出不同的動作等。jQuery提供一個更為具體的函數:ajax()。

ajax( options )
ajax()提供了一大票參數,所以可以實現相當複雜的功能。
參數名 類型 描述
url String (預設: 當前頁地址) 發送請求的地址。
type String (預設: “GET”) 請求方式 (“POST” 或 “GET”), 預設為 “GET”。
注意:其它 HTTP 要求方法,如 PUT 和 DELETE 也可以使用,但僅部分瀏覽器支援。
timeout Number 佈建要求逾時時間(毫秒)。此設定將覆蓋全域設定。
async Boolean (預設: true) 預設設定下,所有請求均為非同步請求。
如果需要發送同步請求,請將此選項設定為 false。
注意,同步請求將鎖住瀏覽器,使用者其它操作必須等待請求完成才可以執行。
beforeSend Function 發送請求前可修改 XMLHttpRequest 對象的函數,如添加自訂 HTTP 頭。
XMLHttpRequest 對象是唯一的參數。
function (XMLHttpRequest) {this; // the options for this ajax request}
cache Boolean (預設: true) jQuery 1.2 新功能,設定為 false 將不會從瀏覽器緩衝中載入請求資訊。
complete Function 請求完成後回呼函數 (請求成功或失敗時均調用)。
參數: XMLHttpRequest 對象,成功資訊字串。
function (XMLHttpRequest, textStatus) {this; // the options for this ajax request}
contentType String (預設: “application/x-www-form-urlencoded”) 發送資訊至伺服器時內容編碼類別型。預設值適合大多數應用場合。
data Object,
String
發送到伺服器的資料。將自動轉換為請求字串格式。GET 請求中將附加在 URL 後。
查看 processData 選項說明以禁止此自動轉換。必須為 Key/Value 格式。
如果為數組,jQuery 將自動為不同值對應同一個名稱。
如 {foo:["bar1", "bar2"]} 轉換為 ‘&foo=bar1&foo=bar2′。
dataType String 預期伺服器返回的資料類型。如果不指定,jQuery 將自動根據 HTTP 包 MIME 資訊
返回 responseXML 或 responseText,並作為回呼函數參數傳遞,可用值:

“xml”: 返回 XML 文檔,可用 jQuery 處理。

“html”: 返回純文字 HTML 資訊;包含 script 元素。

“script”: 返回純文字 JavaScript 代碼。不會自動緩衝結果。

“json”: 返回 JSON 資料 。

“jsonp”: JSONP 格式。使用 JSONP 形式調用函數時,

如 “myurl?callback=?” jQuery 將自動替換 ? 為正確的函數名,以執行回呼函數。

error Function (預設: 自動判斷 (xml 或 html)) 請求失敗時將調用此方法。

這個方法有三個參數:XMLHttpRequest 對象,錯誤資訊,(可能)捕獲的錯誤對象。

function (XMLHttpRequest, textStatus, errorThrown) {// 通常情況下textStatus和errorThown只有其中一個有值this; // the options for this ajax request}
global Boolean (預設: true) 是否觸發全域 AJAX 事件。設定為 false 將不會觸發全域 AJAX 事件,

如 ajaxStart 或 ajaxStop 。可用於控制不同的Ajax事件

ifModified Boolean (預設: false) 僅在伺服器資料改變時擷取新資料。

使用 HTTP 包 Last-Modified 頭資訊判斷。

processData Boolean (預設: true) 預設情況下,發送的資料將被轉換為對象(技術上講並非字串)

以配合預設內容類型 “application/x-www-form-urlencoded”。

如果要發送 DOM 樹資訊或其它不希望轉換的資訊,請設定為 false。

success Function 請求成功後回呼函數。這個方法有兩個參數:伺服器返回資料,返回狀態
function (data, textStatus) {// data could be xmlDoc, jsonObj, html, text, etc...this; // the options for this ajax request}

你 可以指定xml、script、html、json作為其資料類型,可以為beforeSend、error、sucess、complete等狀態設定 處理函數,眾多其它參數也可以訂完完全全定義使用者的Ajax體驗。下面的例子中,我們用ajax()來調用一個XML文檔:

$.ajax({    url: 'doc.xml',    type: 'GET',    dataType: 'xml',    timeout: 1000,    error: function(){        alert('Error loading XML document');    },    success: function(xml){        alert(xml);  //此處xml就是XML的jQuery對象了,你可以用find()、next()或XPath等方法在裡面尋找節點,和用jQuery操作HTML對象沒有區別    }});

進一步瞭解AJAX事件
前面討論的一些方法都有自己的事件處理機制,從頁面整體來說,都只能說是局部函數。jQuery提供了AJAX全域函數的定義,以滿足特殊的需求。下面是jQuery提供的所有函數(按照觸發順序排列如下):

ajaxStart
(全域事件) 開始新的Ajax請求,並且此時沒有其他ajax請求進行中
beforeSend
(局部事件) 當一個Ajax請求開始時觸發。如果需要,你可以在這裡設定XMLHttpRequest對象
ajaxSend
(全域事件) 請求開始前觸發的全域事件
success
(局部事件) 請求成功時觸發。即伺服器沒有返回錯誤,返回的資料也沒有錯誤
ajaxSuccess
全域事件全域的請求成功
error
(局部事件) 僅當發生錯誤時觸發。你無法同時執行success和error兩個回呼函數
ajaxError
全域事件全域的發生錯誤時觸發
complete
(局部事件) 不管你請求成功還是失敗,即便是同步請求,你都能在請求完成時觸發這個事件
ajaxComplete
全域事件全域的請求完成時觸發
ajaxStop
(全域事件) 當沒有Ajax進行中中的時候,觸發

局部事件在之前的函數中都有介紹,我們主要來看看全域事件。對某個對象進行全域事件監聽,那麼全域中的AJAX動作,都會對其產生影響。比如,當頁面在進行AJAX操作時,ID為”loading”的DIV就顯示出來:

$("#loading").ajaxStart(function(){   $(this).show(); });

全 局事件也可以協助你編寫全域的錯誤相應和成功相應,而不需要為每個AJAX請求獨立設定。有必要指出,全域事件的參數是很有用的。除了 ajaxStart、ajaxOptions,其他事件均有event, XMLHttpRequest, ajaxOptions三個參數。第一個參數即事件本身;第二個是XHR對象;第三個是你傳遞的ajax參數對象。在一個對象裡顯示全域的AJAX情況:

$("#msg").beforeSend(function(e,xhr,o) { $(this).html("正在請求"+o.url); }).ajaxSuccess(function(e,xhr,o) { $(this).html(o.url+"請求成功"); }).ajaxError(function(e,xhr,o) { $(this).html(o.url+"請求失敗");});

很顯然,第三個參數也可以協助你傳遞你在AJAX事件裡加入的自訂參數。 在單個AJAX請求時,你可以將global的值設為false,以將此請求獨立於AJAX的全域事件。

$.ajax({   url: "request.php",   global: false,   // 禁用全域Ajax事件. });

如果你想為全域AJAX設定參數,你會用上ajaxSetup()函數。例如,將所有AJAX請求都傳遞到request.php,;禁用全域方法;強制用POST方法傳遞:

$.ajaxSetup({  url: "request.php",  global: false,  type: "POST"});

一些你不得不知道的方法
寫AJAX肯定離不開從頁面擷取相應的值。在這裡簡單列舉一些方法:

val()
val()函數可以返回表單組建的值,例如任何種類input的值。配合選擇符操作,你可以輕易擷取選項組、輸入框、按鈕等元素的值。
$("input[name='info']:text").val();//返回名字為info的文字框的值$("input[name='pass']:password").val();//返回名字為pass的密碼框的值$("input[name='save']:radio").val();//返回名字為save的單選項的值//以此類推
serialize()
serialize函數可以幫你把表單對象的所有值都轉換為字串序列。如果你要寫GET格式的請求,這個就非常方便了。
serializeArray()
和serialize()類似,只不過它返回的是JSON對象。

AJAX應用參考
(WordPress) 使用 jQuery 實現 Ajax 留言 : http://hellobmw.com/archives/ajax-comments-with-jquery-for-wordpress.html
利用JQuery方便實現基於Ajax的資料查詢、排序和分頁功能 : http://www.malsup.com/jquery/form/

http://www.cnblogs.com/henryfan/archive/2007/01/27/631954.html
jQuery – ajax無重新整理儲存例子 : http://www.phpchina.com/1296/viewspace_12580.html
參考文獻
使用 jQuery 簡化 Ajax 開發 : http://www.ibm.com/developerworks/cn/xml/x-ajaxjquery.html
jQuery Official Documention : http://docs.jquery.com/Ajax
jQuery Ajax 全解析 : http://www.cnblogs.com/QLeelulu/archive/2008/04/21/1163021.html
jQuery中Ajax事件 : http://shawphy.com/2008/08/ajax-event-in-jquery.html

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.