AJAX跨域請(qǐng)求json數(shù)據(jù)的實(shí)現(xiàn)方法

2018-09-06 18:49 更新
我們都知道,AJAX的一大限制是不允許跨域請(qǐng)求。 不過(guò)通過(guò)使用JSONP來(lái)實(shí)現(xiàn)。JSONP是一種通過(guò)腳本標(biāo)記注入的方式,它是可以引用跨域URL的js腳本,不過(guò)需要提供一個(gè)回調(diào)函數(shù)(必須在您自己的頁(yè)面上),因此,你可以自己處理結(jié)果。 讓我們看看JSONP的是怎么在jQuery,MooTools的,Dojo Toolkit中實(shí)現(xiàn)的。 

jQuery的JSONP
jQuery.getJSON方法:

Js代碼 

代碼如下:

jQuery.getJSON("http://search.twitter.com/search.json?callback=?",{ 
    q: "Arsenal" 
},function(tweets) { 
    // Handle response here 
    console.info("Twitter returned: ",tweets); 
}); 


或者 類似

Js代碼 

代碼如下:

$.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>"); 
                      }); 
                } 
            }); 


回調(diào)方法的參數(shù) 通過(guò)getJSON 就可以獲取 到j(luò)son對(duì)象

MooTools JSONP
MooTools 需要Request.JSONP Class , 可以從這里下載MooTools More .  選擇Request.JSONP,
這樣 從另一個(gè)域獲取json就是小菜一碟了.

Js代碼 

代碼如下:


new Request.JSONP({ 
    url: "http://search.twitter.com/search.json", 
    data: { 
        q: "Arsenal" 
    },//提交的參數(shù), 沒(méi)有參數(shù)可以不寫 
        callbackKey: 'jsoncallback',//自己定義回調(diào)函數(shù)的參數(shù)名稱 
        onComplete: function(tweets) { 
        // Log the result to console for inspection 
        console.info("Twitter returned: ",tweets); 
    } 
}).send(); 


如果自己定義了回調(diào)函數(shù)的參數(shù)名稱. 跟jquery一樣.

服務(wù)器端你需要這樣去取得:

Js代碼 

代碼如下:


String callback = request.getParameter("jsoncallback");//取得回調(diào)方法名 
        response.setHeader("Cache-Control", "no-cache"); 
        response.setContentType("text/json;charset=UTF-8"); 
        PrintWriter out; 
        try { 
            out = response.getWriter(); 
            out.print(callback+"("+message+")");//這里是關(guān)鍵.主要就是這里 
            out.flush(); 
            out.close(); 
        } catch (IOException e) { 
            e.printStackTrace(); 
        } 


順便說(shuō)一句: 個(gè)人比較喜歡mootools的語(yǔ)法結(jié)構(gòu),和框架設(shè)計(jì)思路. 再次贊美!

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

 

Js代碼 


// 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: "http://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是一種非常有效的,可靠的,容易實(shí)現(xiàn)的遠(yuǎn)程數(shù)據(jù)獲取方式。JSONP的策略也使開(kāi)發(fā)人員能夠避免繁瑣的服務(wù)器代理方式,很方便的獲取數(shù)據(jù)。 你可以自己寫一個(gè)試試
以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)