[转载]jQuery备忘之(一):jQuery处理.Net后台返回的Xml格式与Json格式的数据的比较分析

baacloud免费翻墙vpn注册使用

[转载]jQuery备忘之(一):jQuery处理.Net后台返回的Xml格式与Json格式的数据的比较分析 – 一切问题最终都是时间问题,一切烦恼其实都是自寻烦恼。 – 博客园.

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

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

请看如下比较:

jQuery + Xml】

如下代码是我查询IPInfo表中前10条数据,并以XML格式输出:

代码

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

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

代码

function checkText() {
var xmlT;
if ($.trim($(#txtID).val()) == “”) {
$(
#sm).text(请 输入XML条件);
$(
#txtID).focus();
return false;
}
else {
$(
#sm).text(“”);
$.ajax({
type:
GET,
//contentType: “application/json”, //WebService 会返回Json类型
url: ../Ajax/Ajax1.aspx,
dataType:
xml,
data:
“”, //这里是要传递的参数,格式为 data: ” {paraName:paraValue}”,下面将会看到
success: function(result) { //回调函数,result,返回值
var ID = ;
$(result).find(
Table1).each(function() {
ID
+= $(this).children(IPid).text() + <br>;
});
$(
#divMsg).html(ID);
}
});
}

}

下面是输出结果:

result.xml 的结果集为:

代码

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

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

$(result).find(Table1).each(function() {    ID += $(this).children(IPid).text() + <br>; }); 是要取出XML中的所有IPid的数据。

(顺便插入一句:因为用Jquery操作XML,所以代码相对比较简洁,如果用JS的话会较之麻烦一些。)

那我们接下来再看看Jquery是如何处理Json格式的数据的:

【Jquery + Json】

在处理之前,首先我们要做一件事,就是将数据库取出的数据转换成Json格式,可能已存在有多种转换方法,这里呢我就先说下自己的Json转换方法:

首先创建一个JsonHelper的类如下:

代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.IO;
using System.Web;
using System.Runtime.Serialization.Json;

namespace LinqModel
{
public static class JsonHelper
{
/// <summary>
/// 格式化 成Json字符串
/// </summary>
/// <param name=”obj”>需要格式化的对象</param>
/// <returns>Json 字符串</returns>
public static string ToJson(this object obj)
{
// 首先,当然是JSON序列化
DataContractJsonSerializer serializer = new DataContractJsonSerializer(obj.GetType());

// 定义一个stream用来存发序列化之后的内容
Stream stream = new MemoryStream();
serializer.WriteObject(stream, obj);

// 从头到尾将stream读取成一个字符串形式的数据,并且返回
stream.Position = 0;
StreamReader streamReader
= new StreamReader(stream);
return streamReader.ReadToEnd();
}
}
}

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

代码

/// <summary>
/// 实体类 IPInfo 。(属性说明自动提取数据库字段的描述信息)
/// </summary>
[DataContract]
public class IPInfo
{
public IPInfo()
{ }
#region Model
private long _ipid;
private string _ipfrom;
private string _ipto;
private string _iplocation;
private string _ipcity;
private string _iptonumber;
private string _ipfromnumber;
/// <summary>
/// Key
/// </summary>
[DataMember]
public long IPid
{
set { _ipid = value; }
get { return _ipid; }
}
/// <summary>
/// 区间开 始
/// </summary>
[DataMember]
public string IPFrom
{
set { _ipfrom = value; }
get { return _ipfrom; }
}
/// <summary>
/// 区间结 束
/// </summary>
[DataMember]
public string IPTo
{
set { _ipto = value; }
get { return _ipto; }
}
/// <summary>
/// 位置
/// </summary>
[DataMember]
public string IPLocation
{
set { _iplocation = value; }
get { return _iplocation; }
}
/// <summary>
/// 城市
/// </summary>
[DataMember]
public string IPCity
{
set { _ipcity = value; }
get { return _ipcity; }
}
/// <summary>
///
/// </summary>
[DataMember]
public string IPToNumber
{
set { _iptonumber = value; }
get { return _iptonumber; }
}
/// <summary>
///
/// </summary>
[DataMember]
public string IPFromNumber
{
set { _ipfromnumber = value; }
get { return _ipfromnumber; }
}
#endregion Model

}

注意:如果要对该类进行序列化,一定要在类前面添加上“[DataContract]”,在属性前面添加上 “[DataMember]”,这样才能被“DataContractJsonSerializer”序列化成JSON。

下面我们来看如何调用这个方法转换成Json格式的数据:

代码

public void JsonToAjax()
{
using (SQLDataReader reader = SQLHelper.ExecuteReader(SQLHelper.conStrings, CommandType.Text, select top(10) * from IPInfo))
{
List
<LinqModel.IPInfo> list = new List<LinqModel.IPInfo>();
while (reader.Read())
{
LinqModel.IPInfo model
= new LinqModel.IPInfo();
model.IPCity
= reader[IPCity].ToString();
model.IPFrom
= reader[IPFrom].ToString();
model.IPFromNumber
= reader[IPFromNumber].ToString();
model.IPid
= long.Parse(reader[IPid].ToString());
model.IPLocation
= reader[IPLocation].ToString();
model.IPTo
= reader[IPTo].ToString();
model.IPToNumber
= reader[IPToNumber].ToString();
list.Add(model);
}
//list.ToJson();
Response.Write(list.ToJson());
Response.End();
}

}

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

代码

[{“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代码:

代码

function checkText1() {
var xmlT;
if ($.trim($(#txtID1).val()) == “”) {
$(
#sm1).text(请 输入Json条件);
$(
#txtID1).focus();
return false;
}
else {
$(
#sm1).text(“”);
$.ajax({
type:
GET,
contentType: application/json,
url: ../Ajax/Ajax1.aspx,
dataType: json,
data:
“”, //这里是要传递的参数,格式为 data: ” {paraName:paraValue}”,下面将会看到
success: function(result) { //回调函数,result,返回值
var aa = ;
aa
+= result[1][IPid] + <br>;
aa
+= result[1][IPFrom] + <br>;
aa
+= result[1][IPTo] + <br>;
aa
+= result[1][IPLocation] + <br>;
aa
+= result[1][IPCity] + <br>;
aa
+= result[1][IPToNumber] + <br>;
aa
+= result[1][IPFromNumber] + <br>;
$(
#divMsg).html(aa);
}
});
}

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

result
{…}
[0]: {…}
[1]: {…}
[2]: {…}
[3]: {…}
[4]: {…}
[5]: {…}
[6]: {…}
[7]: {…}
[8]: {…}
[9]: {…}

result[0]
{…}
IPCity: “”
IPFrom: “0.0.0.0        ”
IPFromNumber: “0”
IPid: 1
IPLocation: “IANA  CZ88.NET”
IPTo: “0.255.255.255  ”
IPToNumber: “16777215”

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

赞(0) 打赏
分享到: 更多 (0)

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

支付宝扫一扫打赏

微信扫一扫打赏