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)
1 | jsonCallback( |
2 | { |
3 | "name":"Johnson", |
4 | "old":"12", |
5 | "url":"blog.johnsonlu.org" |
6 | } |
7 | ) |
Client端
1 | function jsonCallback( json ) { |
2 | $.each(json, function(index, value){ |
3 | alert(index + " " + value ); |
4 | }); |
5 | } |
6 |
7 | //$.ajax會得到JSONP回傳過來的jsonCallback(json)，所以必須定義一個jsonCallback function處理 |
8 | $.ajax({ |
9 | //需要帶入一組callback參數 |
10 | url: "http://example.com/test.php?callback=?", |
11 | dataType:"json" |
12 | }); |
另外也可以詳細去定義ajax
1 | $.ajax({ |
2 | type: "get", |
3 | async: false,//async設定false會變成同步請求 要完成ajax後才會繼續執行 |
4 | url: "http://example.com/", |
5 | dataType: "jsonp", |
6 | jsonpCallback:"callback", //callback函式(jsonp的callback函式，預設是callback) |
7 | success: function(json){ |
8 | //jQuery會自動將結果傳入(如果有設定callback函式的話，兩者都會執行) |
9 | console.log(json); |
10 | }, |
11 | error: function(){ |
12 | alert('fail'); |
13 | } |
14 | }); |
PS：如果需要同時使用數個ajax去取得資料，callback function名稱不要設成一樣的，不然會產生callback function not found錯誤，或者直接使用jsoncallback=?並把jsonpCallback參數拿掉，jQuery就會自動產生亂數的callback
1 | $.ajax({ |
2 | type: "get", |
3 | url: "http://example.com?callback=?", |
4 | dataType: "jsonp", |
5 | success: function(json){ |
6 | console.log(json); |
7 | }, |
8 | error: function(){ |
9 | alert('fail'); |
10 | } |
11 | }); |
也可以使用jQuery.getJSON
若使用動態產生的callback name，負責產生json的程式就不能寫死
1 | $json = json_encode(array('name' => 'JohnsonLu','age' => '24', 'url' => 'blog.johnsonlu.org')); |
2 |
3 | echo $_GET['callback'] . '(' . $json . ')'; |
