热门：网页模板.net视频教程JQueryMVCjsonExtJs源码示例三级联动JQuery菜单
您现在的位置：.Net中文社区>> .Net编程>>正文内容

jQuery处理.Net后台返回的Xml格式与Json格式的数据的比较分析

发布时间：2010年08月06日点击数： 次佚名

最近项目空闲下来，手头也没有什么事情，所以研究了一下jQuery对后台返回数据格式的处理。可能也是因为之前用JS写code的习惯，所以比较倾向于用JS处理XML格式的数据，当然这也就会造成我后台返回的数据的格式全部为XML的格式，处理起来相对繁琐。

      当然我也早就发现Jquery与Json格式的数据结合的非常好，但是一直苦于.NET的对数据转换成Json格式的繁琐，所以一直也没有采用Json格式的数据，或者是在数据相对简单的情况下采用Json格式的数据，其他千篇一律XML，但是今天我分析了一下Jquery对两种数据格式的处理之后，完全改变了心态，并力推大家用Jquery + Json处理后台返回数据。

      请看如下比较：
     【Jquery + Xml】
      如下代码是我查询IPInfo表中前10条数据，并以XML格式输出：

  1. public void XmlToAjax() 
  2. { 
  3.    DataTable dt = SQLHelper.ExecuteDataTable(SQLHelper.conStrings, CommandType.Text, "select top(10) * from IPInfo"); 
  4.    DataSet ds = new DataSet(); 
  5.    ds.Tables.Add(dt); 
  6.    //Console 
  7.    Response.ContentType = "text/xml"; 
  8.    Response.Charset = "UTF-8"; 
  9.    Response.Clear(); 
  10.    Response.Write("<?xml version=\"1.0\" encoding=\"utf-8\" ?>\n " + ds.GetXml()); 
  11.    Response.End(); 
  12. } 

 我在前台接收到数据后进行如下处理：

  1. function checkText() { 
  2.             var xmlT; 
  3.             if ($.trim($("#txtID").val()) == "") { 
  4.                 $("#sm").text("请输入XML条件"); 
  5.                 $("#txtID").focus(); 
  6.                 return false; 
  7.             } 
  8.             else { 
  9.                 $("#sm").text(""); 
  10.                 $.ajax({ 
  11.                     type: "GET",   
  12.                   //contentType: "application/json", //WebService 会返回Json类型 
  13.                     url: "../Ajax/Ajax1.aspx",  
  14.                     dataType: "xml", 
  15.                     data: "",  //这里是要传递的参数，格式为 data: "{paraName:paraValue}",下面将会看到        
  16.                     success: function(result) {     //回调函数，result，返回值 
  17.                         var ID = ''; 
  18.                         $(result).find("Table1").each(function() { 
  19.                             ID += $(this).children("IPid").text() + "<br>"; 
  20.                         }); 
  21.                         $("#divMsg").html(ID); 
  22.                     } 
  23.                 }); 
  24.             } 
  25.  
  26.         } 

