上一个视频播放例子是通过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对象)
ajax交互页面:
- <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>
- <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代码的良好结构,可以很直观地了解存的是什么内容。
这是目前初步的理解,不足之处请多指教~