在看了blogjava看了 emu 的一篇< 异步json例子 >, 感觉不错, 学习并记录下来
原稿地址 http://www.blogjava.net/emu/archive/2007/05/14/117416.html
异步json例子 的数据为
- < HTML >
- < HEAD >
- < title > 异步json例子 </ title >
- < SCRIPT LANGUAGE = "JavaScript" >
- function test(){
- var s = document .createElement("SCRIPT");
- document.getElementsByTagName("HEAD")[0].appendChild(s);
- s.src = "http://g2.qzone.qq.com/fcg-bin/cgi_emotion_list.fcg?uin=123456" ;
- }
- function visitCountCallBack(data){
- for(var i in data){
- var e = document .getElementById(i);
- if(e) e.innerHTML = data [i];
- }
- }
- </ SCRIPT >
- </ HEAD >
- < BODY >
- < button onclick = "test()" > test </ button > < BR >
- 历史访问人数： < span id = "visitcount" style = "color:#6600CC" > 点击test按钮获取数据 </ span > < BR >
- 今天访问人数： < span id = "dayvisit" style = "color:#CC6633" > 点击test按钮获取数据 </ span > < BR >
- 阳光指数： < span id = "sun" style = "color:red" > 点击test按钮获取数据 </ span > < BR >
- 爱心指数： < span id = "love" style = "color:violet" > 点击test按钮获取数据 </ span > < BR >
- 雨露指数： < span id = "rain" style = "color:blue" > 点击test按钮获取数据 </ span > < BR >
- 营养指数： < span id = "nutri" style = "color:green" > 点击test按钮获取数据 </ span > < BR >
- 花匠级别： < span id = "gardener" style = "color:#996633" > 点击test按钮获取数据 </ span >
- </ BODY >
- </ HTML >
其中请求的 http://g2.qzone.qq.com/fcg-bin/cgi_emotion_list.fcg?uin=123456 返回
- visitCountCallBack
- (
- {
- "visitcount" :49036012,
- "dayvisit" :3144,
- "spacemark" :0,
- "markchange" :0,
- "sun" :416,
- "love" :402,
- "rain" :416,
- "nutri" :404,
- "level" :5,
- "gardener" :1
- }
- );
相比xml，json的好处是：天生的跨浏览器（比如我的这个demo应该可以跨所有支持dhtml的浏览器而不需要任何修改），客户端解析代价（CPU和内存）非常小，非单根结构（xml是单根结构），标记名只出现一次（xml的标记名在大多数情况下都需要出现两次：<tag>...</tag>，因此浪费了很多流量）
主要缺点是只支持get方式请求，另外跨编码（json资源的编码和引用页面的编码不同）的时候要做一些特殊处理。比如汉字可以预先escape。
此外很多人并不知道json可以异步获取，这个例子很重要的一点是展示了如何异步获取json。
