上一个视频播放例子是通过ajax实现的,异步刷新的好处我们已经体会到了,此外ajax传递复杂数据如果自己进行格式定义的话会经历组装、解析的过程,因为ajax中有一个事实上的数据传输标准Json。那我们来介绍一下吧。
1.基础
Ø 定义
JSON(JavaScriptObject Notation) 是一种轻量级的数据交换格式。它基于JavaScript(StandardECMA-262 3rd Edition - December 1999)的一个子集。 JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C,C++,C#,Java,JavaScript,Perl,Python等)。这些特性使JSON成为理想的数据交换语言。易于人阅读和编写,同时也易于机器解析和生成(网络传输速度快)。
Ø 特点
Json(是一个标准,就像XML一样,规定了对象以什么样的格式保存为一个字符串)将复杂对象序列化为一个字符串,在浏览器端再将字符串反序列化为javascript可读取的对象。其几乎为所有的语言所支持。
Ø 来源
特点提到是像XML文件一样的,在ajax中,我们提高创建对象XMLHTTPRequset,看到前面是XML,最初的时候是为了解析和传递XML文件,可是我们通常发的是一些普通的文本或者字符串,当然xml格式存在一些缺点:Xml的缺点是太占空间,因为XML下面都是一个接着一个节点,这样必然占用很大的空间。为了降低数据流量,发明了json;类似于xml。传递数据,占的体积更少而已。
Xml包含的东西很复杂,并且占的空间大,如图:
Ø 用法
C#中将.NET对象序列化为一个Json字符串的方法:JavascriptSerializer().Serializer(p),JavascriptSerializer在System.Web.Extensions.dll中,是.Net3.x中新增加的类,如果在.NET2.0中则需要用第三方控件。
Ø JS解析Json
有的资料介绍了eval解析Json,这样存在不安全性,jquery等库提供了解析json的方法,有的浏览器支持json.parse;不支持的引用json2.js也是可以的。注意js对数组的变量也要for(vari=0;i<persons.length;i++)
2.应用
Ø 举例
第一步:新建一个person类
<span style="font-family:Microsoft YaHei;font-size:14px;"><strong>using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace json { public class person { public string Name { get; set; } public string Age { get; set; } public string Email{ get; set; } } }</strong></span>
新建处理程序为json.ashx(获得一个对象的json格式,即将对象序列化)
<span style="font-family:Microsoft YaHei;font-size:14px;"><strong>using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Script.Serialization; namespace json { /// <summary> /// json 的摘要说明 /// </summary> public class json : IHttpHandler { public void ProcessRequest(HttpContext context) { //context.Response.ContentType = "text/plain"; context.Response.ContentType = "text/html"; List<person> list = new List<person>(); list.Add(new person { Name = "lxn",Age = "25",Email = "1234567@qq.com" }); list.Add(new person { Name = "wzp",Email = "1234567@163.com" }); list.Add(new person{ Name = "lxl",Age = "24",Email = "1234567@126.com" }); JavaScriptSerializer jss = new JavaScriptSerializer(); //定义一个序列化的串 //获取的是一个数组,将其序列化 //string json= jss.Serialize(list); //将list序列化 //获取的是一个对象,将一个对象序列化 string json = jss.Serialize(new person { Name = "lxl",Email = "1234567@126.com" }); context.Response.Write(json); } public bool IsReusable { get { return false; } } } }</strong></span>
新建html页为jsonHtml(Jsonhtml,将序列化的字符串转化为javascript对象)
<span style="font-family:Microsoft YaHei;font-size:14px;"><strong><!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <Meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>Json例子</title> <script src="ajax.js" type="text/javascript"></script> <script type="text/javascript"> function go() { ajax("json.ashx",function (resTxt) { var p = JSON.parse(resTxt); //p为一个对象 alert("姓名:" + p.Name + ";年龄:" + p.Age) //alert(resTxt); //对数组式的进行遍历 //var persons = JSON.parse(resTxt); //for (var i = 0; i < persons.length; i++) { // var p = persons[i]; // alert("姓名:" + p.Name + ";年龄:" + p.Age) //} }); } </script> </head> <body onload="go()"> </body> </html> </strong></span>ajax交互页面:
<span style="font-family:Microsoft YaHei;font-size:14px;"><strong>function ajax(url,onsuccess) { var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //创建XMLHTTP对象,考虑兼容性。XHR xmlhttp.open("POST",url,true); //“准备”向服务器的GetDate1.ashx发出Post请求(GET可能会有缓存问题)。这里还没有发出请求 //DRY:不要复制粘贴代码 //AJAX是异步的,并不是等到服务器端返回才继续执行 xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4) //readyState == 4 表示服务器返回完成数据了。之前可能会经历2(请求已发送,正在处理中)、3(响应中已有部分数据可用了,但是服务器还没有完成响应的生成) { if (xmlhttp.status == 200) //如果Http状态码为200则是成功 { onsuccess(xmlhttp.responseText); } else { alert("AJAX服务器返回错误!"); } } } //不要以为if (xmlhttp.readyState == 4) {在send之前执行!!!! xmlhttp.send(); //这时才开始发送请求。并不等于服务器端返回。请求发出去了,我不等!去监听onreadystatechange吧! }</strong></span>
注解:在服务器端通过上面的把一个对象转换为json字符串,在客户端通过json.parse将其转为对象,是一个对应的关系。Json.js应对不支持的parse的,实现兼容。产生的效果自己动手试试吧。
同样我们也可以对数组形式进行转化,在html页用for对其进行遍历即可。
html页面:
<span style="font-family:Microsoft YaHei;font-size:14px;"><strong> function go() { ajax("json.ashx",function (resTxt) { //var p = JSON.parse(resTxt); //p为一个对象 // alert("姓名:" + p.Name + ";年龄:" + p.Age) // ) //alert(resTxt); //对数组式的进行遍历 var persons = JSON.parse(resTxt); for (var i = 0; i < persons.length; i++) { var p = persons[i]; alert("姓名:" + p.Name + ";年龄:" + p.Age) } }); }</strong></span>
一般处理程序面:
<span style="font-family:Microsoft YaHei;font-size:14px;"><strong> public void ProcessRequest(HttpContext context) { //context.Response.ContentType = "text/plain"; context.Response.ContentType = "text/html"; List<person> list = new List<person>(); list.Add(new person { Name = "lxn",Email = "1234567@126.com" }); JavaScriptSerializer jss = new JavaScriptSerializer(); //定义一个序列化的串 //获取的是一个数组,将其序列化 string json= jss.Serialize(list); //将list序列化 //获取的是一个对象,将一个对象序列化 //string json = jss.Serialize(new person { Name = "lxl",Email = "1234567@126.com" }); context.Response.Write(json); }</strong></span>
3.总结
json和xml一样都是一种数据交换格式:
1、方便于传输,较少冗余的字符。当然直接传二进制是最好的,但面临难解析的问题。亦可以是xml、纯字符串的方式,但json有其独到的好处。
2、方便转换。有很多的json api提供了json字符串转成对象、对象转换成json串的方法。
3、易于阅读。json代码的良好结构,可以很直观地了解存的是什么内容。
这是目前初步的理解,不足之处请多指教~