Google+ Followers

2010年10月21日 星期四

Cross-domain Ajax Query

無聊玩了一下 Ajax Query,在 http://localhost/ 呼叫 htt://www.example.com/test.php 取得資料,過程中用 Firebug 查看網路跟 Javascript,很奇妙地是回傳 200 OK 但又被打個 X ,一直搞不太懂為啥會這樣,結果過了三十分鐘後我才想起來!這就是 cross-domain 的 request 問題!也就是使用 Javascript 在 A site 去 Query 另一個 domain, B site, 的問題。


說真的我都還沒解過,只知道曾聽人說可以用 callbacok function 來解,但怎樣解?我不知道。昨晚嘗試使用,才發現 callback function 是搭配 JSON 格式,這類的專有名詞是 JSONP,全名是 JSON with padding,細節可以在 Wikipedia - JSON 查看。


舉一個範例



  • 假設在 A domain 下,進行 Ajax Query,查詢 B domain 的資料,如 http://b.domain/test.php,並且 http://b.domain/test.php 支援 JSON 和 JSONP 的使用

  • 假設使用 http://b.domain/test.php?callback=my_func 時,即啟動 JSONP 的方式,而不加 callback 參數時,僅 JSON 格式的回傳


如果沒有加 callback 參數時,http://b.domain/test.php,那回傳的資料可能是:


{'x':1,'y':2}


若加上 callback=my_func 時,http://b.domain/test.php?callback=my_func,則回傳


my_func({'x':1,'y':2})


而這種透過 callback 的使用方式:



  • 新增一個 function 名為 my_func

  • 使用動態新增 script 的方式


範例:


<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <title>Use JSONP</title>
        <script type="text/javascript">
            function initialize()
            {
                var action_url = 'http://b.domain/test.php?callback=my_func';
                var script = document.createElement("script");
                script.setAttribute("src",action_url);
                script.setAttribute("type","text/javascript");
                document.body.appendChild(script);
            }
            function my_func(data)
            {
                console.log( data );
                //alert(data);
            }
        </script>
    </head>
    <body onload="initialize()">
    </body>
</html>


如此一來,在 my_func 中,就會收到 {'x':1,'y':2} 的資訊,並且可以用 data['x'] 和 data['y'] 來取值囉!


沒有留言:

張貼留言