码迷，mamicode.com
首页 > Web开发 > 详细

给Ajax一个漂亮的嫁衣——Ajax系列之五（下）之序列化和反序列化

时间：2016-04-18 11:41:47      阅读：255      评论：0      收藏：0      [点我收藏+]

标签：

给Ajax一个漂亮的嫁衣——Ajax系列之五（下）之序列化和反序列化

标签： ajaxdictionaryjsonobject服务器function
2012-07-25 18:41 2242人阅读 评论(6) 收藏 举报
技术分享 分类：
 

版权声明：本文为博主原创文章，未经博主允许不得转载。

    Ajax最强悍的功能莫过于服务器和客户端之间的异步交互，他们在交互的时候不是通过soap协议等，而是通过回调函数，以Json的格式传送数据。

 

    由于Json格式的限制，在很多情况下，稍微复杂一些的数据往往会引起循环引用的错误，至于什么是循环引用？什么时候会发生循环引用？这里不再赘述，详见上篇博客。

 

    都在强调Ajax的强大，那么就举这么一个例子：自定义一个复杂类型的数据，一个男孩类和一个女孩类互为对象，在客户端访问的时候就会出现循环引用，初学的我们或许会感叹：Ajax也不过如此嘛！其实不然，Ajax早已做好了解决这个问题的方法，那就是——序列化和反序列化！个人觉得它就好比一副穿在Json数据格式上的漂亮嫁衣，让程序猿们对Ajax青睐有嘉……

 

            技术分享

 

    上一篇博客中总结了微软已经为常用的dt家族（datatable、dataset、datarow）的序列化和反序列化的封装；这里让我们为自定义的数据类型定制一套自己的嫁衣吧！

    技术分享

   

    首先我们需要考虑这么几个问题：怎么来序列化和反序列化？什么时候需要序列化和反序列化？接下来就让每一个步代码来解释这些问题，希望看完这篇文章这几个问题可以迎刃而解。

 

 

==============================================================================================================================================================================

 

 

一、材料准备——循环引用的两个类的定义

 

    1、在服务端App_Code目录下添加ComplexType文件夹下创建BoyAndGirl.cs类文件。

 

    技术分享

    在BoyAndGirl.cs类文件中添加如下代码，定义Boy和Girl类，并指定可以相互访问。

   

[csharp] view plain copy
 
  1. <span style="font-size:18px;">using System;  
  2. using System.Data;  
  3. using System.Configuration;  
  4. using System.Web;  
  5. using System.Web.Security;  
  6. using System.Web.UI;  
  7. using System.Web.UI.WebControls;  
  8. using System.Web.UI.WebControls.WebParts;  
  9. using System.Web.UI.HtmlControls;  
  10.   
  11. namespace ComplexType  
  12. {  
  13.       
  14.     // 如果一个类型没有无参数的构造函数，那么也需要定义JavaScriptConverter，否则ASP.NET AJAX无法对其进行反序列化操作。  
  15.     public class Boy  
  16.     {  
  17.         public string Name;  
  18.   
  19.         public Girl  GirlFriend;  
  20.     }  
  21.   
  22.       
  23.     public class Girl  
  24.     {  
  25.         public string Name;  
  26.   
  27.         public Boy BoyFriend;  
  28.     }  
  29. }</span>  


   

    2、添加BoyGirlService.asmx服务，并在服务中创建Boy类和Girl类的循环引用。

   

[csharp] view plain copy
 
  1. <span style="font-size:18px;">using System;  
  2. using System.Web;  
  3. using System.Web.Services;  
  4. using System.Web.Services.Protocols;  
  5. using System.Web.Script.Services;  
  6. using ComplexType;  
  7. using System.Diagnostics;  
  8.   
  9. [WebService(Namespace = "http://tempuri.org/")]  
  10. [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]  
  11. [ScriptService]  
  12. public class BoyGirlService  : System.Web.Services.WebService {  
  13.   
  14.     [WebMethod]  
  15.     //建立循环引用  
  16.     public Boy GetBoyWithGirlFriend()  
  17.     {  
  18.         Boy boy = new Boy();  
  19.         boy.Name = "Terry";  
  20.           
  21.         Girl girl = new Girl();  
  22.         girl.Name = "Marry";  
  23.   
  24.         boy.GirlFriend = girl;  
  25.         girl.BoyFriend = boy;  
  26.   
  27.         return boy;  
  28.     }  
  29.   
  30.     [WebMethod]  
  31.     //定义一个在服务器端返回客户端一些字串的方法  
  32.     public string SetBoyWithGirlFriend(Boy boy)  
  33.     {  
  34.         //服务器端检测循环引用，如果不满足循环引用的话，会抛出异常  
  35.         //boy.GirlFriend.BoyFriend判断方式是不是觉得有点怪  
  36.         Debug.Assert(boy == boy.GirlFriend.BoyFriend);  
  37.         //客户端使用该方法，解析boy对象，返回相关的信息字串         
  38.         return String.Format(  
  39.             "It‘s {0}, his girlfriend is {1}",  
  40.             boy.Name, boy.GirlFriend.Name);  
  41.     }  
  42.       
  43. }</span>  


    现在我们已经在服务端定义了Boy类和Girl类，并在asmx文件中定义了可以让客户端Ajax的脚本调用的循环引用的方法。嫁衣的材料已经准备完毕。

 

