透過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 . ')';