下面是输出结果：
     result.xml 的结果集为：

  1. <?xml version="1.0"?> 
  2. <NewDataSet> 
  3.     <Table1> 
  4.         <IPid>1</IPid> 
  5.         <IPFrom>0.0.0.0        </IPFrom> 
  6.         <IPTo>0.255.255.255  </IPTo> 
  7.         <IPLocation>IANA  CZ88.NET</IPLocation> 
  8.         <IPToNumber>16777215</IPToNumber> 
  9.         <IPFromNumber>0</IPFromNumber> 
  10.     </Table1> 
  11.     <Table1> 
  12.         <IPid>2</IPid> 
  13.         <IPFrom>1.0.0.0        </IPFrom> 
  14.         <IPTo>1.255.255.255  </IPTo> 
  15.         <IPLocation>IANA  CZ88.NET</IPLocation> 
  16.         <IPToNumber>33554431</IPToNumber> 
  17.         <IPFromNumber>16777216</IPFromNumber> 
  18.     </Table1> 
  19.     <Table1> 
  20.         <IPid>3</IPid> 
  21.         <IPFrom>2.0.0.0        </IPFrom> 
  22.         <IPTo>2.255.255.255  </IPTo> 
  23.         <IPLocation>IANA  CZ88.NET</IPLocation> 
  24.         <IPToNumber>50331647</IPToNumber> 
  25.         <IPFromNumber>33554432</IPFromNumber> 
  26.     </Table1> 
  27.     <Table1> 
  28.         <IPid>4</IPid> 
  29.         <IPFrom>3.0.0.0        </IPFrom> 
  30.         <IPTo>3.255.255.255  </IPTo> 
  31.         <IPLocation>美国 新泽西通用电气公司</IPLocation> 
  32.         <IPToNumber>67108863</IPToNumber> 
  33.         <IPFromNumber>50331648</IPFromNumber> 
  34.     </Table1> 
  35.     <Table1> 
  36.         <IPid>5</IPid> 
  37.         <IPFrom>4.0.0.0        </IPFrom> 
  38.         <IPTo>4.9.255.255    </IPTo> 
  39.         <IPLocation>美国  CZ88.NET</IPLocation> 
  40.         <IPToNumber>67764223</IPToNumber> 
  41.         <IPFromNumber>67108864</IPFromNumber> 
  42.     </Table1> 
  43.     <Table1> 
  44.         <IPid>6</IPid> 
  45.         <IPFrom>4.10.0.0       </IPFrom> 
  46.         <IPTo>4.10.255.255   </IPTo> 
  47.         <IPLocation>美国 新泽西州立大学</IPLocation> 
  48.         <IPToNumber>67829759</IPToNumber> 
  49.         <IPFromNumber>67764224</IPFromNumber> 
  50.     </Table1> 
  51.     <Table1> 
  52.         <IPid>7</IPid> 
  53.         <IPFrom>4.11.0.0       </IPFrom> 
  54.         <IPTo>4.11.255.255   </IPTo> 
  55.         <IPLocation>美国 夏威夷</IPLocation> 
  56.         <IPToNumber>67895295</IPToNumber> 
  57.         <IPFromNumber>67829760</IPFromNumber> 
  58.     </Table1> 
  59.     <Table1> 
  60.         <IPid>8</IPid> 
  61.         <IPFrom>4.12.0.0       </IPFrom> 
  62.         <IPTo>4.19.77.255    </IPTo> 
  63.         <IPLocation>美国  CZ88.NET</IPLocation> 
  64.         <IPToNumber>68374015</IPToNumber> 
  65.         <IPFromNumber>67895296</IPFromNumber> 
  66.     </Table1> 
  67.     <Table1> 
  68.         <IPid>9</IPid> 
  69.         <IPFrom>4.19.78.0      </IPFrom> 
  70.         <IPTo>4.19.78.255    </IPTo> 
  71.         <IPLocation>美国 西南政法大学</IPLocation> 
  72.         <IPToNumber>68374271</IPToNumber> 
  73.         <IPFromNumber>68374016</IPFromNumber> 
  74.     </Table1> 
  75.     <Table1> 
  76.         <IPid>10</IPid> 
  77.         <IPFrom>4.19.79.0      </IPFrom> 
  78.         <IPTo>4.19.79.63     </IPTo> 
  79.         <IPLocation>美国 Armed Forces Radio/Television</IPLocation> 
  80.         <IPToNumber>68374335</IPToNumber> 
  81.         <IPFromNumber>68374272</IPFromNumber> 
  82.     </Table1> 
  83. </NewDataSet> 

 看到这一串代码，那我接下来面对的问题就是去分析这一串代码，取出我所需要的数据，以前一直都是这样处理的（），就像这一段代码：

  1. $(result).find("Table1").each(function() {    ID += $(this).children("IPid").text() + "<br>"; });   

是要取出XML中的所有IPid的数据。
     （顺便插入一句：因为用Jquery操作XML，所以代码相对比较简洁，如果用JS的话会较之麻烦一些。）
    那我们接下来再看看Jquery是如何处理Json格式的数据的：
   【Jquery + Json】
    在处理之前，首先我们要做一件事，就是将数据库取出的数据转换成Json格式，可能已存在有多种转换方法，这里呢我就先说下自己的Json转换方法：
    首先创建一个JsonHelper的类如下：

  1. using System; 
  2. using System.Collections.Generic; 
  3. using System.Linq; 
  4. using System.Text; 
  5. using System.IO; 
  6. using System.Web; 
  7. using System.Runtime.Serialization.Json; 
  8.  
  9. namespace LinqModel 
  10. { 
  11.     public static class JsonHelper 
  12.     { 
  13.         /// <summary> 
  14.         /// 格式化成Json字符串 
  15.         /// </summary> 
  16.         /// <param name="obj">需要格式化的对象</param> 
  17.         /// <returns>Json字符串</returns> 
  18.         public static string ToJson(this object obj) 
  19.         { 
  20.             // 首先，当然是JSON序列化 
  21.             DataContractJsonSerializer serializer = new DataContractJsonSerializer(obj.GetType()); 
  22.  
  23.             // 定义一个stream用来存发序列化之后的内容 
  24.             Stream stream = new MemoryStream(); 
  25.             serializer.WriteObject(stream, obj); 
  26.  
  27.             // 从头到尾将stream读取成一个字符串形式的数据，并且返回 
  28.             stream.Position = 0; 
  29.             StreamReader streamReader = new StreamReader(stream); 
  30.             return streamReader.ReadToEnd(); 
  31.         } 
  32.     } 
  33. } 

