無聊玩了一下 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'] 來取值囉!


changyy 發表在 痞客邦 PIXNET 留言(0) 人氣()