使用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 |
可以直接使用 |
目前暂时想到这么多可以比的,期待大家的讨论