jsonp学习记录
2017-12-17 16:35
120 查看
单点登陆实现的其中一种方式就是Jsonp。 单点登录实现的一个困难就是跨域访问。简单解释Jsonp,我们发现ajax没有跨域的权限,但是<img>,<iframe>,<script>的访问却没有这样的限制。json拼接传递值非常方便。于是我们就采用script远程调用服务器的js代码获取值。代码如下
远程服务器remoteserver.com根目录下有个remote.js文件代码如下:
本地服务器localserver.com下有个jsonp.html页面代码如下:
现在我们在jsonp.html页面定义一个函数,然后在远程remote.js中传入数据进行调用。
jsonp.html页面代码如下:
remote.js文件代码如下:
![](http://s14.sinaimg.cn/mw690/002ZnRCmzy7004ENoglcd&690)
远程服务器remoteserver.com根目录下有个remote.js文件代码如下:
alert('我是远程文件');
本地服务器localserver.com下有个jsonp.html页面代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript" src="http://remoteserver.com/remote.js"></script> </head> <body> </body> </html>
现在我们在jsonp.html页面定义一个函数,然后在远程remote.js中传入数据进行调用。
jsonp.html页面代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript"> var localHandler = function(data){ alert('我是本地函数,可以被跨域的remote.js文件调用,远程js带来的数据是:' + data.result); }; </script> <script type="text/javascript" src="http://remoteserver.com/remote.js"></script> </head> <body> </body> </html>
remote.js文件代码如下:
localHandler({"result":"我是远程js带来的数据"});
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript"> // 得到航班信息查询结果后的回调函数 var flightHandler = function(data){ alert('你查询的航班结果是:票价 ' + data.price + ' 元,' + '余票 ' + data.tickets + ' 张。'); }; // 提供jsonp服务的url地址(不管是什么类型的地址,最终生成的返回值都是一段javascript代码) var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler"; // 创建script标签,设置其属性 var script = document.createElement('script'); script.setAttribute('src', url); // 把script标签加入head,此时调用开始 document.getElementsByTagName('head')[0].appendChild(script); </script> </head> <body> </body> </html>
jQuery使用jsonp的代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Untitled Page</title> <script type="text/javascript" src=jquery.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function(){ $.ajax({ type: "get", async: false, url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998", dataType: "jsonp", jsonp: "callback",//传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback) jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据 success: function(json){ alert('您查询到航班信息:票价: ' + json.price + ' 元,余票: ' + json.tickets + ' 张。'); }, error: function(){ alert('fail'); } }); }); </script> </head> <body> </body> </html>
相关文章推荐
- php学习记录 jsonp
- Jsonp学习记录
- vue笔记记录学习jsonp的使用及原理
- 记录-三步走FreeMarker Template学习
- 学习java记录
- 记录一个angular学习网址
- 学习记录 - 1
- ACM协会编程学习座谈的记录和思考
- Linux学习记录--磁盘挂载与卸载
- Jquery的学习记录
- SQL Server的学习记录(未完)
- 记录Linux学习过程--ls
- 《Java编程思想》学习记录(二)
- 智能蛇学习记录
- JavaScript学习记录——《学用 JavaScript 设计模式》学习笔记(3)观察者模式
- 学习打卡记录
- mac ox 搭建red5流媒体服务器(含Demo)--学习记录
- Linux平台设备驱动程序学习记录
- Linux命令学习记录(一直更新)