jQuery.ajax個人小結

jQuery.ajax是jQuery封裝的ajax底層操作方法，同時jQuery也提供了jQuery.get、jQuery.post等幾個常用的高層封裝。下面是本人結合自己的理解和工作中的使用方式，對jQuery.ajax的幾種常見使用方式進行小結，紀錄於此僅當備忘所用。由於水平能力有限，文中不足或錯誤之處，還請廣大猿們指出。

在使用jQuery.ajax方法之前，我們要先瞭解一下它的參數定義。jQuery.ajax有很多選擇性參數，這裡僅簡要介紹本人工作中常用的幾個（更多參數介紹請見http://api.jquery.com/jQuery.ajax/）：

參數名	參數類型	預設值	描述
type	String	"GET"	請求方式（“GET”或"POST"，也可以用"PUT"/"DELETE"，但僅部分瀏覽器支援）
url	String	當前頁面地址	請求的地址
contentType	String	“application/x-www-form-urlencoded; charset=UTF-8”	發送至服務端的內容編碼方式
data	Object,String		發送至服務端的資料
dataType	String	智能推斷(xml, json, script, or html)	要求服務端返回的資料格式（"xml"/"html"/"script"/"json"/"jsonp"/"text"）
success(data,textStatus,XHR)	Function		請求成功時的回呼函數 data:由服務端返回並處理成dataType指定格式的資料； textStatus:描述狀態的字串; XHR:XMLHttpRequest對象
error(XHR,textStatus,errorThrown)	Function		請求失敗時的回呼函數 XHR:XMLHttpRequest對象; textStatus:錯誤資訊； errorThrown:(可選)Http響應文字部分（如"Not Found","Internal Server Error"）
complete(XHR,textStatus)	Function		請求完成時的回呼函數（請求成功或失敗都調用） XHR:XMLHttpRequest對象； textStatus:請求狀態（如"success","notmodified","error","timeout","abort","parsererror"）

這裡需要注意的是contentType與dataType的區別——由於data是發送至服務端的資料，本人經常誤將dataType認作是data的類型，其實contentType才是用戶端發送到服務端資料的類型，dataType是請求服務端返回的資料類型。

下面來看看jQuery.ajax方法與幾種服務端介面的搭配方式：

1、jQuery.ajax與一般處理常式（Handler.ashx）

服務端用一般處理常式時，一般都是我們自己手工通過Request.QueryString或Request.Form來解析用戶端請求的資料，所以contentType用預設的“application/x-www-form-urlencoded; charset=UTF-8”就好，data我習慣用key/value對來表示表單資料。

            $.ajax({                type: "GET",                url: "handler.ashx",                data: { name: 'heku', age: parseInt(Math.random() * 100) }, //發送至服務端的資料                dataType: "json", //要求服務端返回json                error: function (XHR, textStatus, errorThrown) { alert("XHR：" + XHR + "--textStatus:" + textStatus + "--errorThrown:" + errorThrown); },                success: function (data, TS, XHR) { $("#div1").append(data + "<br/>"); },                complete: function () { $("#div1").append("ajax訪問一般處理常式完成<br/><br/>"); }            });

一般處理常式中，要注意的就是Response.ContentType要和dataType要求返回的類型一致。

    public void ProcessRequest(HttpContext context)    {        string name = context.Request["name"];        string age = context.Request["age"];        string type = context.Request.RequestType;        System.Threading.Thread.Sleep(500);                context.Response.ContentType = "application/json";                JavaScriptSerializer jss = new JavaScriptSerializer();        string resultString = string.Format("【一般處理常式(返回json)】{0}--{1}--{2}--{3}", DateTime.Now.ToString(), name, age, type);        context.Response.Write(jss.Serialize(resultString));    }

2、jQuery.ajax與WebService

當服務端用WebService處理資料時，如果希望從服務端返回json類型的資料，除了dataType設定成json外，還要設定contentType為json，並且給服務端發送json類型的資料，這裡為什麼會這樣，我也不清楚。

            $.ajax({                type: "POST",                url: "WebService.asmx/GetTime",                contentType: "application/json", //發送資料的類型                data: "{name:'heku',age:" + parseInt(Math.random() * 100) + "}", //要加引號，代表json對象                dataType: "json", //要求返回和類型                error: function (XHR) { alert("出錯：" + XHR.responseText); },                success: function (data, TS, XHR) { $("#div1").append(data.d + "<br/>"); },                complete: function () { $("#div1").append("ajax訪問WebService完成<br/><br/>"); }            });

WebService可以添加ScriptMethod特性，來表明其處理的請求類型為"GET"還是"POST"。

    [WebMethod]    public string GetTime(string name, int age)    {        System.Threading.Thread.Sleep(1000);        return string.Format("【WebService方法】時間：{0}，姓名：{1},年齡：{2}", DateTime.Now.ToString(), name, age);    }

3、jQuery.ajax與後台方法

這種方式本質同WebService，只是是一種比較懶的做法，不用去新增一個Handler.ashx或WebService.asmx。直接在asp.net頁面的代碼檔案中，把某個方法標記為WebMethod。

Default.aspx(部分)

            $.ajax({                type: "POST",                url: "Default.aspx/GetTime",                contentType: "application/json", //發送資料的類型                data: "{name:'heku',age:" + parseInt(Math.random() * 100) + "}", //要加引號，代表json對象                dataType: "json", //要求返回和類型                error: function (XHR) { alert("出錯：" + XHR.responseText); },                success: function (data, TS, XHR) { $("#div1").append(data.d + "<br/>"); },                complete: function () { $("#div1").append("ajax訪問後台方法完成<br/><br/>"); }            });

Default.aspx.cs（部分）

    [System.Web.Services.WebMethod]    public static string GetTime(string name, int age)    {        System.Threading.Thread.Sleep(1000);        return string.Format("【後台方法】時間：{0}，姓名：{1},年齡：{2}", DateTime.Now.ToString(), name, age);    }