無聊玩了一下 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'] 來取值囉！
沒有留言:
張貼留言