轉帖地址：http://hi.baidu.com/xxq8210/blog/item/1ef14b185696debe4bedbc84.html
|
我這裏有一個類似AJAX應用，關鍵技術是在<script>標籤的src屬性的應用。 請大家看以下HTML代碼 <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> 大家可以把上面的代碼拷貝到本地用IE或FIREFOX打開.點擊按鈕。 發現不刷新頁面，實現了動態的效果，而且返回的數據是跨域得到了，大家知道JAVASCRIPT是不能跨域訪問的，很奇妙吧。。。。 仔細研究代碼發現了其中的奇妙之處 這段代碼： 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";
瀏覽器通過DOM解析得到了SCRIPT元素，然後添加了ID和SRC屬性。 我這裏是W3C規範中對SCRIPT元素SRC屬性的官方解釋： The When the If the 解釋爲： 如果定義了SCRIPT標籤的SRC屬性，SCRIPT標籤涉及到一個外部文件，屬性值必須是一個URL。 也就是說SCRIPT將從此URL引用文件的內容。 大家在瀏覽器中訪問此連接：http://g2.qzone.qq.com/fcg-bin/cgi_emotion_list.fcg?uin=123456 這個類似JAVA的SERVLET的URL返回以下數據： visitCountCallBack 這個字符串是一個JAVASCRIPT函數，輸入是一個JSON字符串。這個數據返回的同時調用了上面的另一個JAVASCRIPT函數： 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]; } } 函數中用innerHTML吧返回的JSON數據填充到BODY中，實現了不刷新頁面得到數據的異步的效果。
還有一個關鍵的問題： http://g2.qzone.qq.com/fcg-bin/cgi_emotion_list.fcg?uin=123456 是QQ空間的一個URL（uin是QQ號碼，大家可以輸入自己的QQ號碼試試），JAVASCRIPT調用了其他域的數據。
這樣的方式得到數據比較簡單，也能跨域訪問數據，比較適合一些簡單的，小的無刷新的效果。
本人有些擔心的是，如果哪天瀏覽器一更新，拒絕這種訪問方式，可能這樣得到數據就變得不可用了， 建議大家謹慎使用這種方法！！！ |