• 无色无香   2015/4/8 12:47:00
  • 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);
    });

    或者 类似
    代码如下:
    $.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 (点击可以查看示例)

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


大家的回答
  • 还没有人回答这个问题哦,亲,快来帮帮TA吧
  •   我来回答
  • 注册用户登录后才能发表评论,请 登录注册
  • 请您注意

    ·自觉遵守:爱国、守法、自律、真实、文明的原则

    ·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规

    ·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品

    ·承担一切因您的行为而直接或间接导致的民事或刑事法律责任

    ·您在编程中国社区新闻评论发表的作品,本网站有权在网站内保留、转载、引用或者删除

    ·参与本评论即表明您已经阅读并接受上述条款