首页 > 代码库 > AJAX跨域请求json数据的实现方法

AJAX跨域请求json数据的实现方法

这篇文章介绍了AJAX跨域请求json数据的实现方法,有需要的朋友可以参考一下

我们都知道,AJAX的一大限制是不允许跨域请求。 不过通过使用JSONP来实现。JSONP是一种通过脚本标记注入的方式,它是可以引用跨域URL的js脚本,不过需要提供一个回调函数(必须在您自己的页面上),因此,你可以自己处理结果。 让我们看看JSONP的是怎么在jQuery,MooTools的,Dojo Toolkit中实现的。 

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

回调方法的参数 通过getJSON 就可以获取 到json对象

MooTools JSONP
MooTools 需要Request.JSONP Class , 可以从这里下载MooTools More .  选择Request.JSONP,
这样 从另一个域获取json就是小菜一碟了.

Js代码 

new Request.JSONP({ 
    url: "http://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一样.

服务器端你需要这样去取得:

Js代码 

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

// 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是一种非常有效的,可靠的,容易实现的远程数据获取方式。JSONP的策略也使开发人员能够避免繁琐的服务器代理方式,很方便的获取数据。 你可以自己写一个试试

 

 

 

 

 

<iframe id="google_ads_frame2" vspace="0" height="250" marginHeight="0" src="http://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-3447371224873639&output=html&h=250&slotname=8660799060&adk=1970350646&w=300&lmt=1399320993&flash=0&url=http%3A%2F%2Fwww.cnblogs.com%2Fxiaochao12345%2Fp%2F3709668.html&dt=1399320996812&shv=r20140429&cbv=r20140417&saldr=sb&prev_slotnames=4356862740&correlator=1399320996714&frm=20&ga_vid=429972749.1397695120&ga_sid=1399310453&ga_hid=620395365&ga_fc=1&u_tz=480&u_his=491&u_java=1&u_h=768&u_w=1364&u_ah=740&u_aw=1364&u_cd=16&u_nplug=0&u_nmime=0&dff=verdana&dfs=12&adx=0&ady=0&biw=314&bih=74&eid=317150304&oid=3&rx=0&eae=0&docm=9&vis=0&fu=0&ifi=2&xpc=BDGhYDOBr1&p=http%3A//www.cnblogs.com&dtd=45" frameBorder="0" width="300" allowTransparency="true" name="google_ads_frame2" marginWidth="0" scrolling="no" hspace="0"></iframe><iframe id="google_ads_frame3" vspace="0" height="250" marginHeight="0" src="http://googleads.g.doubleclick.net/pagead/ads?client=ca-pub-3447371224873639&output=html&h=250&slotname=8660799060&adk=1970350646&w=300&lmt=1399320993&flash=0&url=http%3A%2F%2Fwww.cnblogs.com%2Fxiaochao12345%2Fp%2F3709668.html&dt=1399320996865&shv=r20140429&cbv=r20140417&saldr=sb&prev_slotnames=4356862740%2C8660799060&correlator=1399320996714&frm=20&ga_vid=429972749.1397695120&ga_sid=1399310453&ga_hid=620395365&ga_fc=1&u_tz=480&u_his=491&u_java=1&u_h=768&u_w=1364&u_ah=740&u_aw=1364&u_cd=16&u_nplug=0&u_nmime=0&dff=verdana&dfs=12&adx=304&ady=250&biw=314&bih=74&eid=317150304&oid=3&rx=0&eae=0&docm=9&vis=0&fu=0&ifi=3&xpc=txevTkSDVj&p=http%3A//www.cnblogs.com&dtd=54" frameBorder="0" width="300" allowTransparency="true" name="google_ads_frame3" marginWidth="0" scrolling="no" hspace="0"></iframe>