[jQuery]透過JSONP完成跨站請求

Javascript因為安全性的問題，是無法做跨站(cross-domain)請求的

如果要顯示一些非同步且跨站的資訊，通常都會使用iframe

但是有個例外，透過script標籤裡的src元素可以引用外部網站的資源(例如jQuery)

其實這就是透過JSONP(JSON with Padding)傳輸的，將JSON資料填入Padding(Padding就是要呼叫的函式)

JSONP使用方法需要配合url?jsoncallback=handler的參數

以下為透過jQuery.ajax跨站請求範例
Server端 test.php回傳以下資料(在一個Handler中產生一組JSON)

jsonCallback(
    {
        "name":"Johnson",
        "old":"12",
        "url":"blog.johnsonlu.org"
    }
)

Client端

function jsonCallback( json ) {
	$.each(json, function(index, value){
		alert(index + " " + value );
	});
}

//$.ajax會得到JSONP回傳過來的jsonCallback(json)，所以必須定義一個jsonCallback function處理
$.ajax({
	//需要帶入一組callback參數
	url: "http://example.com/test.php?callback=?",
	dataType:"json"
});

另外也可以詳細去定義ajax

$.ajax({
	type: "get",
	async: false,//async設定false會變成同步請求 要完成ajax後才會繼續執行
	url: "http://example.com/",
	dataType: "jsonp",
	jsonpCallback:"callback", //callback函式(jsonp的callback函式，預設是callback)
	success: function(json){
		//jQuery會自動將結果傳入(如果有設定callback函式的話，兩者都會執行)
		console.log(json);
	},
	error: function(){
		alert('fail');
	}
});

PS：如果需要同時使用數個ajax去取得資料，callback function名稱不要設成一樣的，不然會產生callback function not found錯誤，或者直接使用jsoncallback=?並把jsonpCallback參數拿掉，jQuery就會自動產生亂數的callback

$.ajax({
        type: "get",
        url: "http://example.com?callback=?",
        dataType: "jsonp",
        success: function(json){
                console.log(json);
        },
        error: function(){
                alert('fail');
        }
});

也可以使用jQuery.getJSON

$.getJSON(
		"http://example.com/json.php?callback=?",
		function(json){
				console.log(json);
		}
);

若使用動態產生的callback name，負責產生json的程式就不能寫死

$json = json_encode(array('name' => 'JohnsonLu','age' => '24', 'url' => 'blog.johnsonlu.org'));

echo $_GET['callback'] . '(' . $json . ')';