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 相关文章推荐
javascript使用eval或者new Function进行语法检查
Oct 16 Javascript
判断用户是否在线的代码
Mar 05 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
Nov 26 Javascript
Bootstrap每天必学之面板
Nov 30 Javascript
jQuery实现背景弹性滚动的导航效果
Jun 01 Javascript
js遍历map javaScript遍历map的简单实现
Aug 26 Javascript
react native仿微信PopupWindow效果的实例代码
Aug 07 Javascript
vue-cli中打包图片路径错误的解决方法
Oct 26 Javascript
微信小程序视图控件与bindtap之间的问题的解决
Apr 08 Javascript
layui默认选中table的CheckBox复选框方法
Sep 19 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
Feb 04 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
Aug 07 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检查字符串中是否有外链的方法
2015/07/29 PHP
php实现购物车功能(以大苹果购物网为例)
2017/03/09 PHP
php面试实现反射注入的详细方法
2019/09/30 PHP
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
2011/09/02 Javascript
jQuery.fn和jQuery.prototype区别介绍
2013/10/05 Javascript
js中同步与异步处理的方法和区别总结
2013/12/25 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
2014/01/14 Javascript
一个仿糯米弹框效果demo
2014/07/22 Javascript
PHP中使用微秒计算脚本执行时间例子
2014/11/19 Javascript
js/jquery判断浏览器类型的方法小结
2015/05/12 Javascript
javascript中setInterval的用法
2015/07/19 Javascript
JavaScript实现页面定时刷新(定时器,meta)
2016/10/12 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
2016/11/09 Javascript
使用BootStrap实现表格隔行变色及hover变色并在需要时出现滚动条
2017/01/04 Javascript
Java与JavaScript中判断两字符串是否相等的区别
2017/03/13 Javascript
JavaScript多线程运行库Nexus.js详解
2017/12/22 Javascript
详解如何为你的angular app构建一个第三方库
2018/12/07 Javascript
利用jsonp解决js读取本地json跨域的问题
2018/12/11 Javascript
说说如何在Vue.js中实现数字输入组件的方法
2019/01/08 Javascript
JavaScript解析JSON数据示例
2019/07/16 Javascript
CountUp.js数字滚动插件使用方法详解
2019/10/17 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
2019/10/28 Javascript
python标准算法实现数组全排列的方法
2015/03/17 Python
CSS3实现背景透明文字不透明的示例代码
2018/06/25 HTML / CSS
美国运动鞋和运动服零售商:Footaction
2017/04/07 全球购物
2014年五四青年节演讲比赛方案
2014/04/22 职场文书
公共场所禁烟标语
2014/06/25 职场文书
党员干部民主生活会议批评与自我批评材料
2014/09/20 职场文书
技术员岗位职责
2015/02/04 职场文书
档案工作个人总结
2015/03/03 职场文书
财务会计求职信范文
2015/03/20 职场文书
2015年银行柜员工作总结报告
2015/04/01 职场文书
员工手册编写范本
2015/05/14 职场文书
2016计算机专业毕业生自荐信
2016/01/28 职场文书
如何使用flask将模型部署为服务
2021/05/13 Python
利用 JavaScript 构建命令行应用
2021/11/17 Javascript