[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 預先幫忙包好了。