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

留言

這個網誌中的熱門文章

c語言-關於#define用法

CMD常用網管指令

使用windows CMD 時間自動校正