DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 詳細解讀Jquery各Ajax函數($.get(),$.post(),$.ajax(),$.getJSON())
詳細解讀Jquery各Ajax函數($.get(),$.post(),$.ajax(),$.getJSON())
編輯:關於JavaScript     

一,$.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()提供了一大票參數,所以可以實現相當復雜的功能。

你 可以指定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對象。

以上所述是小編給大家介紹的詳細解讀Jquery各Ajax函數($.get(),$.post(),$.ajax(),$.getJSON()),希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家的支持!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved