ASP.NET中jQuery调用WebService处理返回结果的方式

在asp.net中利用jQuery+WebService可以轻松的实现页面的ajax效果，但在如何处理WebService的返回值的问题上，很容易犯错误。

以下整理了在javascript中如何处理WebService的返回值。

以下是WebService部分的代码，在这段代码中特别定义了三个方法，在javascript中有不同的处理方式：

/// <summary>

    /// 该方法返回一个string对象

    /// </summary>

    /// <returns></returns>

    [WebMethod]

    public string HelloWorld() {

        return "Hello World";

    }

    /// <summary>

    /// 该方法返回一个string数组

    /// </summary>

    /// <returns></returns>

    [WebMethod]

    public string[] GetStringArray() {

        return new String[] { "China","Ameria","Canada"};

    }    

    /// <summary>

    /// 该方法返回一个User对象集合

    /// </summary>

    /// <returns></returns>

    [WebMethod]

    public List<User> GetUsers() {

        return new List<User>() { 

            new User(){Id="s001",Name="aniu",Age=20},

            new User(){Id="s002",Name="dddd",Age=30},

            new User(){Id="s003",Name="ssss",Age=40},

            new User(){Id="s004",Name="aaaa",Age=50}

        };

    }

下面是javascript部分的代码，重点突出在处理返回值时的jQuery处理方法和DOM方法的区别，以及返回data类型为“xml”和“json”类型的不同

1.第一种形式：jQuery.ajax调用返回string的WebService的方法

//WebService默认的返回数据类型为xml

function checkUserName() {

    $.ajax({

        type: "post",

        url: "WebService.asmx/HelloWorld",

        data: "name=" + $("#txtName").val(),

dataType: "xml",//xml格式

        success: function (e) {

//jQuery对象形式处理结果

            alert($(e).text());

//DOM对象形式处理结果

            alert(e.documentElement.firstChild.nodeValue);

        }

    });

}

//下面将返回结果变为“json”类型，处理方式将发生变化

$("#btn1").click(function () {

    $.ajax({

        type: "post",

        contentType: "application/json",

        url: "TestWebService.asmx/HelloWorld",

        data: "{}",

        dataType: "json",//json格式

        success: function (result) {

            alert(result.d);

        }

    });

});

小结：从以上处理代码来看，返回的是单个值时，json格式数据比xml格式数据处理更方便

2.第二种形式：jQuery.ajax调用返回string[]数组的WebService的方法

//返回结果为xml数据格式，分别采用jQuery和DOM方式处理结果

$("#btn2_xml").click(function () {

    $.ajax({

        type: "post",

        url: "TestWebService.asmx/GetStringArray",

        success: function (result) {

            //jQuery方式获取内容

            //string:节点名，result.documentElement:查找的上下文

            $("string", result.documentElement).each(function (i) {

                alert($(this).text());

            });

            //DOM方式获取内容

            var strings = entElement.getElementsByTagName("string");

            for (var i = 0; i < strings.length; i++) {

                alert(strings[i].firstChild.nodeValue); //特别注意这里的dom写法

            }

        }

    });

});

//返回结果为json数据格式，分别采用jQuery和DOM方式处理结果

$("#btn2").click(function () {

    $.ajax({

        type: "post",

        contentType: "application/json",

        url: "TestWebService.asmx/GetStringArray",

        data: "{}",

        dataType: "json",

        success: function (result) {

            //jQuery方式获取内容

            $(result.d).each(function (i) {

                alert(this);

            });

            //DOM方式获取内容

            for (var i = 0; i < result.d.length; i++) {

                alert(result.d[i]);//直接将d作为数组处理

    }

        }

    });

});

小结：从以上代码可以看出，如果返回的是xml格式数据，将数据封装为jQuery对象后处理比处理原始xml数据更加容易，而且jQuery是跨浏览器的，DOM与浏览器相关，可能

出现浏览器兼容的问题

3.第三种形式：jQuery.ajax调用返回List<User>集合数据的WebService的方法

//返回结果为xml数据格式，分别采用jQuery和DOM方式处理结果

$("#btnList_xml").click(function () {

    $.ajax({

        type: "post",

        contentType: "application/xml",

        url: "TestWebService.asmx/GetUsers",

        data: "{}",

        dataType: "xml",

        success: function (result) {

            //jQuery方式获取内容

            $("User", result.documentElement).each(function (i) {

                alert($(this).find("Id").text() + "\t"

                    + $(this).find("Name").text() + "\t"

                    + $(this).find("Age").text());

            });

            //DOM方式获取内容

            var users = result.documentElement.getElementsByTagName("User");

            for (var i = 0; i < users.length; i++) {

                var id =users[i]. 

    getElementsByTagName("Id")[0].firstChild.nodeValue;

                var name = users[i].

getElementsByTagName("Name")[0].firstChild.nodeValue;

                var age = users[i].

getElementsByTagName("Age")[0].firstChild.nodeValue;

                alert(id + "\t" + name + "\t" + age);

            }

        }

    });

});

//返回结果为json数据格式，分别采用jQuery和DOM方式处理结果

$("#btnList").click(function () {

    $.ajax({

        type: "post",

        contentType: "application/json",

        url: "TestWebService.asmx/GetUsers",

        data: "{}",

        dataType:"json",

        success: function (result) {

            //jQuery方式获取内容

            $(result.d).each(function (i) {

                alert(this.Id + "\t" + this.Name + "\t" + this.Age);

            });

            //DOM方式获取内容

            var r = result.d;

            for (var i = 0; i < r.length; i++) {

                alert(r[i].Id + "\t" + r[i].Name + "\t" + r[i].Age);

            }

        }

    });

});

小结：从以上的处理代码来看，如果返回的json格式数据，用jQuery和javascript方式处理的难易程度相差无几，只是处理的代码格式有点不同，所以返回对象集合数据最好返回json格式，这样不管用哪种方式，处理起来都相当方便。

总结：jQuery调用WebService，在处理返回数据格式上尽量采用json格式，处理起来要方便许多。关键是要区分jQuery对象和DOM对象在处理数据的不同之处，包括语法、属性和方法的使用等方面。

总结：jQuery调用WebService，在处理返回数据格式上尽量采用json格式，处理起来要方便许多。关键是要区分jQuery对象和DOM对象在处理数据的不同之处，包括语法、属性和方法的使用等方面。

附：以上三个WebService方法的xml数据内容如下：

 

                   HelloWorld方法的返回结果

GetStringArray方法的返回结果

GetUsers方法的返回结果