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>

转载请注明：博客园