jquery的ajax和getJson跨域获取json数据的实现方法


Posted in Javascript onFebruary 04, 2014

很多开发人员在使用jquery在前端和服务器端进行数据交互,所以很容易会认为在前端利用jquery就可以读取任何站点的数据了。近日在进行开 发时,因为要和第三方公司的一个项目进行数据的共享,因为考虑多不占用服务器的资源,遂决定直接在html进行数据的读取,不走服务器端进行中转了。然后 正好就遇到了浏览器端跨域访问的问题。

跨域的安全限制都是指浏览器端来说的,服务器端不存在跨域安全限制的问题。

目前浏览器端跨域访问常用的两种方法有两种:

1、通过jQuery的ajax进行跨域,这其实是采用的jsonp的方式来实现的。

jsonp是英文json with padding的缩写。它允许在服务器端生成script tags至返回至客户端,也就是动态生成javascript标签,通过javascript callback的形式实现数据读取。

html页面端示例代码:

 //首先要引入jquery的js包 
 jQuery(document).ready(function(){ 
     $.ajax({ 
         type : "get", //jquey是不支持post方式跨域的 
         async:false, 
         url : "http://api.taobao.com/apitools/ajax_props.do", //跨域请求的URL 
         dataType : "jsonp", 
         //传递给请求处理程序,用以获得jsonp回调函数名的参数名(默认为:callback) 
         jsonp: "jsoncallback", 
         //自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名 
         jsonpCallback:"success_jsonpCallback", 
         //成功获取跨域服务器上的json数据后,会动态执行这个callback函数 
         success : function(json){  
             alert(json); 
         } 
     }); 
 });

服务器端示例代码,以java为例:

服务器端代码,是重点,开始以为,只要客户端通过jsonp就可以直接跨域访问,其实不然,需要服务器端的支持才行。

 public void jsonpTest() throws IOException{ 
     HttpServletRequest request = ServletActionContext.getRequest(); 
     HttpServletResponse response = ServletActionContext.getResponse(); 
     //根据html指定的jsonp回调函数的参数名,获取回调函数的名称 
     //callbackName的值其实就是:success_jsonpCallback 
     String callbackName = (String)request.getAttribute("jsoncallback"); 
     //简单模拟一个json字符串,实际可使用google的gson进行转换,次数通过字符串拼接 
     //{"name":"张三","age":28} 
     //\是对"号进行转义 
     String jsonStr = "{\"name\":\"张三\",\"age\":28}"; 
     //最终返回的数据为:success_jsonpCallback({"name":"张三","age":28}) 
     String renderStr = callbackName+"("+jsonStr+")"; 
     response.setContentType("text/plain;charset=UTF-8"); 
     response.getWriter().write(renderStr); 
 }

jsonp的原理:

首先在客户端注册一个callback (如:'jsoncallback'), 然后把callback的名字(如:success_jsonpCallback)传给服务器端对应的处理函数。

服务器先生成需要返回给客户端的 json 数据。然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数(jsoncallback)的值(success_jsonpCallback) 。

最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。
客户端浏览器,解析script标签,并将服务器端返回的数据,作为参数,
传入到了客户端预先定义好的 callback 函数(如上例中jquery $.ajax()方法封装的的success: function (json))里。

实际上跨域是通过动态增加script来加载数据,无法直接获得数据,所以需要使用回调函数。

2.使用jquery的getJson进行跨域读取数据

实际上getJson方式的根本原理和ajax使用jsonp的方式是一样的。

jquery中常用getJson来调用获取远程的数据,并通过json格式返回。函数的原型如下:

jQuery.getJSON(url,data,success(data,status,xhr))

参数 描述
url 必需。规定将请求发送的哪个 URL。
data 可选。规定连同请求发送到服务器的数据。
success(data,status,xhr) 可选。规定当请求成功时运行的函数。 额外的参数: response - 包含来自请求的结果数据 status - 包含请求的状态 xhr - 包含 XMLHttpRequest 对象

该函数是简写的ajax函数,实际上等价于:

$.ajax({
  url: url,
  data: data,
  success: callback,
  dataType: json
});

言归正传,下面我们来看如何使用getJson跨域获取数据。

html页面示例代码:

$.getJSON("http://api.taobao.com/apitools/ajax_props.do&jsoncallback=?",
    function (data) {
        alert(data);
    }
);

执行原理:

