AJAX跨域請求json數據

 

我們都知道,AJAX的一大限制是不允許跨域請求。 不過通過使用JSONP來實現。JSONP是一種通過腳本標記註入的方式,它是可以引用跨域URL的js腳本,不過需要提供一個回調函數(必須在您自己的頁面上),因此,你可以自己處理結果。 讓我們看看JSONP的是怎麼在jQuery,MooTools的,Dojo Toolkit中實現的。 

 

jQuery的JSONP

jQuery.getJSON方法:

 

Java代碼 

jQuery.getJSON("https://search.twitter.com/search.json?callback=?",{ 

    q: "Arsenal" 

},function(tweets) { 

    // Handle response here 

    console.info("Twitter returned: ",tweets); 

}); 

 

或者 類似

 

Java代碼 

$.ajax({ 

                type:"get", 

                data:"random="+Math.random(), 

                url:url, 

                dataType:"jsonp", 

                jsonp:"callback", 

                success:function(data){ 

                      $.each(data, function(key, val) { 

                        $("#myDiv").html($("#myDiv").html()+val.cvalue+"</br>"); 

                      }); 

                } 

            }); 

 

回調方法的參數 通過getJSON 就可以獲取 到json對象

 

MooTools JSONP

MooTools 需要Request.JSONP Class , 可以從這裡下載MooTools More .  選擇Request.JSONP,

這樣 從另一個域獲取json就是小菜一碟瞭.

 

Java代碼 

new Request.JSONP({ 

    url: "https://search.twitter.com/search.json", 

    data: { 

        q: "Arsenal" 

    },//提交的參數, 沒有參數可以不寫 

        callbackKey: 'jsoncallback',//自己定義回調函數的參數名稱 

        onComplete: function(tweets) { 

        // Log the result to console for inspection 

        console.info("Twitter returned: ",tweets); 

    } 

}).send(); 

 

如果自己定義瞭回調函數的參數名稱. 跟jquery一樣.

 

服務器端你需要這樣去取得:

 

Java代碼 

String callback = request.getParameter("jsoncallback");//取得回調方法名 

        response.setHeader("Cache-Control", "no-cache"); 

        response.setContentType("text/json;charset=UTF-8"); 

        PrintWriter out; 

        try { 

            out = response.getWriter(); 

            out.print(callback+"("+message+")");//這裡是關鍵.主要就是這裡 

            out.flush(); 

            out.close(); 

        } catch (IOException e) { 

            e.printStackTrace(); 

        } 

 

順便說一句: 個人比較喜歡mootools的語法結構,和框架設計思路. 再次贊美!

 

Dojo JSONP

JSONP 在Dojo Toolkit 中需要用上dojo.io.script (點擊可以查看示例)

 

 

Java代碼 

// dojo.io.script is an external dependency, so it must be required 

dojo.require("dojo.io.script"); 

 

// When the resource is ready 

dojo.ready(function() { 

     

    // Use the get method 

    dojo.io.script.get({ 

        // The URL to get JSON from Twitter 

        url: "https://search.twitter.com/search.json", 

        // The callback paramater 

        callbackParamName: "callback", // Twitter requires "callback" 

        // The content to send 

        content: { 

            q: "Arsenal" 

        }, 

        // The success callback 

        load: function(tweetsJson) {  // Twitter sent us information! 

            // Log the result to console for inspection 

            console.info("Twitter returned: ",tweetsJson); 

        } 

    }); 

}); 

 

JSONP是一種非常有效的,可靠的,容易實現的遠程數據獲取方式。JSONP的策略也使開發人員能夠避免繁瑣的服務器代理方式,很方便的獲取數據。 你可以自己寫一個試試

You May Also Like