使用AJAX不可以跨域一直是一個(gè)麻煩的問題,
最近做AJAX框架時(shí)發(fā)現(xiàn)一種方法,不僅可以跨域,而且相比XHR可以省去很多解析XML的步驟,
后來居然發(fā)現(xiàn)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)
測(cè)試結(jié)果表明可以在不刷新頁面的情況下更新jsArea中的內(nèi)容,如果我們把testb.js換成一個(gè)servlet會(huì)怎么樣
那不是可以在serverside直接寫數(shù)據(jù)或function給client用了嗎,完全不需要XHR來中轉(zhuǎn),省去了不少麻煩,而且還可以實(shí)現(xiàn)跨域訪問
但是有兩點(diǎn)要注意,testb.js用document.write沒有作用,如果不用setTimeout,會(huì)直接讓我的IE7和IE6crush,具體原因不明,有牛人知道請(qǐng)告訴我
目前在FF2.0.0.4/Opera9.2/IE7/IE6下測(cè)試通過.
由于找了好久都不知道這種方式的官方名稱,并且很明顯這不Asynchronous JavaScript and XML,這里連XML和XmlHttp的影子都沒有,
所以為了稱呼方便我暫時(shí)叫它DSSO(DynamicSwitchScriptObject),當(dāng)然這不是我發(fā)明的,Google不知道用了多久了,如果你知道準(zhǔn)確的名字請(qǐng)麻煩告知我
現(xiàn)在我們比較下AJAX和DSSO的特點(diǎn):
|
AJAX |
DSSO |
| 跨域訪問 |
不支持 |
支持 |
| 異步操作 |
支持 |
支持(body.appendChild后不需要等到完成才會(huì)繼續(xù),當(dāng)然完整的異步訪問需要另外的pattern來支持) |
| 數(shù)據(jù)載體 |
XML或JSON或TEXT |
可以直接由server寫成Javascript |
| 操作復(fù)雜性 |
需要解析XML或JSON |
可以直接使用 |
目前暫時(shí)想到這么多可以比的,期待大家的討論