发送请求时需要传一个callback的回调函数名到服务器端,服务器端拿到这个回调函数名,再将返回数据用参数的形式反回到客户端,这样客户端就能够调到。

所以发送请求URL的地址后面一定要上jsoncallback=?这样的参数,jquery会将?号自动替换成自动生成的回调函数的名称。

所以最终的实际请求为:http://api.taobao.com/apitools/ajax_props.do&jsoncallback=jsonp1322444422697

所以和ajax的方式想比较,也就是callback函数一个是自动生成的函数名,一个是手工指定的函数名。

Javascript 相关文章推荐
firebug的一个有趣现象介绍
Nov 30 Javascript
document.forms用法示例介绍
Jun 26 Javascript
js确认删除对话框适用于a标签及submit
Jul 10 Javascript
Jquery实现兼容各大浏览器的Enter回车切换输入焦点的方法
Sep 01 Javascript
基于jquery实现等比缩放图片
Dec 03 Javascript
基于Css3和JQuery实现打字机效果
Aug 11 Javascript
js实现横向伸展开的二级导航菜单代码
Aug 28 Javascript
JS跨域请求外部服务器的资源
Feb 06 Javascript
Angularjs cookie 操作实例详解
Sep 27 Javascript
详解多页应用 Webpack4 配置优化与踩坑记录
Oct 16 Javascript
详解JavaScript实现动态的轮播图效果
Apr 29 Javascript
ionic2.0双击返回键退出应用
Sep 17 Javascript
jquery ajax跨域解决方法(json方式)
Feb 04 #Javascript
解决json日期格式问题的3种方法
Feb 02 #Javascript
为jQuery添加Webkit的触摸的方法分享
Feb 02 #Javascript
简单的JavaScript互斥锁分享
Feb 02 #Javascript
在百度知道团队中快速审批新成员的js脚本
Feb 02 #Javascript
基于jquery的simpleValidate简易验证插件
Jan 31 #Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
Jan 31 #Javascript
You might like
PHP 验证码不显示只有一个小红叉的解决方法
2013/09/30 PHP
PHP二维数组去重算法
2016/12/17 PHP
jQuery1.6 使用方法二
2011/11/23 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
2013/04/26 Javascript
javascript中动态函数用法实例分析
2015/05/14 Javascript
js实现网页多级级联菜单代码
2015/08/20 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
2015/11/15 Javascript
判断输入的字符串是否是日期格式的简单方法
2016/07/11 Javascript
jQuery实现的自动加载页面功能示例
2016/09/04 Javascript
VueJS全面解析
2016/11/10 Javascript
详解JS中的attribute属性
2017/04/25 Javascript
jQuery实现div跟随鼠标移动
2020/08/20 jQuery
JavaScript Dom 绑定事件操作实例详解
2019/10/02 Javascript
Postman动态获取返回值过程详解
2020/06/30 Javascript
JavaScript大数相加相乘的实现方法实例
2020/10/18 Javascript
Python的Flask站点中集成xhEditor文本编辑器的教程
2016/06/13 Python
Python基于回溯法子集树模板解决选排问题示例
2017/09/07 Python
Bottle框架中的装饰器类和描述符应用详解
2017/10/28 Python
Python实现一个Git日志统计分析的小工具
2017/12/14 Python
Python 窗体(tkinter)按钮 位置实例
2019/06/13 Python
详解CSS3中的box-sizing(content-box与border-box)
2019/04/19 HTML / CSS
在html5的Canvas上绘制椭圆的几种方法总结
2013/01/07 HTML / CSS
详解WebSocket跨域问题解决
2018/08/06 HTML / CSS
全球最大的房车租赁市场:Outdoorsy
2018/09/19 全球购物
工业学校毕业生自荐书
2014/01/03 职场文书
交通安全标语
2014/06/06 职场文书
运动会跳远广播稿5篇
2014/09/17 职场文书
县委务虚会发言材料
2014/10/20 职场文书
优秀校长事迹材料
2014/12/24 职场文书
教师个人年度总结
2015/02/11 职场文书
大学生读书笔记范文
2015/07/01 职场文书
2015年教师节广播稿
2015/08/19 职场文书
总结Python变量的相关知识
2021/06/28 Python
Docker官方工具docker-registry案例演示
2022/04/13 Servers
微信小程序实现轮播图指示器
2022/06/25 Javascript
教你使用RustDesk 搭建一个自己的远程桌面中继服务器
2022/08/14 Servers