關於Ajax的跨域問題

來源:互聯網
上載者:User

用json(可選)和script標籤,解決ajax的跨域問題,ajax的XMLHttpRequest因為js的安全問題是不能跨域的
但是<script></script>可以用src="http://otherSite.com/a.js"可以跨域所以動態寫入一個<script></script>就OK了,scr指向一個其它網站的檔案,比如:a.php?id=15
讓a.php echo() 一個json的字串  json 參考:http://www.json.org/  (可選)
     <script>

var element = document.createElement("script");

function createScript(compId,dataId){        
        element.src = "http://othersite.com/json.php?comp_id=" + compId + "&data_id=" + dataId + "";
        element.type = "text/javascript";
        element.language = "javascript";
}

function writeContent(){
        alert(productJSON.product[0].name);
}

window.onload = function(){
        createScript(1,2);
        document.getElementsByTagName("head")[0].appendChild(element);
}

if(document.all){
        element.onreadystatechange = function(){//IE用
                var state = element.readyState;
                if (state == "loaded" || state == "interactive" || state == "complete") {
                        writeContent();
                }
        };

} else {
        element.onload = function() {//FF用
                writeContent();
        };
}

</script>

 

下面是json.php   echo出來的內容
var productJSON = {'product': [
{'name' : '物件名1'},
{'building' : '建物名1'},
{'address' : '5'}
]
};

 

如果使用了jQuery的話。 跨域問題就更容易解決了。

 $.getJSON(
         "a.php?callback=?",
         function(data){
           alert("CallBack Data: " + data );
         }
       );    

在此必須要用 callback=? 進行跨域調用,jQuery會返回一個JSONP的傳回值代替‘?’,實際上傳遞給後台指令碼的應該是類似‘&callback=jsonp12126279’。所以需要在後台指令碼中截獲callback的參數,然後加在原先的JSON前。(可以理解成是一次驗證過程)。

 

php:

 $callback= $_GET['callback'];
echo $callback.'('.json_encode(array(key1=>value1,key2=>value2)).')';    //需要注意格式

 

這樣返回的就是’jsonp12126279{key1:value1;key2:value2}’

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: 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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.