您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關DedeCMS digg Ajax 跨域如何實現的內容。小編覺得挺實用的,因此分享給大家做個參考。一起跟隨小編過來看看吧。
DedeCMS digg Ajax 跨域怎么實現?
因為web項目用到二級域名的原因,使得原先的digg不能正常使用。仔細分析后,發現是Ajax JS提交不能跨域的問題。
提供解決方案如下:
@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 digg Ajax 跨域如何實現就分享到這里了,希望以上內容可以對大家有一定的幫助,讓大家可以學到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。