AJAX还有另一条路,不用XHR也可以无刷新从serverside拿数据更新页面,还可以克服XHR不能跨域问题

使用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:[email protected]
 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 可以直接使用

目前暂时想到这么多可以比的,期待大家的讨论

你可能感兴趣的:(AJAX还有另一条路,不用XHR也可以无刷新从serverside拿数据更新页面,还可以克服XHR不能跨域问题)