在看了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。