DedeCMS digg Ajax 跨域的实现分析

所属分类: CMS教程 / dedecms 阅读数: 427
收藏 0 赞 0 分享
提供解决方案如下:
@writen by etongchina 2009-02-06 19:00
实现方案:类似json实现
实现原理:js允许引入的远程文件(js)来操作本地数据
具体方法:(以http://news.xxx.com/200812/25-4653.html 为例)
1.修改http://news.xxx.com/200812/25-4653.html 的js调用用部分;
在本地html或js文件中写入:
<SCRIPT LANGUAGE="JavaScript">
function _Digg(type,tid){
var s = document.createElement("SCRIPT");
s.id="cgi_emotion_list";
document.getElementsByTagName("HEAD")[0].appendChild(s);
s.src="http://www.xxx.com/../dig.php?type="+type+"&tid="+tid ;
//需要统计的php页面的 src
}
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];
//一些代码去修改本地html
}
}
</script>
修改以下代码:<a href="javascript:Digg('digg',4653);">顶一下</a>
为:<a href="javascript:_Digg('digg',4653);">顶一下</a>
2. 访问远程文件:
远程文件(http://www.xxx.com/../dig.php?type=digg&tid=456 )返回类似代码:
visitCountCallBack({
"visitcount":135
});
以上代码相当于远程文件调用本地函数:visitCountCallBack
这样一来就可以实现利用远程返回数据来动态修改本地文件。
3.总结:
关于此方案,目前可行,也有人认为会过时。我认为不会产生JS越权的问题。

我这里有一个类似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属性的官方解释:The script element allows authors to include dynamic script in their documents. When the src attribute is set, the script element refers to an external file. The value of the attribute must be a URI (or IRI). If the src attribute is not set, then the script is given by the contents of the element. 解释为:如果定义了SCRIPT标签的SRC属性,SCRIPT标签涉及到一个外部文件,属性值必须是一个URL。也就是说SCRIPT将从此URL引用文件的内容。大家在浏览器中访问此连接:http://g2.qzone.qq.com/fcg-bin/cgi_emotion_list.fcg?uin=123456这个类似JAVA的SERVLET的URL返回以下数据:visitCountCallBack({"visitcount":65188579, "dayvisit":8658, "spacemark":0, "markchange":0, "sun":1680, "love":478, "rain":1680, "nutri":1450, "level":5, "gardener":1});这个字符串是一个JAVASCRIPT函数,输入是一个JSON字符串。这个数据返回的同时调用了上面的另一个JAVASCRIPT函数: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];
}
}
函数中用innerHTML吧返回的JSON数据填充到BODY中,实现了不刷新页面得到数据的异步的效果。 还有一个关键的问题:http://g2.qzone.qq.com/fcg-bin/cgi_emotion_list.fcg?uin=123456是QQ空间的一个URL(uin是QQ号码,大家可以输入自己的QQ号码试试),JAVASCRIPT调用了其他域的数据。 这样的方式得到数据比较简单,也能跨域访问数据,比较适合一些简单的,小的无刷新的效果。 本人有些担心的是,如果哪天浏览器一更新,拒绝这种访问方式,可能这样得到数据就变得不可用了,建议大家谨慎使用这种方法!!!
更多精彩内容其他人还在看

脚本之家使用火车头发布DEDECMS 5.5 出现乱码的解决办法

今天做了一个站测试用,由于是新站没有太多时候去添加内容,就想到用火车头来采集。采集的工作比较顺利。
收藏 0 赞 0 分享

dedecms 列表页标题修改图文方法(利于优化)

dedecms实现
收藏 0 赞 0 分享

DEDECMS 5.1的SEO技巧之栏目列表页优化

本人刚接触DEDECMS系统还不到半,觉得DEDE系统不错,很好优化,我现在介绍一下我在使用过程中的SEO技巧,希望给初学者一些帮助
收藏 0 赞 0 分享

DeDeCms V5.6 数据批量索引到淘特搜索引擎

由于DedeCms没有将文章的生成地址保存在数据库中,因此需要做的就是索引一个字段:LinkUrl来保存文章生成地址。
收藏 0 赞 0 分享

dedecms 问答系统取消积分与用户登陆验证的方法

现在我要用dedecms来做一个问答功能,功能是不需要用户登陆并可以提问,因为问题时需要积分所以我把登际与积分都取消了。
收藏 0 赞 0 分享

dedecms 5.3/5.5全站伪静态含SEO重复记录优化

DEDECMS系统栏目、文章页面、分页面伪静态和域名301重定向详细方法
收藏 0 赞 0 分享

dedecms 每个栏目下的文章总数的调用

实现统计每个栏目下的文章总数的调用修改方法,经网友测试基本上没有问题。
收藏 0 赞 0 分享

dedecms制作英文站需要修改的地方

我一直都不喜欢用DEDE做英文站,不是不好,而是需要改动的地方太多了,并不像一些网上说的改改字体,改改编码那么轻松的事情。
收藏 0 赞 0 分享

dedecms英文模板 英文网站程序的选择

dedecms英文模板目前很多,但一眼看上去都是一些老版本了,而且卖模板的人说是SEO过,其实网站程序的优化都没有做好,还不如自己动手改改 dedecms官方默认的模板。
收藏 0 赞 0 分享

DEDECMS 支付宝操作手册

织梦CMS携手支付宝推出DedeCMS V5.6全新支付接口,DedeCMS系统为国内做早开源的PHP内容管理系统,系统除了拥有强大,灵活的内容管理功能之外,还增加了分类、书库、黄页、圈子、问答等模块,同时该版本中整合了最新支付宝在线支付接口。
收藏 0 赞 0 分享
查看更多