解析Jquery函數：$.get(),$.post(),$.ajax(),$.getJSON() 操做JSON數據

一，$.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: p_w_picpaths,
id: 001,
size: large
}, function(json) {
alert(json.p_w_picpaths[0].link);
//此處json就是遠程傳回的json對象，假設其格式以下：
//{'p_w_picpaths' : [
// {link: p_w_picpaths/001.jpg, x :100, y : 100},
// {link: p_w_picpaths/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