json例子

本来一直觉得这么基础的功能是没有什么好拿出来讲的，今天和网友聊天发现，由于缺乏对json的理解，很多人都还在继续带着自己的项目往ajax的方向进军，而完全不知道有一个好得多的替代品。所以写下这么个demo给大家参考：

< 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 >

这里请求的资源是
返回的是类似这样的一个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方式请求，另外跨编码（json资源的编码和引用页面的编码不同）的时候要在script标签上指明charset（不像xml可以在<?xml>上指定）。

此外很多人并不知道json可以异步获取，这个例子很重要的一点是展示了如何异步获取json。