本来一直觉得这么基础的功能是没有什么好拿出来讲的，今天和网友聊天发现，由于缺乏对json的理解，很多人都还在继续带着自己的项目往ajax的方向进军，而完全不知道有一个好得多的替代品。所以写下这么个demo给大家参考：
<HTML>
<HEAD>
<title>异步json例子</title>
<SCRIPT LANGUAGE="JavaScript">
function test(){
var s = document.createElement("SCRIPT");
s.id="cgi_emotion_list";
document.getElementsByTagName("HEAD")[0].appendChild(s);
s.src="http://g2.qzone.qq.com/fcg-bin/cgi_emotion_list.fcg?uin=123456";
test=function(){};
}
function visitCountCallBack(data){
document.getElementsByTagName("HEAD")[0].removeChild(document.getElementById("cgi_emotion_list"));
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>
这里请求的资源是
返回的是类似这样的一个js语句 ：
visitCountCallBack({"visitcount":1941,"dayvisit":4,"spacemark":0,"markchange":0,"sun":200,"love":14,"rain":200,"nutri":200,"level":4,"gardener":11});
科普一下：
相比xml，json的好处是：天生的跨浏览器（比如我的这个demo应该可以跨所有支持dhtml的浏览器而不需要任何修改），客户端解析代价（CPU和内存）非常小，非单根结构（xml是单根结构），标记名只出现一次（xml的标记名在大多数情况下都需要出现两次：<tag>...</tag>，因此浪费了很多流量）
这种方式获取数据的主要缺点是只支持get方式请求，另外跨编码的时候要注意一下。xml文件的第一行就可以声明文件的编码：encoding="..."，因此同一个xml源即使编码经常换来换去（一般不会有人这么做啦）也没有什么关系，而json的数据包装中没有类似的标记来声明自己，因此必须要实现约定好编码，不能随意变换，在跨编码（json资源的编码和引用页面的编码不同）调用的时候要指定script的charset为约定的charset。非要经常变换编码的话就要参数化charset，每次变换的时候用某种形式通知到脚本去更改charset。一般的应用不会有这么变态的需求啦，一般是在做网站国际化的时候，在做数据切割的过程中，才会出现一个数据源有两种编码需要处理的情况。
此外很多人并不知道json可以异步获取，这个例子很重要的一点是展示了如何异步获取json。