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 相关文章推荐
js日历功能对象
Jan 12 Javascript
基于mootools插件实现遮罩层新手引导
May 24 Javascript
JS 精确统计网站访问量的实例代码
Jul 05 Javascript
利用了jquery的ajax实现二级联互动菜单
Dec 02 Javascript
node.js超时timeout详解
Nov 26 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
Jun 14 Javascript
详解js几个绕不开的事件兼容写法
Aug 30 Javascript
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
vue实现条件判断动态绑定样式的方法
Sep 29 Javascript
使用vue实现通过变量动态拼接url
Jul 22 Javascript
如何基于jQuery实现五角星评分
Sep 02 jQuery
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
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笔记之常用文件操作
2010/10/12 PHP
php中常用的预定义变量小结
2012/05/09 PHP
PHP之APC缓存详细介绍 apc模块安装
2014/01/13 PHP
PHP抽奖算法程序代码分享
2015/10/08 PHP
php开发工具有哪五款
2015/11/09 PHP
理解Javascript_03_javascript全局观
2010/10/11 Javascript
JS上传前预览图片实例
2013/03/25 Javascript
将两个div左右并列显示并实现点击标题切换内容
2013/10/22 Javascript
js onclick事件传参讲解
2013/11/06 Javascript
javascript操作数组详解
2014/12/17 Javascript
AngularJS 入门教程之事件处理器详解
2016/08/19 Javascript
详解Nodejs内存治理
2018/05/13 NodeJs
微信小程序分享功能之按钮button 边框隐藏和点击隐藏
2018/06/14 Javascript
jQuery访问json文件中数据的方法示例
2019/01/28 jQuery
websocket4.0+typescript 实现热更新的方法
2019/08/14 Javascript
微信小程序通过js实现瀑布流布局详解
2019/08/28 Javascript
node后端服务保活的实现
2019/11/10 Javascript
jQuery擦除插件eraser使用方法详解
2020/01/11 jQuery
Python实现的一个简单LRU cache
2014/09/26 Python
在Django框架中伪造捕捉到的URLconf值的方法
2015/07/18 Python
Python中time模块和datetime模块的用法示例
2016/02/28 Python
python利用datetime模块计算程序运行时间问题
2020/02/20 Python
用canvas显示验证码的实现
2020/04/10 HTML / CSS
windeln官方海外旗舰店:德淘超人气母婴超市
2017/12/15 全球购物
土耳其玩具商店:Toyzz Shop
2019/08/02 全球购物
美国排名第一的泳池用品直接来源:In The Swim
2019/09/23 全球购物
海量信息软件测试笔试题
2015/08/08 面试题
拓展策划方案
2014/06/03 职场文书
大学活动总结模板
2014/07/10 职场文书
个人整改方案范文
2014/10/25 职场文书
2014年社区个人工作总结
2014/12/02 职场文书
行政司机岗位职责
2015/04/10 职场文书
离婚案件被告代理词
2015/05/23 职场文书
关于开学的感想
2015/08/10 职场文书
小学中队委竞选稿
2015/11/20 职场文书
笔记本自带的win11如何跳过联网激活?
2022/04/20 数码科技