AJAX跨域请求json数据

来源:网络 责任编辑:栏目编辑 发表时间:2013-07-02 01:38 点击:

 

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

 

jQuery的JSONP

jQuery.getJSON方法:

 

Java代码 

jQuery.getJSON("http://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: "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一样.

 

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

 

Java代码 

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

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

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

        PrintWriter out;&nb

    相关新闻>>

      发表评论
      请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
      用户名: 验证码:点击我更换图片
      最新评论 更多>>

      推荐热点

      • Gb2312转utf-8编码的方法(vbs+js)
      • 如何使用Ajax技术开发Web应用程序(1)
      • js跳转路径问题
      • JavaScript模仿桌面窗口
      • 用js检测两个线段是否相交
      • 运用JavaScript构建你的第一个Metro式应用程序(on Windows
      • 我知道的JavaScript -- 设计模式(桥接)应用之 – 验证器
      • 我是如何去了解jquery的(六),案例之幻灯片轮换
      • Jquery封装幻灯片效果
      网站首页 - 友情链接 - 网站地图 - TAG标签 - RSS订阅 - 内容搜索
      Copyright © 2008-2015 计算机技术学习交流网. 版权所有

      豫ICP备11007008号-1