找回密码
当前位置：Mikel > 开发笔记 > 正文

[转载]对Jquery+JSON+WebService的一点认识

2011-10-15 分类：开发笔记 / JavaScript 阅读(997) 评论(0)

[转载]对Jquery+JSON+WebService的一点认识 – tyb1222 – 博客园.

JQuery作为一款优秀的JS框架，简单易用的特性就不必说了。在实际的开发过程中，使用JQ的AJAX函数调用WebService

的接口实现AJAX的功能也成了一种比较普遍的技术手段了。WebService接口的实现，通常都是由OOP语言实现的。所以

在WebService的接口函数中，难免可能会遇到除了简单数据类型的复杂数据类型。复杂的数据的数据类型机有可能是

WebService接口中的参数，也有可能是WebService的返回值。本文所叙述的要点为：

1、对于WebService接口复杂类型的参数，JQ调用的时候传入的JSON数据应该如何表示。？

2、JQ对WebService调用获取JSON数据类型。

3、JQ调用的时对Webservice返回的复杂数据类型有什么样要求。？

环境：JQ版本：1.4.2、VS2008 SP1。

测试一：对于WebService简单参数类型：

view sourceprint?
01 WebService接口函数代码如下：
02
03 [WebMethod(Description = "测试方法")]
04 public string ProcessPersonalInfo(Person person)
05 {
06 return person.Name + person.Tel;
07 }
08 JQ调用代码如下：
09
10 $.ajax({
11
12 type: "POST",
13
14 url: "WebService1.asmx/GetString",
15
16 dataType: "json",
17
18 contentType: "application/json; charset=utf-8",
19
20 data: "{'name':'zhangsan'}",
21
22 success: function(json) { alert(json.d) },
23
24 error: function(error) {
25
26 alert("调用出错" + error.responseText);
27
28 }
29 });

提示：在$.ajax函数中，data必须要以字符串的形式表示JSON，而不能直接用JSON数据传进去。可能有些朋友对JSON对象和JSON对象的字符串

不大好区分，其实，字符串类似C#里用“”引起来的东西，而JSON对象是直接写在{}中的。简单的测试方法是直接通过alert函数弹出，如果显示[object:object]

则为JSON对象，否则就是一个字符串。

结果如下图：

测试二：对于WebService复杂参数类型：

01 WebService接口函数代码如下：
02
03 [WebMethod(Description = "测试方法")]
04 public string ProcessPersonalInfo(Person person)
05 {
06 return person.Name + person.Tel;
07 }
08
09 Person实体：
10
11 public class Person
12 {
13 public string Name { get; set; }
14
15 public int Age { get; set; }
16
17 public string Address { get; set; }
18
19 public string Tel { get; set; }
20
21 }
22
23 JQ调用代码如下：
24
25 $.ajax({
26
27 type: "POST",
28
29 url: "WebService1.asmx/ProcessPersonalInfo",
30
31 dataType: "json",
32
33 contentType: "application/json; charset=utf-8",
34
35 data: "{'person':{'Name':'zhangsan','Age':28,'Address':'beijing',Tel:'01082658866'}}"，
36
37 success: function(json) { alert(json.d) },
38
39 error: function(error) {
40
41 alert("调用出错" + error.responseText);
42 }
43 });

结果如下图：

调用过程与简单参数类型类似，就是通过在JS中用一个表示Person的person对象的字符串，发往客户端后，WebService会自动将person对象的字符串

转换为Person实体对象。

测试三：对于WebService复杂返回类型

01 WebService接口函数代码如下：
02
03 [WebMethod(Description = "测试方法")]
04 public List<Person> GetPersonalList()
05 {
06 List<Person> persons = new List<Person>
07 {
08 new Person {Address = "beijing", Age = 25, Name = "zhangshan", Tel = "01082678866"}
09 };
10 return persons;
11 }<br> JQ调用代码如下：
12
13 $.ajax({
14
15 type: "POST",
16
17 url: "WebService1.asmx/GetPersonalList",
18
19 dataType: "json",
20
21 contentType: "application/json; charset=utf-8",
22
23 success: function(json) { $(json.d).each(function() { alert(this.Name + "-" + this.Age + "-" + this.Address + "-" + this.Tel) }) },
24
25 error: function(error) {
26
27 alert("调用出错" + error.responseText);
28
29 }
30
31 });

