本來一直覺得這么基礎的功能是沒有什么好拿出來講的，今天和網友聊天發現，由于缺乏對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。