jquery java jsonp_JSONP原理及JQUERY JSONP的使用
JSONP原理
JSON和JSONP
JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。对于JSON大家应该是很了解了吧,不是很清楚的朋友可以去json.org上了解下,简单易懂。
JSONP是JSON with Padding的略称。它是一个非官方的协议,它允许在服务器端集成Scripttags返回至客户端,通过javascriptcallback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。
JSONP就像是JSON+Padding一样(Padding这里我们理解为填充),我们先看下面的小例子然后再详细介绍。
同源策略
在JavaScript中,有一个很重要的安全性限制,被称为“Same-OriginPolicy”(同源策略)。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的文档在同一域下的内容。
根据这个策略,在baidu.com下的页面中包含的JavaScript代码,不能访问在google.com域名下的页面内容;甚至不同的子域名之间的页面也不能通过JavaScript代码互相访问。对于Ajax的影响在于,通过XMLHttpRequest实现的Ajax请求,不能向不同的域提交请求,例如,在abc.example.com下的页面,不能向def.example.com提交Ajax请求,等等。然而,当进行一些比较深入的前端编程的时候,不可避免地需要进行跨域操作,这时候“同源策略”就显得过于苛刻。
然而html中有一些元素是不存在跨域问题的如:script,iframe等元素,利用这些元素,就能很好的解决这个问题.
JSONP的实现方式
利用在页面中创建
先看一个简单例子
example1.com有这样一个方法
//回调函数
function callback(data) {
//显示客户信息在A页面上;
}
//通过加载example2的JS文件来达到函数调用和数据传递
example2.com的test.js内容如下
//回调函数
callback({name:"张三"});
以上这种方法只是一个简单实现原因的例子,现实中我们的数据和回调也不会都写死在JS中的,所以我们要想办法将这些静态的东西动态生成就可以了.只要将example1.com srcipt 地址改为一个能动态生成JS调用方法的服务地址即可.如:
test.do Controller直接返回如下
callback(数据库客户信息的JSON对象);
例子如下:当然对
假若要实现一个需求,某个网站a.com上显示的客户信息来自于其它网站b.com,显然通过AJAX请求去取数据是不能做到的,因为存在同源策略.
A网站的前台实现:
//回调函数
function displayCustomer(data) {
alert(data);
//将客户信息显示在A.com的页面上...
}
window.onload = function(){
//添加
function createScript(src){
var script = document.createElement('script');
script.setAttribute("type","text/javascript");
script.src = src;
document.body.appendChild(script);
}
}
createScript("http://B.com/search.do?&callback=displayCustomer");
B网站的后台实现:
@Controller
public classJsonpRest {
@RequestMapping(value = "/test.do",method = RequestMethod.GET)
public @ResponseBody Stringlist(HttpServletRequest request) {
returnrequest.getParameter("callback")+"({name:'张三',age:18})";
}
}
JSONP的优点是:
它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制;它的兼容性更好,在更加古老的浏览器中都可以运行,不需要XMLHttpRequest或ActiveX的支持;并且在请求完毕后可以通过调用callback的方式回传结果。
JSONP的缺点则是:
它只支持GET请求而不支持POST等其它类型的HTTP请求;它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题。
没有关于 JSONP调用的错误处理。如果动态脚本插入有效,就执行调用;如果无效,就静默失败。失败是没有任何提示的。例如,不能从服务器捕捉到404 错误,也不能取消或重新开始请求。不过,等待一段时间还没有响应的话,就不用理它了。
JQUERY对JSONP的支持
从JQery 1.2以后,就开始支持JSONP的调用。JQuery对前台做了很好的处理如自动生成全局回调函数等,但后台还需要开发人员自己实现.
$.getJSON("http://跨域的dns/xxx.do?callback=?",function(json){
// 业务逻辑执行代码
});
请求URL
http://xxx.com/rest.do?callba..._1332575486681&_=1393510789026
$.ajax({
url:"http://xxx.com/rest.do",
dataType:"jsonp", //必须指定
jsonp : "c", //若不指定则默认为callback
jsonpCallback:"test",//若不指定则Jquery自己生成随机的名称
success:function(data){
//业务逻辑执行代码
}
});
请求URL http://xxx.com/rest.do?c=test&_=1393510789026
当dataType为JSONP时,JQUERY会为用户生成一个全局函数名称为jsonpCallback参数的值,这个函数内部调用了success方法JQUERY的实现原理及步骤
以GET方式请求目标地址,并在URL中拼接以jsonp参数值为key,以jsonpCallback值为value的参数
请求返回回调函数数据
触发调用全局的回调函数,在全局函数回调中调用success方法并将数据传递给success方法
jquery java jsonp_JSONP原理及JQUERY JSONP的使用相关推荐
- 说说json和jsonp 也许你会明白它的原理 含有jQuery实例 蛋疼 ,我面试的时候被卡了 赶紧写一个回顾...
说到AJAX就会不可避免的面临两个问题, 第一个是AJAX以何种格式来交换数据? 第二个是跨域的需求如何解决? 这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨域可以 ...
- Java 面向对象编程、jQuery、JavaScript、servlet、javabean----理论知识
一.继承 1.继承(优点:代码复用方便修改) 1.1 继承的关键字:extends 1.2 实现继承步骤(1.编写父类 2.编写子类继承父类) 1.3 调用父类方法的关键字:s ...
- jQuery中的ajax、jquery中ajax全局事件、load实现页面无刷新局部加载、ajax跨域请求jsonp、利用formData对象向服务端异步发送二进制数据,表单序列化(异步获取表单内容)
jQuery中使用ajax: 在jQuery中使用ajax首先需要引入jQuery包,其引入方式可以采用网络资源,也可以下载包到项目文件中,这里推荐下载包到文件中:市面上有多个版本的jQuery库,这 ...
- jQuery的实现原理和核心
1.jQuery的实现原理 1)jQuery采用的是构造函数模式进行开发的,jQuery是一个类 2)上面说的常用的方法(CSS.属性.筛选.事件.动画.文档处理)都是定义在jQuery.protot ...
- jquery on方法原理_jQuery 学习小结
jQuery 学习小结 相较于原生 JS,jQuery 通过 API 接口写更少的代码,做更多的事情.虽然这个元老级别的技术库的使用率已经渐渐在减少了,不过了解其原理和用法还是很有用的. jQuery ...
- jquery $.fn $.fx原理
$.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效. 如扩展$.fn.abc() 那么你可以这样子:$("#div").abc(); 通 ...
- java手风琴代码_[Java教程]18款jquery抽屉式手风琴导航特效代码
[Java教程]18款jquery抽屉式手风琴导航特效代码 0 2015-11-12 21:00:05 jquery hover抽屉式导航图片展开收缩代码 jQuery仿瑞丽鼠标滑过图片手风琴展开特效 ...
- 基于javaweb的水果店商城超市系统(java+ssm+jsp+ajax+jquery+mysql)
基于javaweb的水果店商城超市系统(java+ssm+jsp+ajax+jquery+mysql) 运行环境 Java≥8.MySQL≥5.7.Tomcat≥8 开发工具 eclipse/idea ...
- 微信大转盘 java_[Java教程]使用CSS3+jquery.js 实现微信抽奖转盘效果
[Java教程]使用CSS3+jquery.js 实现微信抽奖转盘效果 0 2014-03-19 02:00:24 上次发表了一篇 微信抽奖转盘活动-效果源码分析 最近想起了刚接到这个项目时第一时间脑 ...
最新文章
- 如何在RHEV平台中新建ISO存储域
- python 切片 单冒号的作用[:](批量赋值最小数组单元)
- 自定义sql_【PL/SQL 自定义函数】 常用场景
- 已成功拿下字节、腾讯、脉脉offer,满满干货指导
- mex文件用matlab能打开吗,matlab中mex文件编译运行的问题
- 01c-1: 主流长远
- mysql 多实例 独立配置文件_mysql 5.7 配置多实例 — 独立配置文件方式
- STM32硬件复位时间
- 2018/12/06 L1-022 L1-022 奇偶分家 Java
- CactiEZ V10.1安装及配置
- Ext.Net配色方案
- 同IP不同端口导致cookie冲突的解决方法
- 李一男离开华为时给属下的忠告!
- Openlayers地图背景透明度设置
- 『贝壳找房APP』反编译到底有多简单--反编译和调试实践
- WPF的TextBox抛出InvalidOperationException异常:Cannot close undo unit because no opened unit exists.
- 设置Windows默认登录方式为智能卡登录
- 深入浅出理解类和对象
- 应用ast抽象语法树修改js函数
- LiteOS 知:序
热门文章
- 毕业设计源码-计算机毕业设计源码
- JavaScript的form表单验证中的身份证校验
- html框架代码背景图片,CSS3中background-image实现多背景图片(代码实例)
- 网卡 集线器 交换机 路由器 调制解调器的作用
- 相对定位、绝对定位与固定定位
- 命令行运行javac,报错: 编码 GBK 的不可映射字符 (0x9C)
- 一文让你读懂——什么是1G,2G,3G,4G,5G
- UE4 网格体闪烁问题解决
- 思考1:为什么大多数人喜欢做重复性工作,而不是思考用更简单的方法或者思考按自己的思路解决问题。
- 简单的WIN32屏保开发制作(可播放视频)