JSONP跨域的原理解析及其实现介绍
JSONP 即 Json padding ,JSONP跨域GET请求是一个常用的解决方案,下面我们来看一下JSONP跨域是如何实现的,并且探讨下JSONP跨域的原理
JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在JavaScript中,有一个很重要的安全性限制,被称为“Same- Origin Policy”(同源策略)。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的文档 在同一域下的内容。
JavaScript这个安全策略在进行多iframe或多窗口编程、以及Ajax编程时显得尤为重要。根据这个策 略,在baidu.com下的页面中包含的JavaScript代码,不能访问在google.com域名下的页面内容;甚至不同的子域名之间的页面也不能通过JavaScript代码互相访问。对于Ajax的影响在于,通过XMLHttpRequest实现的Ajax请求,不能向不同的域提交请求,例如:在abc.example.com下的页面,不能向def.example.com提交Ajax请求等等。
然而,当进行一些比较深入的前端编程的时候,不可避免地需要进行跨域操作,这时候“同源策略”就显得过于苛刻。JSONP跨域GET请求是一个常用的解决方案,下面我们来看一下JSONP跨域是如何实现的,并且探讨下JSONP跨域的原理。
假设在http://example1.com/index.php这个页面中向http://example2.com/getinfo.php提交 GET请求,我们可以将下面的JavaScript代码放在http://example1.com/index.php这个页面中来实现:
var eleScript= document.createElement("script");
eleScript.type = "text/javascript";
eleScript.src = "http://example2.com/getinfo.php?callback=jsonCallBack";
document.getElementsByTagName("HEAD")[0].appendChild(eleScript); //回调函数function jsonCallBack(resultMsg){ alert(resultMsg)}
JSONP的缺点则是:它只支持GET请求而不支持POST等其它类型的HTTP请求;它只支持跨域HTTP请求这种情况,不能解决不同域的两个页面之间如何进行JavaScript调用的问题。
var qsData = {'searchWord':$("#searchWord").attr("value"),'currentUserId':$("#currentUserId").attr("value"),'conditionBean.pageSize':$("#pageSize").attr("value")};$.ajax({ async:false, url: http://跨域的dns/document!searchJSONResult.action, type: "GET", dataType: 'jsonp', jsonp: 'jsoncallback', data: qsData, timeout: 5000, beforeSend: function(){ //jsonp 方式此方法不被触发.原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了 }, success: function (json) {//客户端jquery预先定义好的callback函数,成功获取跨域服务器上的json数据后,会动态执行这个callback函数 if(json.actionErrors.length!=0){ alert(json.actionErrors); } genDynamicContent(qsData,type,json); }, complete: function(XMLHttpRequest, textStatus){ $.unblockUI({ fadeOut: 10 }); }, error: function(xhr){ //jsonp 方式此方法不被触发.原因可能是dataType如果指定为jsonp的话,就已经不是ajax事件了 //请求出错处理 alert("请求出错(请检查相关度网络状况.)"); }});有时也会看到这样的写法:$.getJSON("http://跨域的dns/document!searchJSONResult.action?name1="+value1+"&jsoncallback=?", function(json){ if(json.属性名==值){ // 执行代码 }});
这种方式其实是上例$.ajax({..}) api的一种高级封装,有些$.ajax api底层的参数就被封装而不可见了。
这样,jquery就会拼装成如下的url get请求:
http://跨域的dns/document!searchJSONResult.action?&jsoncallback=jsonp1236827957501&_=1236828192549&searchWord=
%E7%94%A8%E4%BE%8B¤tUserId=5351&conditionBean.pageSize=15
在 响应端(http://跨域的dns/document!searchJSONResult.action),通过 jsoncallback = request.getParameter("jsoncallback") 得到jquery端随后要回调的js function name:jsonp1236827957501 然后 response的内容为一个Script Tags:"jsonp1236827957501("+按请求参数生成的json数组+")"; jquery就会通过回调方法动态加载调用这个js tag:jsonp1236827957501(json数组); 这样就达到了跨域数据交换的目的。
JSONP原理描述
JSONP的最基本的原理是:动态添加一个<script>标签,而script标签的src属性是没有跨域的限制的。这样说来,这种跨域方式其实与ajax XmlHttpRequest协议无关了。
这样其实"jQuery AJAX跨域问题"就成了个伪命题,jquery $.ajax方法名有误导人之嫌。
如 果设为dataType: 'jsonp',这个$.ajax方法就和ajax XmlHttpRequest没什么关系了,取而代之的则是JSONP协议。JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问。
JSONP即JSON with Padding。由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源。如果要进行跨域请求, 我们可以通过使用html的script标记来进行跨域请求,并在响应中返回要执行的script代码,其中可以直接使用JSON传递 javascript对象。 这种跨域的通讯方式称为JSONP。
jsonCallback 函数jsonp1236827957501(....):是浏览器客户端注册的,获取跨域服务器上的json数据后,回调的函数
Jsonp的执行过程如下:
首 先在客户端注册一个callback (如:'jsoncallback'), 然后把callback的名字(如:jsonp1236827957501)传给服务器。注意:服务端得到callback的数值后,要用 jsonp1236827957501(......)把将要输出的json内容包括起来,此时,服务器生成 json 数据才能被客户端正确接收。
然后以 javascript 语法的方式,生成一个function, function 名字就是传递上来的参数 'jsoncallback'的值 jsonp1236827957501 .
最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。
客 户端浏览器,解析script标签,并执行返回的 javascript 文档,此时javascript文档数据,作为参数, 传入到了客户端预先定义好的 callback 函数(如上例中jquery $.ajax()方法封装的的success: function (json))里。
可以说jsonp的方式原理上和<script src="http://跨域/...xx.js"></script>是一致的(qq空间就是大量采用这种方式来实现跨域数据交换 的)。JSONP是一种脚本注入(Script Injection)行为,所以有一定的安全隐患。
那jquery为什么不支持post方式跨域呢?
虽然采用post+动态生成iframe是可以达到post跨域的目的(有位js牛人就是这样把jquery1.2.5 打patch的),但这样做是一个比较极端的方式,不建议采用。
也可以说get方式的跨域是合法的,post方式从安全角度上,被认为是不合法的,万不得已还是不要剑走偏锋。
client端跨域访问的需求看来也引起w3c的注意了,看资料说html5 WebSocket标准支持跨域的数据交换,应该也是一个将来可选的跨域数据交换的解决方案。
转载于:https://www.cnblogs.com/screw/p/5179037.html
JSONP跨域的原理解析及其实现介绍相关推荐
- JSONP跨域的原理解析
JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为"Same-Origin Policy"(同源策略). ...
- .net学习之母版页执行顺序、jsonp跨域请求原理、IsPostBack原理、服务器端控件按钮Button点击时的过程、缓存、IHttpModule 过滤器...
1.WebForm使用母版页后执行的顺序是先执行子页面中的Page_Load,再执行母版页中的Page_Load,请求是先生成母版页的控件树,然后将子页面生成的控件树填充到母版页中,最后输出 2.We ...
- javascript实现jsonp跨域问题+原理
在工作中往往存在跨域的问题 ,跨域是什么概念就不在这里了,搜这类问题的肯定已经知道了.下面直接探讨jsonp跨域原理 jspon跨域原理: 1.动态创建一个script标签 var script = ...
- 深入理解jsonp跨域请求原理
在进行网站开发的过程中经常会用到第三方的数据,但是由于同源策略的限制导致ajax不能发送请求,因此也无法获得数据.解决ajax的跨域问题有两种方法: 一.jsop 二.XMLHttpRequest2中 ...
- jsonp跨域的原理以及优缺点
在开发测试中,难免会在不同域下进行跨域操作,出于安全性考虑,浏览器中的同源策略阻止从一个域上加载的脚本获取或者操作 另一个域下的文档属性,这时需要进行跨域的方式进行解决,如:使用jsonp ,ifra ...
- Ajax--同源策略,jsonp跨域传输原理(callback),
什么是同源策略? 阮一峰的博客 同源策略 同源策略的解决方法: 跨域传输 img 标签的src是可以引入其他域名下的图片 script标签的src属性同理 ,也可以引入其他域名下的js文件,并执行 1 ...
- JSONP 跨域的原理
搜所 JSON相比大家都已经很了解了,那么JSONP又是个什么鬼,JSONP是利用在页面中动态创建script节点的方法向不同域提交HTTP请求的方法称为JSONP,通俗的来说,就是在服务端输出JSO ...
- jsonp 跨域原理详解
转载至:http://zha-zi.iteye.com/blog/1975116 JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制 ...
- jsonp跨域原理及使用
在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的.但是,在页面上引入不同域上的js脚本文件却是可以的,jsonp正是利用这个特性来实现的. jsonp通过script标 ...
最新文章
- matlab的实用与仿真,MATLAB建模与仿真实用教程
- python一维平滑滤波_高斯滤波器的原理及其实现过程(附模板代码)
- linux下调试core的命令
- 快速设置 App 图标 - iOS/Android
- html返回滚动按钮,如何通过滚动显示按钮返回TOP
- 响应式网页设计代码_消除响应式网站建设设计中的缺陷
- 手游行业洞察:Project Makeover成爆款,中国手游出海如何破局
- 三分钟带你掌握 CSS3 的新属性
- ds排序--希尔排序_图解直接插入排序和希尔排序
- dwc_otg驱动 BUG: sleeping function called from invalid context at mm/page_alloc.c
- jQuery 图片裁剪插件 Jcrop
- 2020 ECCV 目标检测冠军
- VS2017离线下载、安装教程
- 自我介绍Linux运维小白,运维面试自我介绍
- 广告行业中那些趣事系列43:小布语音助手知识问答比赛优化实践
- 海森堡与他的矩阵力学分享者
- 怎么判断是显卡不行了还是CPU不行了?
- 哈工大2019计算机专业录取分数线,哈尔滨工业大学2019年录取分数线
- android+好用插件推荐,安卓插件推荐:安卓手机必装插件推荐
- Android-蓝牙通信
热门文章
- 用递归方法对二叉树进行先序、中序和后序遍历
- HoughCircles 函数
- Pytorch预训练模型下载并加载(以VGG为例)自定义路径
- numpy.core.umath failed to import 如何解决
- NOIP2018复赛 游记
- JAVA学习笔记系列4-Eclipse版本选择
- 修改Tomcat可支持get传参方式的url长度,get形式
- Python学习笔记-2017.5.4thon学习笔记-2017.8.14
- Linux 文件大小 文件夹大小 磁盘大小
- 第五十三篇、OC利用AFN上传视频到服务器