類AJAX應用，JAVASCRIPT跨域訪問

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

我這裡有一個類似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調用了其他域的資料。

這樣的方式得到資料比較簡單，也能跨域訪問資料，比較適合一些簡單的，小的無重新整理的效果。

本人有些擔心的是，如果哪天瀏覽器一更新，拒絕這種訪問方式，可能這樣得到資料就變得不可用了，

建議大家謹慎使用這種方法！！！

http://blog.chinaunix.net/u/25176/showart_437066.html

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More