JS JSOP跨域请求实例详解


Posted in Javascript onJuly 04, 2016

在项目开发中遇到跨域的问题,一般都是通过JSONP来解决的。但是JSONP到底是个什么东西呢,实现的原理又是什么呢。在项目的空闲时间可以好好的来研究一下了。

1、什么是JSONP?

要了解JSONP,不得不提一下JSON,那么什么是JSON?

JSON is a subset of the object literal notation of JavaScript. Since JSON is a subset of JavaScript, it can be used in the language with no muss or fuss.

JSONP(JSON with Padding)是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。

2、JSONP有什么用?

由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源,为了实现跨域请求,可以通过script标签实现跨域请求,然后在服务端输出JSON数据并执行回调函数,从而解决了跨域的数据请求。

JSONP的产生

1.众所周知,Ajax请求资源受同域的限制,不管是静态资源,动态页面,web服务都不行

2.同时我们发现web页面上调用JS文件时则不受跨域的影响(不仅如此,我们还发现凡是拥有‘src'这个属性的标签都拥有跨域的能力,比如<script>、<img>、<iframe>等)

3.可想而知,当前阶段如果想通过web端(ActiveX控件、服务器代理、HTML5的websocket等方式不算)跨域访问数据就只有一种可能,那就是服务端把数据装进JS格式的文件里,供客户端调用和处理

4.数据的传输,我们知道一种叫JSON的纯字符数据格式可以简洁的描述复杂的数据结构,而且还被JS原生支持,在客户端可以很容易的处理这种格式的数据

5.这样解决方案的一目了然了,web端通过和调用脚本一模一样的方式,来调用跨域服务器上动态生成的JS文件。服务器之所以要动态生成JS文件,目的在于获取客户端的回调函数名并把客户端需要的数据通过JSON(也可以是纯字符串)的格式传进去

6.在客户端对JS文件调用成功后,也就获取到了回调函数里的参数,剩下的就是对数据的处理了,这种方法和Ajax看起来很像,但是却并不一样(Jquery将JSONP和Ajax封装在一起,如果不了解的人会混为一谈)

7.为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了

好了,不知道大家对JSONP理解了没有,如果没有的话,鄙人就出来总结一下,说的不好,不要打我。

其实原理就是,客户端请求一个链接,并把需要的参数加上,callback表示是一个JSONP的请求(这个前端和后台可以自己统一),后台解析这个请求链接,发现是一个JSONP的请求,然后生成一个调用方法,并根据请求参数动态生成一个字符串(可以是JSON,也可以是纯字符串)塞进调用方法里,这样客户端就可以那到数据并做后续的处理了。

说了这么多,不上代码不是我的风格啊,上代码。。

function test(data){
console.log(data)
}
var url="http://www.x.com/test?a=1&callback=test"//向x.com/test传递参数a值为1,并告诉他要调用的函数名是“test”
//后台拦截到callback,知道要生成一个调用方法,方法名是test,并传递参数,后台处理生成如下(数据虚构)
test("aaaaaa")
test({a:1,b:2})
//然后前端通过script标签去访问并执行,上面的东西
var script = document.createElement('script');
script.setAttribute('src', url);
// 把script标签加入head,此时调用开始
document.getElementsByTagName('head')[0].appendChild(script); 
//然后就会调用页面的test方法,这就是jsonp的实现原理。

关于Jquery中JSONP的现实

$.ajax({
type: "GET",
url: "http://x.d.cn/asych/adv.html?loc=8&callBack=?",//告诉后台这是一个jsonp请求,需要调用什么方法,如果为“?”,jq会帮你自动生成(如果使用jq一般都设置为“?”,这样才能在成功时触发jq的回调函数)
type:"post",//jsonp只能发get请求,就算我设置请求类型为post
dataType:"jsonp",//告诉jquery这是一个jsonp的数据,需要生成script标签来加载js
data:{
a:"1"
},
/*success: function (data) {//成功后jq会执行的方法(如果callback参数为“?”)
$("body").append(data);
},*/
error: function (XMLHttpRequest, textStatus, errorThrown) {
//alert(errorThrown);
}
}).done(function(data){
$("body").append(data);
});

看了上面的代码和注释,相信大家都明白了吧,虽然Jquery将JSONP封装到Ajax中,但是本质上是不同的。

Ajax的核心是通过XmlHttpRequest获取非本页内容,而JSONP的核心则是动态添加<script>标签来调用服务器提供的js脚本。

所以Ajax和JSONP的区别不在于是否跨域,Ajax通过服务端代理一样可以实现跨域,JSONP本身也不排斥同域数据的获取。

还有上面说到过,JSONP和Ajax的数据格式不一定要是JSON,也可以是纯字符串。

总而言之,JSONP不是Ajax的一个子集,即使Jquery将JSONP封装进Ajax,也不能改变这一点。

以上所述是小编给大家介绍的JS JSOP跨域请求实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Extjs改变树节点的勾选状态点击按钮将复选框去掉
Nov 14 Javascript
什么是cookie?js手动创建和存储cookie
May 27 Javascript
jQuery实现文件上传进度条特效
Aug 12 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
Mar 24 Javascript
DOM中事件处理概览与原理的全面解析
Aug 16 Javascript
webstorm添加vue.js支持的方法教程
Jul 05 Javascript
JS中利用FileReader实现上传图片前本地预览功能
Mar 02 Javascript
vue最简单的前后端交互示例详解
Oct 11 Javascript
Next.js实现react服务器端渲染的方法示例
Jan 06 Javascript
JS实现电话号码的字母组合算法示例
Feb 26 Javascript
微信小程序实现单列下拉菜单效果
Apr 25 Javascript
使用webpack搭建vue环境的教程详解
Dec 31 Javascript
json格式的javascript对象用法分析
Jul 04 #Javascript
jQuery简单动画变换效果实例分析
Jul 04 #Javascript
Node.js Streams文件读写操作详解
Jul 04 #Javascript
jQuery文字提示与图片提示效果实现方法
Jul 04 #Javascript
jQuery实现的导航下拉菜单效果
Jul 04 #Javascript
表单中单选框添加选项和移除选项
Jul 04 #Javascript
jQuery实现简单倒计时功能的方法
Jul 04 #Javascript
You might like
探讨PHP调用时间格式的参数详解
2013/06/06 PHP
PHP实现的MongoDB数据库操作类分享
2014/05/12 PHP
php实现按指定大小等比缩放生成上传图片缩略图的方法
2014/12/15 PHP
php查看网页源代码的方法
2015/03/13 PHP
PHP实现简单汉字验证码
2015/07/28 PHP
PHP时间类完整实例(非常实用)
2015/12/25 PHP
laravel多条件查询方法(and,or嵌套查询)
2019/10/09 PHP
用JS剩余字数计算的代码
2008/07/03 Javascript
jQuery实现的类flash菜单效果代码
2010/05/17 Javascript
jQuery .tmpl() 用法示例介绍
2014/08/21 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
2016/11/01 Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
2017/07/24 Javascript
微信小程序 自定义消息提示框
2017/08/06 Javascript
简单易扩展可控性强的Jquery转盘抽奖程序
2019/03/16 jQuery
浅谈vue加载优化策略
2019/03/19 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
2019/06/17 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
2020/02/19 Javascript
如何优雅地取消 JavaScript 异步任务
2020/03/22 Javascript
JavaScript 链表定义与使用方法示例
2020/04/28 Javascript
jQuery实现手风琴特效
2021/01/11 jQuery
[50:38]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第二场 3月7日
2021/03/11 DOTA
用Python实现命令行闹钟脚本实例
2016/09/05 Python
Python3.4学习笔记之类型判断,异常处理,终止程序操作小结
2019/03/01 Python
快速排序的四种python实现(推荐)
2019/04/03 Python
python实现拼接图片
2020/03/23 Python
利用CSS3实现炫酷的飞机起飞动画
2016/09/17 HTML / CSS
CSS3实现点击放大的动画实例代码
2017/02/27 HTML / CSS
全球地下的服装和态度:Slam Jam
2018/02/04 全球购物
美国传奇滑手Paul Rodriguez创办的街头滑板品牌:Primitive Skateboarding
2019/10/29 全球购物
工作表现自我评价
2014/02/08 职场文书
高中运动会入场词
2014/02/14 职场文书
标准的毕业生自荐信
2014/04/20 职场文书
超市七夕促销活动方案
2014/08/28 职场文书
幼儿园辞职书
2015/02/26 职场文书
公司前台接待岗位职责
2015/04/03 职场文书
写作技巧:如何撰写商业计划书
2019/08/08 职场文书