jquery Ajax 方法返回資料的擷取，包括JSON,XML,TXT

JQuery提供了一系列的全域方法對XMLHttpRequest對象進行了封裝，在進行Ajax開發過程中再也不用擔心瀏覽器用戶端的不致性問題了。

一、$.ajax(options)
它是最根本的JQuery Ajax方法，它只有一個參數options，該options參數中包含了請求資訊和回呼函數的資訊。參數內容都是key:value對形式出現，並且都是可選的。
文法：
$.ajax({options});
url：(string)發送請求的地址，可以是伺服器頁面也可以是WebService動作。
type：(string)請求方式，POST或GET
data：(object)向伺服器發送請求時帶去的資料。是key:value對形式，如：{name:"grayworm",sex:"male"}，如果是數組{works:["work1","work2"]}
dataType：(string)預期返回的資料類型。xml,html,json,text等
beforeSend：（Function）發送ajax請求前被觸發，如果返回false則取消本次請求。如果非同步請求需要顯示gif動畫，那應當在這裡設定相應<img>的可見。
function(XMLHttpRequest){ }

complete：(Function)請求調用完成後的回呼函數（請求成功或失敗時均調用），如果非同步請求顯示gif動畫，那應當在這裡設定相應的<img>不可見。
function(XMLHttpRequest,textStatus){
   //textStatus是描述返回狀態的字串
}

success：(Function)請求執行成功時的回呼函數
function(data,textStatus){
   //data是服務端返回的資料可以是xml、json、text等格式
   //textStatus是描述返回狀態的字串
}

error：(Function)請求執行失敗時的回呼函數
function(XMLHttpRequest,textStatus,errorThrown){
   //data是服務端返回的資料可以是xml、json、text等格式
   //textStatus,errorThrown是描述返回狀態的資訊
}

應用舉例：
1.向頁面發出請求，返回XML格式資料
頁面端代碼：


《圖3》
JQuery代碼：


《圖1》

2.向頁面發出請求，返回Json格式資料
頁面端代碼：


《圖4》
JQuery代碼：


《圖2》

3.向WebService發出請求，無參返回簡單類型非同步呼叫
服務端代碼：


《圖5》
JQuery代碼：


《圖6》

4.向WebService發出請求，有參返回簡單類型異就調用
服務端代碼：


《圖7》
JQuery代碼：


《圖8》

5.向WebService發出請求，返回實體物件的非同步呼叫
服務端代碼：


《圖9》
JQuery代碼：


《圖10》

6.向WebService發出請求，返回集合對象的非同步呼叫
服務端代碼：


《圖11》
JQuery代碼：


《圖12》

說明：
        WebService請求類型都為Post，WebService的Url為“[WebServiceUrl]/[WebMethod]”
        data要用Json的字串格式傳入
        設定了dataType為json後，result就直接為返回的Json對象。

二、$.get()和$.post()
$.ajax()是最基本的Ajax方法，在JQuery中又提供了兩個簡捷的Ajax調用方法$.get()和$.post()，這兩個方法實現了對$.ajax()的封裝。有了$.ajax()的基礎，下面兩個方法學習起來就很簡單了。
1.$.get()
文法：
$.get(url [,data] [,callback] [,type])
url：(string)請求的HTML頁的URL地址
data：(object)發送到伺服器的資料，以key/value對形式書寫，如：{name:"張三",age:"18"}
callback：(function)回呼函數，只有返回的狀態是success時才調用該方法。
type：(string)服務端返回的內容的格式。xml,html,json,text等

2.$.post()
文法：
$.post(url [,data] [,callback] [,type])
url：(string)請求的HTML頁的URL地址
data：(object)發送到伺服器的資料，以key/value對形式書寫，如：{name:"張三",age:"18"}
callback：(function)回呼函數，只有返回的狀態是success時才調用該方法。
type：(string)服務端返回的內容的格式。xml,html,json,text等

$.post()與$.get()很相似，只是資料參數傳遞方式不一樣，這二者與傳統的get/post提交方式相同。

應用舉例：
1.$.get()和$.post()向頁面發送非同步請求，返回XML資料
服務端代碼：


《圖3》
JQuery代碼：


《圖13》

2.$.get()和$.post()向頁面發送非同步請求，返回json資料
服務端代碼：


《圖4》
JQuery代碼：


《圖14》
3.$.get()和$.post()向WebService發送非同步請求


《圖15》：

三、序列化元素
如果頁面表單元素比較多，在發出ajax請求的時候需要將表單中所有的元素一起發送到服務端，如果還是使用key/value對形式的json文法傳遞參數的話，那需要在$.get()或$.post()中手寫很長的json參數。
在JQuery中為我們提供了序列化的方式來解決這個問題，序列化的方法是serialize()
範例程式碼：


《圖16》


《圖17》