Google+ Followers

2014年7月11日 星期五

[Javascript] 使用 AJAX/jQuery 與 JSONP/Callback 處理跨 domain 問題

很久沒寫 ajax 了 :P 由於機器整合不易?所以 API 就是要跨網域多台機器要互動。至於原理可以看看 wiki JSONP 簡介,在此筆記一下 Server Site 跟 Client Site 的用法

Server Site API 支援 JSONP 使用模式:

假設 API 輸出結果為 {"status":true} 的 JSON 格式,改成多一個 function name 來包裝: callbackFunc({"status":true})

例如:

$ wget -qO- http://example.com/api
{"status":true}

$ wget -qO- 'http://example.com/api?mycallback=HelloCallback'
HelloCallback({"status":true})


Client Site:

<script>
$(document).ready(function(){
$.ajax({
type: 'GET',
dataType: 'jsonp' ,
jsonpCallback: 'HelloCallback',
url: 'http://example.com/api',
data: 'mycallback=HelloCallback',
success: function(data) {
console.log(data);
}
});
});
</script>


若 Server Site 用的參數剛好是 callback 的話:

$ wget -qO- http://example.com/api
{"status":true}

$ wget -qO- 'http://example.com/api?callback=HelloCallback'
HelloCallback({"status":true})


那 Client Site 可以化簡成:

<script>
$(document).ready(function(){
$.ajax({
type: 'GET',
dataType: 'jsonp' ,
url: 'http://example.com/api',
success: function(data) {
console.log(data);
}
});
});
</script>


可以用 Chrome Browser 觀看 jQuery 發出的 Requests 長什麼樣子,主因是 jQuery 預先幫忙包好了。

沒有留言:

張貼留言