之前我也做過json方面的東西,不過都快忘掉了。轉篇文章,回憶一下。
來源:
http://www.tkk7.com/emu/archive/2007/05/14/117416.html感謝emu和
本來一直覺得這么基礎的功能是沒有什么好拿出來講的,今天和網友聊天發現,由于缺乏對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資源的編碼和引用頁面的編碼不同)的時候要做一些特殊處理。比如漢字可以預先escape。
此外很多人并不知道json可以異步獲取,這個例子很重要的一點是展示了如何異步獲取json。
---------------------------------------------------------
專注移動開發
Android, Windows Mobile, iPhone, J2ME, BlackBerry, Symbian
posted on 2007-05-15 13:12
TiGERTiAN 閱讀(876)
評論(3) 編輯 收藏 所屬分類:
Ajax