如下图：

也就是说对于复杂返回类型，处理方式也是简单类型基本上是一样的。

曾听到有一种观念认为，Jq调用时WebSevice,用JSON作为数据交互格式时，返回数据类型一定是可序列化的。真的是这样吗。？

.Net的基本数据类型确实是可序列化的，这一点没有疑问。那么List<T>数据类型是否可以序列化呢。？看看List<T>的元数据(Metadata)信息

就知道了。。

[DebuggerTypeProxy(typeof (Mscorlib_CollectionDebugView<T>))]

[DebuggerDisplay(“Count = {Count}”)]

[Serializable]

public class List<T> : IList<T>, ICollection<T>, IEnumerable<T>, IList, ICollection, IEnumerable

{

/**/

}

如果上面的说法成立，在这种情况下，调用成功也无可厚非。但是问题真是这样吗。？下面继续测试一下：

测试四：对于WebService复杂返回类型

01 [WebMethod(Description = "测试方法")]
02 public Person GetPerson()
03 {
04 Person person = new Person {<br>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　Address = "beijing", Age = 27, <br>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　Name = "zhangshan", Tel = "01082678866" <br>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　};
05 return person;
06 }
07
08 JQ调用代码如下：
09
10 $.ajax({
11
12 type: "POST",
13
14 url: "WebService1.asmx/GetPerson",
15
16 dataType: "json",
17
18 contentType: "application/json; charset=utf-8",
19
20 //data: "{'person':{'Name':'zhangsan','Age':28,'Address':'beijing',Tel:'01082658866'}}",
21
22 success: function(json) { $(json.d).each(function() { alert(this.Name + "-" + this.Age + "-" + this.Address + "-" + this.Tel) }) },
23
24 error: function(error) {
25
26 alert("调用出错" + error.responseText);
27
28 }
29
30 });

如下图：

但是测试四中，GetPerson()方法返回Person数据类型。再看看Person实体的定义，根本就没有标记问可序列化。

由结果可知：JQ调用WebService，并不一定需要返回复杂类型的数据必须是可序列化的。

下面做一个有趣的测试。大家都知道WebService的返回类型不能为Hashtable类型。因为它实现了因为它实现 IDictionary接口。

测试五：对于WebService复杂返回类型

01 [WebMethod(Description = "测试方法")]
02 public Hashtable GetPersonalHashtable()
03 {
04 Hashtable hashtable = new Hashtable();
05
06 Person person = new Person { Address = "beijing", Age = 25, Name = "zhangshan", Tel = "01082678866" };
07
08 hashtable.Add(1, person);
09
10 return hashtable;
11 }
12
13 JQ调用代码如下：
14
15 $.ajax({
16
17 type: "POST",
18
19 url: "WebService1.asmx/GetPersonalHashtable",
20
21 dataType: "json",
22
23 contentType: "application/json; charset=utf-8",
24
25 data: data,
26
27 success: function(json) { $(json.d).each(function() { alert(this["one"].Name) }) },
28
29 error: function(error) {
30
31 alert("调用出错" + error.responseText);
32
33 }
34
35 });

这样，Jq居然能调用成功。这点是有点让人意想不到的。

总结：

1、Jq与WebService之间以JSON作为数据交换形式的时候，contentType: “application/json; charset=utf-8″是必须指定的。

要不然WebService不知道以何种数据作为转换。

2、Jq调用WebService返回复杂数据类型并不一定需要类型为可序列化。

3、WebService返回的JSON数据通过”.d”获取如上面测试中的alert(json.d)

赞(0) 打赏
分享到： 更多 (0)
标签：

相关推荐

热门标签

C# (813)ASP.NET MVC (619)Android (587)ASP.NET (447)数据库 (299)JavaScript (285)JQuery (221)PHP (210)SQLServer (197)程序开发 (156)架构设计 (155)源价值 (155)SQL (128)Java (111)EasyUi (85)教程 (76)网站 (67)Debug (63)互联网 (63)MySQL (60)Flash (56)搜索优化 (54)创意 (53)SEO (51)ASP.NET MVC3 (51)电子商务 (50)建站经验 (49)实例代码 (49)源码下载 (47)原创 (45)

分类

链接表

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