DedeCMS digg Ajax 跨域怎麼實現
- 藏色散人原創
- 2019-12-18 10:11:082559瀏覽
DedeCMS digg Ajax 跨域怎麼實作？
因為web專案用到二級網域的原因，使得原先的digg不能正常使用。仔細分析後，發現是Ajax JS提交不能跨域的問題。
推薦學習：織夢cms
提供解答如下：
@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>修改以下程式碼：3480a33610d32e976ec8d549dc8746f7頂一下5db79b134e9f6b82c0b36e0489ee08ed
為：cfab4601ec966302d2ce5eae5eccc014頂一下5db79b134e9f6b82c0b36e0489ee08ed
2. 存取遠端檔案：
#遠端檔案（http://www.xxx.com/../dig.php?type=digg&tid=456 ）回傳類似程式碼：
visitCountCallBack({
"visitcount":135
});以上程式碼相當於遠端檔案呼叫本機函數：visitCountCallBack
這樣一來就可以實現利用遠端回傳資料來動態修改本機檔案。
3.總結：
關於這個方案，目前可行，也有人認為會過時。我認為不會產生JS越權的問題。
我這裡有一個類似AJAX應用，關鍵技術是在3f1c4e4b6b16bbbd69b2ee476dc4f83a標籤的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 must of the attribute 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 跨域怎麼實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！