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 相关文章推荐
一实用的实现table排序的Javascript类库
Sep 12 Javascript
JS简单循环遍历json数组的方法
Apr 22 Javascript
JS动态生成年份和月份实例代码
Feb 04 Javascript
JS查找英文文章中出现频率最高的单词
Mar 20 Javascript
原生js实现淘宝放大镜效果
Oct 28 Javascript
jQuery实现数字自动增加或者减少的动画效果示例
Dec 11 jQuery
vue登录注册实例详解
Sep 14 Javascript
vue-element-admin 菜单标签失效的解决方式
Nov 12 Javascript
js中forEach,for in,for of循环的用法示例小结
Mar 14 Javascript
JS 数组和对象的深拷贝操作示例
Jun 06 Javascript
Vue为什么要谨慎使用$attrs与$listeners
Aug 27 Javascript
jQuery实现广告显示和隐藏动画
Jul 04 jQuery
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版
2012/04/20 PHP
php实现mysql事务处理的方法
2014/12/25 PHP
jQuery数组处理方法汇总
2011/06/20 Javascript
页面只能打开一次Cooike如何实现
2012/12/04 Javascript
表格单元格交错着色实现思路及代码
2013/04/01 Javascript
jQuery中change事件用法实例
2014/12/26 Javascript
JavaScript原型及原型链终极详解
2016/01/04 Javascript
自学实现angularjs依赖注入
2016/12/20 Javascript
微信小程序动态的加载数据实例代码
2017/04/14 Javascript
vue解决一个方法同时发送多个请求的问题
2018/09/25 Javascript
微信小程序身份证验证方法实现详解
2019/06/28 Javascript
详解vue 命名视图
2019/08/14 Javascript
a标签调用js的方法总结
2019/09/05 Javascript
javascript实现商品图片放大镜
2019/11/28 Javascript
vue路由缓存的几种实现方式小结
2020/02/02 Javascript
JS如何生成随机验证码
2020/03/02 Javascript
vue-router 路由传参用法实例分析
2020/03/06 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
2020/08/24 Javascript
微信小程序实现下拉加载更多商品
2020/12/29 Javascript
全面解读Python Web开发框架Django
2014/06/30 Python
简单讲解Python中的字符串与字符串的输入输出
2016/03/13 Python
Python3实现将本地JSON大数据文件写入MySQL数据库的方法
2018/06/13 Python
Python的高阶函数用法实例分析
2019/04/11 Python
Python对ElasticSearch获取数据及操作
2019/04/24 Python
Python一键查找iOS项目中未使用的图片、音频、视频资源
2019/08/12 Python
Python3 requests文件下载 期间显示文件信息和下载进度代码实例
2019/08/16 Python
Python使用百度api做人脸对比的方法
2019/08/28 Python
python实现滑雪游戏
2020/02/22 Python
阿迪达斯中国官网:Adidas中国
2020/12/14 全球购物
thinkphp5 redis缓存新增方法实例讲解
2021/03/24 PHP
企业给企业的表扬信
2014/01/13 职场文书
董事长助理岗位职责
2014/02/18 职场文书
五星级酒店前台接待岗位职责
2015/04/02 职场文书
导游词之镇江焦山
2019/11/21 职场文书
励志语录:时光飞逝,请学会珍惜所有的人和事
2020/01/16 职场文书
Python移位密码、仿射变换解密实例代码
2021/06/27 Python