当然这里我们需要引用两个DLL文件（System.Runtime.Serialization.Json，System.ServiceModel.Web），当然这里直接添加添加.net引用，找到这两个DLL就OK了，然后我们需要创建一个实体类，以便用泛型操作，代码如下：

  1. /// <summary> 
  2.     /// 实体类IPInfo 。(属性说明自动提取数据库字段的描述信息) 
  3.     /// </summary> 
  4.     [DataContract] 
  5.     public class IPInfo 
  6.     { 
  7.         public IPInfo() 
  8.         { } 
  9.         #region Model 
  10.         private long _ipid; 
  11.         private string _ipfrom; 
  12.         private string _ipto; 
  13.         private string _iplocation; 
  14.         private string _ipcity; 
  15.         private string _iptonumber; 
  16.         private string _ipfromnumber; 
  17.         /// <summary> 
  18.         /// Key 
  19.         /// </summary> 
  20.         [DataMember] 
  21.         public long IPid 
  22.         { 
  23.             set { _ipid = value; } 
  24.             get { return _ipid; } 
  25.         } 
  26.         /// <summary> 
  27.         /// 区间开始 
  28.         /// </summary> 
  29.         [DataMember] 
  30.         public string IPFrom 
  31.         { 
  32.             set { _ipfrom = value; } 
  33.             get { return _ipfrom; } 
  34.         } 
  35.         /// <summary> 
  36.         /// 区间结束 
  37.         /// </summary> 
  38.         [DataMember] 
  39.         public string IPTo 
  40.         { 
  41.             set { _ipto = value; } 
  42.             get { return _ipto; } 
  43.         } 
  44.         /// <summary> 
  45.         /// 位置 
  46.         /// </summary> 
  47.         [DataMember] 
  48.         public string IPLocation 
  49.         { 
  50.             set { _iplocation = value; } 
  51.             get { return _iplocation; } 
  52.         } 
  53.         /// <summary> 
  54.         /// 城市 
  55.         /// </summary> 
  56.         [DataMember] 
  57.         public string IPCity 
  58.         { 
  59.             set { _ipcity = value; } 
  60.             get { return _ipcity; } 
  61.         } 
  62.         /// <summary> 
  63.         ///  
  64.         /// </summary> 
  65.         [DataMember] 
  66.         public string IPToNumber 
  67.         { 
  68.             set { _iptonumber = value; } 
  69.             get { return _iptonumber; } 
  70.         } 
  71.         /// <summary> 
  72.         ///  
  73.         /// </summary> 
  74.         [DataMember] 
  75.         public string IPFromNumber 
  76.         { 
  77.             set { _ipfromnumber = value; } 
  78.             get { return _ipfromnumber; } 
  79.         } 
  80.         #endregion Model 
  81.  
  82.     } 

注意：如果要对该类进行序列化，一定要在类前面添加上“[DataContract]”，在属性前面添加上“[DataMember]”，这样才能被“DataContractJsonSerializer”序列化成JSON。
下面我们来看如何调用这个方法转换成Json格式的数据：

  1. public void JsonToAjax()  
  2.         { 
  3.             using (SqlDataReader reader = SQLHelper.ExecuteReader(SQLHelper.conStrings, CommandType.Text, "select top(10) * from IPInfo")) 
  4.             { 
  5.                 List<LinqModel.IPInfo> list = new List<LinqModel.IPInfo>(); 
  6.                 while (reader.Read()) 
  7.                 { 
  8.                     LinqModel.IPInfo model = new LinqModel.IPInfo(); 
  9.                     model.IPCity = reader["IPCity"].ToString(); 
  10.                     model.IPFrom = reader["IPFrom"].ToString(); 
  11.                     model.IPFromNumber = reader["IPFromNumber"].ToString(); 
  12.                     model.IPid = long.Parse(reader["IPid"].ToString()); 
  13.                     model.IPLocation = reader["IPLocation"].ToString(); 
  14.                     model.IPTo = reader["IPTo"].ToString(); 
  15.                     model.IPToNumber = reader["IPToNumber"].ToString(); 
  16.                     list.Add(model); 
  17.                 } 
  18.                 //list.ToJson(); 
  19.                 Response.Write(list.ToJson()); 
  20.                 Response.End(); 
  21.             } 
  22.  
  23.         } 

