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方法的返回结果