二、嫁衣制作——自定义序列化和反序列化

 

    有了App_Code下的Boy类、Girl类的定义以及asmx中的循环引用的方法GetBoyWithGirlFriend，接下来，就着手DIY我们的嫁衣吧。

    在App_Code目录下添加Converter文件夹，并在该文件夹下创建BoyConverter.cs类，封装序列化的反序列化的方法。

   

[csharp] view plain copy
 
  1. <span style="font-size:18px;">using System;  
  2. using System.Data;  
  3. using System.Configuration;  
  4. using System.Web;  
  5. using System.Web.Security;  
  6. using System.Web.UI;  
  7. using System.Web.UI.WebControls;  
  8. using System.Web.UI.WebControls.WebParts;  
  9. using System.Web.UI.HtmlControls;  
  10. using System.Web.Script.Serialization;  
  11. using System.Collections.Generic;  
  12. using ComplexType;  
  13.   
  14. namespace Converter  
  15. {  
  16.   
  17.     public class BoyConverter : JavaScriptConverter  
  18.     {  
  19.         /// <summary>  
  20.         /// 服务器端自定义序列化，服务器端首先要检查回传的参数是否有循环引用，与BoyGirlService.asmx服务器端的Assert方法共同保证了服务器端的完整性。  
  21.         /// </summary>  
  22.         /// <param name="dictionary"></param>  
  23.         /// <param name="type"></param>  
  24.         /// <param name="serializer"></param>  
  25.         /// <returns></returns>  
  26.         public override object Deserialize(IDictionary<string, object> dictionary, Type type, JavaScriptSerializer serializer)  
  27.         {  
  28.             Boy boy = new Boy();  
  29.             boy.Name = (string)dictionary["Name"];  
  30.             //反序列化  
  31.             boy.GirlFriend = serializer.ConvertToType<Girl>(dictionary["GirlFriend"]);  
  32.             //重新建立起BoyFriend和Girlfriend之间的循环引用  
  33.             boy.GirlFriend.BoyFriend = boy;  
  34.   
  35.             return boy;  
  36.         }  
  37.         /// <summary>  
  38.         /// 自定义数据类型的序列化，这里要在web.config中的converters节点（相当于是一个路标）中，注册定义的序列化  
  39.         /// </summary>  
  40.         /// <param name="obj"></param>  
  41.         /// <param name="serializer"></param>  
  42.         /// <returns></returns>  
  43.         public override IDictionary<string, object> Serialize(object obj, JavaScriptSerializer serializer)  
  44.         {  
  45.             Boy boy = (Boy)obj;  
  46.             //json字串是一个json对象的字串表现形式，json对象是使用字典和列表（dictionary和list）两种结构互相嵌套、引用的方法来表示的对象；对于每一个对象来说，我们都可以想象成是一个字典，由key和value组成，一个key个value组成一个item；一个json对象可以有多个item；  
  47.             //先定义一个空的字典，返回的是一个字典，字典内部有两个项，一个是Name一个是GrilFriend，  
  48.             IDictionary<string, object> result = new Dictionary<string, object>();  
  49.   
  50.             result["Name"] = boy.Name;  
  51.             //先打乱Boy对象的GirlFriend原有的循环引用，或者说是先解开BoyFriend和GirlFriend之间的循环引用  
  52.             boy.GirlFriend.BoyFriend = null;  
  53.             //因为Girl有循环引用，所以，不能使用默认的方式输出，需要先打乱Boy对象的GirlFriend原有的循环引用  
  54.             result["GirlFriend"] = boy.GirlFriend;  
  55.   
  56.             return result;  
  57.         }  
  58.   
  59.         public override IEnumerable<Type> SupportedTypes  
  60.         {  
  61.             get  
  62.             {  
  63.                 //yield 关键字向编译器指示它所在的方法是迭代器块。  
  64.                 //在迭代器块中， yield 关键字与 return 关键字结合使用，向枚举器对象提供值。  
  65.                 //yield 关键字也可与 break 结合使用，表示迭代结束。  
  66.                 yield return typeof(Boy);  
  67.             }  
  68.         }  
  69.     }  
  70.   
  71. }</span>  

 

    这里突出总结一些我对Json、字典的概念的理解：

    json字串是一个json对象的字串表现形式，json对象是使用字典和列表（dictionary和list）两种结构互相嵌套、引用的方法来表示的对象；对于每一个对象来说，我们都可以想象成是一个字典，由key和value组成，一个key个value组成一个item；一个json对象可以有多个item。

 

 

