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 相关文章推荐
Javascript的getYear、getFullYear、getUTCFullYear异同分享
Nov 30 Javascript
jquery判断浏览器类型的代码
Nov 05 Javascript
jquery清空textarea等输入框实现代码
Apr 22 Javascript
JavaScript中prototype为对象添加属性的误区介绍
Oct 15 Javascript
JQuery each()嵌套使用小结
Apr 18 Javascript
对JavaScript客户端应用编程的一些建议
Jun 24 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
Jan 08 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
Sep 14 Javascript
vue组件中的数据传递方法
May 14 Javascript
Three.js实现简单3D房间布局
Dec 30 Javascript
在Web关闭页面时发送Ajax请求的实现方法
Mar 07 Javascript
Vue开发环境中修改端口号的实现方法
Aug 15 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
php获取url参数方法总结
2014/11/13 PHP
Codeigniter框架实现获取分页数据和总条数的方法
2014/12/05 PHP
php生成excel列名超过26列大于Z时的解决方法
2014/12/29 PHP
PHP关键特性之命名空间实例详解
2017/05/06 PHP
PHP+Ajax实现的博客文章添加类别功能示例
2018/03/29 PHP
Prototype使用指南之hash.js
2007/01/10 Javascript
JS 非图片动态loading效果实现代码
2010/04/09 Javascript
js创建元素(节点)示例
2014/01/02 Javascript
上传文件返回的json数据会被提示下载问题解决方案
2014/12/03 Javascript
jQuery实现购物车表单自动结算效果实例
2015/08/10 Javascript
js实现新浪微博首页效果
2015/10/16 Javascript
图解JavaScript中的this关键字
2020/05/28 Javascript
ECMAScript6轮播图实践知识总结
2016/08/17 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
2016/11/23 Javascript
vue指令以及dom操作详解
2017/03/04 Javascript
创建简单的node服务器实例(分享)
2017/06/23 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
2019/02/22 Javascript
express如何解决ajax跨域访问session失效问题详解
2019/06/20 Javascript
layui动态渲染生成select的option值方法
2019/09/23 Javascript
React.js组件实现拖拽排序组件功能过程解析
2020/04/27 Javascript
js实现小球在页面规定的区域运动
2020/06/16 Javascript
Javascript如何递归遍历本地文件夹
2020/08/06 Javascript
JavaScript TAB栏切换效果的示例
2020/11/05 Javascript
Python入门篇之列表和元组
2014/10/17 Python
解决uWSGI的编码问题详解
2017/03/24 Python
python OpenCV学习笔记之绘制直方图的方法
2018/02/08 Python
python 实现多线程下载m3u8格式视频并使用fmmpeg合并
2019/11/15 Python
Python中私有属性的定义方式
2020/03/05 Python
YOINS官网:时尚女装网上购物
2017/03/17 全球购物
C++面试题:关于链表和指针
2013/06/05 面试题
应届生求职信范文
2014/05/26 职场文书
优秀工会工作者事迹材料
2014/06/02 职场文书
大一新生期末自我评价
2014/09/12 职场文书
交通违章检讨书
2014/09/21 职场文书
2014市府办领导班子“四风问题”对照检查材料思想汇报
2014/09/24 职场文书
客房领班岗位职责
2015/02/11 职场文书