类AJAX应用,JAVASCRIPT跨域访问(原创)
2007-12-06 11:17:41
分类: Java
我这里有一个类似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属性的官方解释:
|
|