Jquery .ajax方法分析（一）

jQuery.ajax( options )

有很多選項，介紹其中的幾個：

·dataType：想從伺服器得到哪種類型的資料。xml,html,script,json,jsonp,text

·success：請求成功後的處理函數

·type：以POST或GET的方式請求。預設GET。PUT和DELETE也可以用，但并不是所有的浏覽器都支援

·url：請求的目的位址，須是一個字元串。

·complete：不管請求成功還是錯誤，隻要請求完成，可以執行的事件。

·beforeSend：傳遞異步請求之前的事件。

這次說解，使用firedebug來配合說解。

（一）請求ashx檔案，并添加ajax事件，添加緩沖提示

描述：請求資料，請求逾時時間設定為5秒，如果逾時，那麼輸出逾時提示，且在這5秒中的等待過程中，提供等圖示，5秒之後，提示請求逾時。

（1）ashx檔案

Customer customer = new Customer

{ Unid = 1, CustomerName = "宋江", Memo = "天魁星", Other = "黑三郎" };

        string strJson = Newtonsoft.Json.JsonConvert.SerializeObject(customer);

        System.Threading.Thread.Sleep(1000*7);

        context.Response.Write(strJson);

為了讓用戶端請求逾時，服務設定延時7秒。

（2）ajax post請求

function ajax_ashx() {

    $.ajax({

        url: "webdata/ajax_1.ashx",

        type: "post",

        success: function(data) {

            var jsonObject = $.jsonToObject(data);

            var tt = '';

            $.each(jsonObject, function(k, v) {

                tt += k + "：" + v + "<br/>";

            });

            $("#divmessage").html(tt);

        },

        cache: false,

        timeout: 5000,

        error: function() {

            alert("逾時");

        }

    });}

設定逾時時間5000ms，逾時錯誤出示逾時錯誤。

（3）設定用戶端請求等待圖示

·<img src="images/loader.gif" id="ajaximg" /> 找個小圖示

·為這個圖示設定ajax事件

$("#ajaximg").bind("ajaxSend", function() { Show(); });

    $("#ajaximg").bind("ajaxComplete", function() { Hide(); });

function Hide() {

    $("#ajaximg").hide();

}

function Show() {

    $("#ajaximg").show();

在用戶端5秒請求的時間限制下，請求逾時，提示逾時錯誤。

·在ashx端contentType的設定對傳回的資料沒有影響

·用戶端dataType也沒有影響，可以省略。

·在firebug裡可以看到傳回的資料為：

{"Unid":1,"CustomerName":"宋江","Memo":"天魁星","Other":"黑三郎"}

是以可以按以前我說過的方法進行解析。

（二）正常請求，并解析

·ashx

        Customer customer2 = new Customer

{ Unid = 2, CustomerName = "吳用", Memo = "天機星", Other = "智多星" };

        List<Customer> _list = new List<Customer>();

        _list.Add(customer);

        _list.Add(customer2);

        System.Threading.Thread.Sleep(1000 * 3);

·ajax post

function ajax_ashxList() {

        dataType: "json",

            $.each(data, function(k, v) {

            $.each(v, function(kk, vv) {

            tt += kk + "：" + vv + "<br/>";

                });

    });

·dataType要是json

·在firebug裡

]

雖然是字串,但這裡直接用就行,不用轉換為json對象。這一點我現在還不明白怎麼回事。

（三）請求ws

這次請求傳回字串類型的web方法。

（1）Hello

[WebMethod]

    public string HelloWorld()

    {

       return "Hello World";

    }

function ajax_webserviceHello() {

        contentType: "application/json",

        url: "ajax_1.asmx/HelloWorld",

        data: "{}",

        dataType: 'json',

            alert(data.d);

·contentType，data都不能為空，即使data為空，也要帶空參數

{"d":"Hello World"}

發現服務端請求到的資料是這樣的。是以，通路時，要以data.d來通路。（在.net3.5中）。但也可以如下通路：

$.each(data, function(k, v) {

                alert(v);

（2）Customer

這次得到一個客戶實體

    public string GetCustomer()

        Customer customer = new Customer { Unid = 1, CustomerName = "宋江", Memo = "天魁星", Other = "黑三郎" };

        return strJson;

function ajax_webserviceCustomer() {

        url: "ajax_1.asmx/GetCustomer",

            var jsonObject = $.jsonToObject(data.d);

發現傳回的也是以d為key的一個object。

這點應該注意。

（3）customer list

    public string GetCustomerList()

        Customer customer = new Customer

        Customer customer2 = new Customer

        string strJson = Newtonsoft.Json.JsonConvert.SerializeObject(_list);

        return strJson;

function ajax_webserviceCustomerList() {

        url: "ajax_1.asmx/GetCustomerList",

            $("#divmessage").html(tt);

這也是一個以d為key的對象。

（4）with para

    public string GetCustomerListWithPara(int iUnid)

 { Unid = 2, CustomerName = "吳用", Memo = "天機星", Other = "智多星" };

        var cus = from q in _list

                  where q.Unid == iUnid

                  select q;

        string strJson = Newtonsoft.Json.JsonConvert.SerializeObject(cus);

function ajax_webserviceCustomerListWithPara() {

        url: "ajax_1.asmx/GetCustomerListWithPara",

        data: "{iUnid:"+1+"}",

                $.each(v, function(kk, vv) {

                    tt += kk + "：" + vv + "<br/>";

綜上所述，在對web服務進行請求時：

·在.net3.5中，通路web服務時，傳回的元素是一個以d為key的k/v對。如果要進行下一步解析，要認識d屬性。（這是在當web方法傳回json字串時成立）

·在.net3.5中，通路web服務，要對web服務添加修飾：[System.Web.Script.Services.ScriptService] 否則，當.ajax()請求服務時，會有異常：

部落格園大道至簡

<a href="http://www.cnblogs.com/jams742003/" target="_blank">http://www.cnblogs.com/jams742003/</a>

轉載請注明：部落格園