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


Posted in Javascript onNovember 11, 2013

我们都知道,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 (点击可以查看示例)

 
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的策略也使开发人员能够避免繁琐的服务器代理方式,很方便的获取数据。 你可以自己写一个试试
Javascript 相关文章推荐
如果文字过长,则将过长的部分变成省略号显示
Jun 26 Javascript
Mootools 1.2教程 Fx.Tween的使用
Sep 15 Javascript
jquery基础教程之数组使用详解
Mar 10 Javascript
JavaScript操作表单实例讲解(上)
Jun 20 Javascript
微信小程序 Page()函数详解
Oct 17 Javascript
JavaScript通过filereader接口读取文件
May 10 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
Aug 03 Javascript
vue 之 css module的使用方法
Dec 04 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
May 10 Javascript
Vue组件间通信 Vuex的用法解析
Aug 05 Javascript
Node.js学习之内置模块fs用法示例
Jan 22 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
Jul 30 Javascript
Javascript弹出窗口的各种方法总结
Nov 11 #Javascript
探讨js中的双感叹号判断
Nov 11 #Javascript
js时间戳格式化成日期格式的多种方法
Nov 11 #Javascript
JavaScript中判断对象类型的几种方法总结
Nov 11 #Javascript
在页面中js获取光标/鼠标的坐标及光标的像素坐标
Nov 11 #Javascript
js中关于一个分号的崩溃示例
Nov 11 #Javascript
javascript中怎么做对象的类型判断
Nov 11 #Javascript
You might like
破解图片防盗链的代码(asp/php)测试通过
2010/07/02 PHP
支持中文字母数字、自定义字体php验证码代码
2012/02/27 PHP
php 判断数组是几维数组
2013/03/20 PHP
php 使用GD库为页面增加水印示例代码
2014/03/24 PHP
php如何连接sql server
2015/10/16 PHP
Thinkphp 框架基础之源码获取、环境要求与目录结构分析
2020/04/27 PHP
php中get_object_vars()在数组的实例用法
2021/02/22 PHP
10个基于Jquery的幻灯片插件教程
2010/10/29 Javascript
jQuery实现密保互斥问题解决方案
2013/08/16 Javascript
jquery select 设置默认选中的示例代码
2014/02/07 Javascript
基于Bootstrap实现tab标签切换效果
2020/04/15 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
2017/02/09 Javascript
node.js中express中间件body-parser的介绍与用法详解
2017/05/23 Javascript
利用node.js实现反向代理的方法详解
2017/07/24 Javascript
简单实现js进度条加载效果
2020/03/25 Javascript
关于axios如何全局注册浅析
2018/01/14 Javascript
Vue 数组和对象更新,但是页面没有刷新的解决方式
2019/11/09 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
2020/04/24 Javascript
微信小程序文章详情功能完整实例
2020/06/03 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
2020/08/03 Javascript
Python用input输入列表的实例代码
2020/02/07 Python
python代码实现图书管理系统
2020/11/30 Python
Pandas DataFrame求差集的示例代码
2020/12/13 Python
土耳其玩具商店:Toyzz Shop
2019/08/02 全球购物
茶叶生产计划书
2014/01/10 职场文书
企业文化口号
2014/06/12 职场文书
人大调研汇报材料
2014/08/14 职场文书
党员对照检查材料整改措施思想汇报
2014/09/26 职场文书
家庭困难证明
2014/10/12 职场文书
公司股份转让协议书范本
2015/01/28 职场文书
2015年保送生自荐信
2015/03/24 职场文书
2015年置业顾问工作总结
2015/04/07 职场文书
婚育证明样本
2015/06/16 职场文书
大学生入党自我鉴定范文
2019/06/21 职场文书
pandas中DataFrame数据合并连接(merge、join、concat)
2021/05/30 Python
讲解Python实例练习逆序输出字符串
2022/05/06 Python