使用AJAX不可以跨域一直是一個麻煩的問題,
最近做AJAX框架時發現一種方法,不僅可以跨域,而且相比XHR可以省去很多解析XML的步驟,
后來居然發現GoogleMap的API就在用,非常驚喜,趕快分享一下
test.html
<html>
<title>Dynamic Script Object</title>
<head/>
<body>
<div id="jsArea">
<script id="js" src=testa.js></script>
</div>
<br>
<input type="button" value="test" onclick="testSrc()">
</body>
</html>
<script>
//author:Kerwin.Weng
//mail:hunteva@163.com
function testSrc(){
var jsObj = document.getElementById("js");
var body = jsObj.parentNode;
body.removeChild(jsObj);
jsObj = null;
var newJS=document.createElement("script");
newJS.id = "js";
newJS.src = "testb.js";
body.appendChild(newJS);
jsArea.innerHTML="Asynchronous"
}
var jsArea = document.getElementById("jsArea");
</script>
testa.js
document.write("This is A");
testb.js
setTimeout(function(){jsArea.innerHTML="This is B,now imagine i'm a servlet";},100)
測試結果表明可以在不刷新頁面的情況下更新jsArea中的內容,如果我們把testb.js換成一個servlet會怎么樣
那不是可以在serverside直接寫數據或function給client用了嗎,完全不需要XHR來中轉,省去了不少麻煩,而且還可以實現跨域訪問
但是有兩點要注意,testb.js用document.write沒有作用,如果不用setTimeout,會直接讓我的IE7和IE6crush,具體原因不明,有牛人知道請告訴我
目前在FF2.0.0.4/Opera9.2/IE7/IE6下測試通過.
由于找了好久都不知道這種方式的官方名稱,并且很明顯這不Asynchronous JavaScript and XML,這里連XML和XmlHttp的影子都沒有,
所以為了稱呼方便我暫時叫它DSSO(DynamicSwitchScriptObject),當然這不是我發明的,Google不知道用了多久了,如果你知道準確的名字請麻煩告知我
現在我們比較下AJAX和DSSO的特點:
|
AJAX |
DSSO |
| 跨域訪問 |
不支持 |
支持 |
| 異步操作 |
支持 |
支持(body.appendChild后不需要等到完成才會繼續,當然完整的異步訪問需要另外的pattern來支持) |
| 數據載體 |
XML或JSON或TEXT |
可以直接由server寫成Javascript |
| 操作復雜性 |
需要解析XML或JSON |
可以直接使用 |
目前暫時想到這么多可以比的,期待大家的討論