就是如此调用：list.ToJson()，简单吧，下面看一下输出的结果：

  1. [{"IPCity":"","IPFrom":"0.0.0.0 ","IPFromNumber":"0","IPLocation":"IANA CZ88.NET","IPTo":"0.255.255.255 ","IPToNumber":"16777215","IPid":1},{"IPCity":"","IPFrom":"1.0.0.0 ","IPFromNumber":"16777216","IPLocation":"IANA CZ88.NET","IPTo":"1.255.255.255 ","IPToNumber":"33554431","IPid":2},{"IPCity":"","IPFrom":"2.0.0.0 ","IPFromNumber":"33554432","IPLocation":"IANA CZ88.NET","IPTo":"2.255.255.255 ","IPToNumber":"50331647","IPid":3},{"IPCity":"","IPFrom":"3.0.0.0 ","IPFromNumber":"50331648","IPLocation":"美国 新泽西通用电气公司","IPTo":"3.255.255.255 ","IPToNumber":"67108863","IPid":4},{"IPCity":"","IPFrom":"4.0.0.0 ","IPFromNumber":"67108864","IPLocation":"美国 CZ88.NET","IPTo":"4.9.255.255 ","IPToNumber":"67764223","IPid":5},{"IPCity":"","IPFrom":"4.10.0.0 ","IPFromNumber":"67764224","IPLocation":"美国 新泽西州立大学","IPTo":"4.10.255.255 ","IPToNumber":"67829759","IPid":6},{"IPCity":"","IPFrom":"4.11.0.0 ","IPFromNumber":"67829760","IPLocation":"美国 夏威夷","IPTo":"4.11.255.255 ","IPToNumber":"67895295","IPid":7},{"IPCity":"","IPFrom":"4.12.0.0 ","IPFromNumber":"67895296","IPLocation":"美国 CZ88.NET","IPTo":"4.19.77.255 ","IPToNumber":"68374015","IPid":8},{"IPCity":"","IPFrom":"4.19.78.0 ","IPFromNumber":"68374016","IPLocation":"美国 西南政法大学","IPTo":"4.19.78.255 ","IPToNumber":"68374271","IPid":9},{"IPCity":"","IPFrom":"4.19.79.0 ","IPFromNumber":"68374272","IPLocation":"美国 Armed Forces Radio\/Television","IPTo":"4.19.79.63 ","IPToNumber":"68374335","IPid":10}] 

 标准的Json格式，呵呵，看了上面的代码，是不是很方便，我想下面的操作就更简单了，看下面的Jquery代码：

  1. function checkText1() { 
  2.             var xmlT; 
  3.             if ($.trim($("#txtID1").val()) == "") { 
  4.                 $("#sm1").text("请输入Json条件"); 
  5.                 $("#txtID1").focus(); 
  6.                 return false; 
  7.             } 
  8.             else { 
  9.                 $("#sm1").text(""); 
  10.                 $.ajax({ 
  11.                     type: "GET",   
  12.                     contentType: "application/json",  
  13.                     url: "../Ajax/Ajax1.aspx",  
  14.                     dataType: "json", 
  15.                     data: "",  //这里是要传递的参数，格式为 data: "{paraName:paraValue}",下面将会看到        
  16.                     success: function(result) {     //回调函数，result，返回值 
  17.                         var aa = ''; 
  18.                         aa += result[1]["IPid"] + "<br>"; 
  19.                         aa += result[1]["IPFrom"] + "<br>"; 
  20.                         aa += result[1]["IPTo"] + "<br>"; 
  21.                         aa += result[1]["IPLocation"] + "<br>"; 
  22.                         aa += result[1]["IPCity"] + "<br>"; 
  23.                         aa += result[1]["IPToNumber"] + "<br>"; 
  24.                         aa += result[1]["IPFromNumber"] + "<br>"; 
  25.                         $("#divMsg").html(aa); 
  26.                     } 
  27.                 }); 
  28.             } 

我们再来看一下 result的结果集：

  1. result 
  2. {...} 
  3.     [0]: {...} 
  4.     [1]: {...} 
  5.     [2]: {...} 
  6.     [3]: {...} 
  7.     [4]: {...} 
  8.     [5]: {...} 
  9.     [6]: {...} 
  10.     [7]: {...} 
  11.     [8]: {...} 
  12.     [9]: {...} 
  13. result[0] 
  14. {...} 
  15.     IPCity: "" 
  16.     IPFrom: "0.0.0.0        " 
  17.     IPFromNumber: "0" 
  18.     IPid: 1 
  19.     IPLocation: "IANA  CZ88.NET" 
  20.     IPTo: "0.255.255.255  " 
  21.     IPToNumber: "16777215" 

就像操作一个泛型一样简单，便捷。

随机文章推荐

本站热点业务

更多模板/案例展示

热门推荐

最近更新

关于我们 | 联系我们 | 团队日志 | 网站地图 | 网站合作
本站部份资源来于互联网,只供学习之用,不得用于商业,如有侵犯版权请联系告知,本站将第一时间删除!
copyright © 2008-2010 .Net中文社区 ASPXCS.NET™.All Rights Reserved 滇ICP备08102132号