三、天使降临——客户端调用

 

    这里只贴出客户端的javascript脚本：

   

[javascript] view plain copy
 
  1. <span style="font-size:18px;"><script language="javascript" type="text/javascript">  
  2.             function getBoy() {  
  3.             //调动服务端的方法，显示相关信息  
  4.                 BoyGirlService.GetBoyWithGirlFriend(onGetBoySucceeded, onFailed);  
  5.             }  
  6.             function onGetBoySucceeded(result) {  
  7.                 //下面这句话是重新建立起BoyFriend和Girlfriend之间的循环引用，因为在服务器端已经解开了循环引用  
  8.                 // result.GirlFriend.BoyFriend = result;  
  9.                   
  10.                 alert(String.format(  
  11.                     "It‘s {0}, his girlfriend is {1}",  
  12.                     result.Name,  
  13.                     result.GirlFriend.Name));  
  14.             }  
  15.               
  16.             function onFailed(error)  
  17.             {  
  18.                 alert(error.get_message());  
  19.             }  
  20.               
  21.             function setBoy()  
  22.             {  
  23.                 var boy = new Object();  
  24.                 boy.Name = "Terry";  
  25.                 var girl = new Object();  
  26.                 girl.Name = "Mary";  
  27.                 boy.GirlFriend = girl;  
  28.                 //调用服务端的方法，传入参数  
  29.                 BoyGirlService.SetBoyWithGirlFriend(boy, onSetBoySucceeded, onFailed);  
  30.             }  
  31.             function onSetBoySucceeded(result)  
  32.             {  
  33.                 alert(result);  
  34.             }  
  35. </script></span>  

 

    这样我们就自制了一套序列化和反序列化的嫁衣，来看一下运行效果：

 

    技术分享

   

    技术思想总结——怎么来序列化和反序列化？

 

    回顾一下序列化和反序列化的思路就是：在服务端先打乱Boy对象的GirlFriend原有的循环引用，或者说是先解开BoyFriend和GirlFriend之间的循环引用，然后重新建立起BoyFriend和Girlfriend之间的循环引用。

    怎么打乱循环引用?核心的代码就是将对象属性赋值为空后，重新赋值即可：

   

[csharp] view plain copy
 
  1. <span style="font-size:18px;">//先打乱Boy对象的GirlFriend原有的循环引用，或者说是先解开BoyFriend和GirlFriend之间的循环引用  
  2.             boy.GirlFriend.BoyFriend = null;  
  3.             //因为Girl有循环引用，所以，不能使用默认的方式输出，需要先打乱Boy对象的GirlFriend原有的循环引用  
  4.             result["GirlFriend"] = boy.GirlFriend;</span>  

 

    视野拓展——新知识学习： 泛化的字典数据类型和泛化的枚举的使用

   

    在序列化的时候，使用的是IDictionary<>的泛化类型，传入一个obj对象，然后经过序列化后返回的result是一个IDictionary类型。其他类型的自定义数据类型，也可以借用该思路。

    反序列化基本上是一个相反的步骤，传入IDictionary类型，返回obj对象类型。 result和obj对象都由key和value组成。

    另外，如果需要我们还可以在客户端重新添加解开后的循环引用。

   

[javascript] view plain copy
 
  1. <span style="font-size:18px;">//下面这句话是重新建立起BoyFriend和Girlfriend之间的循环引用，因为在服务器端已经解开了循环引用  
  2. // result.GirlFriend.BoyFriend = result;</span>  


 

补充说明：

 

    因为用到了泛化和序列化反序列化，需要添加相应的引用：

 

[csharp] view plain copy
 
  1. using System.Web.Script.Serialization;  
  2. using System.Collections.Generic;  

给Ajax一个漂亮的嫁衣——Ajax系列之五（下）之序列化和反序列化

标签：

原文地址：http://www.cnblogs.com/zxtceq/p/5403425.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！