Mikel
[转载]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=\“utf–8\“ ?>\n “ + ds.GetXml());
Response.End();
}
{
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=\“utf–8\“ ?>\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);
}
});
}
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>
“
“<?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();
}
}
}
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 }
/// 实体类 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();
}
{
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);
}
});
}
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”
就像操作一个泛型一样简单，便捷。
