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 相关文章推荐
javascript 对象的定义方法
Jan 10 Javascript
关于include标签导致js路径找不到的问题分析及解决
Jul 09 Javascript
IE6兼容透明背景图片及解决方案
Aug 19 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
Aug 02 Javascript
BootStrap组件之进度条的基本用法
Jan 19 Javascript
jQuery插件zTree实现的多选树效果示例
Mar 08 Javascript
js 数字、字符串、布尔值的转换方法(必看)
Apr 07 Javascript
基于Two.js实现星球环绕动画效果的示例
Nov 06 Javascript
js中如何完美的解析数据
Mar 18 Javascript
微信小程序之swiper轮播图中的图片自适应高度的方法
Apr 23 Javascript
layui从数据库中获取复选框的值并默认选中方法
Aug 15 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
Sep 25 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中register_globals参数为OFF和ON的区别(register_globals 使用详解)
2012/02/05 PHP
php数组删除元素示例
2014/03/21 PHP
PHP使用CURL实现下载文件功能示例
2019/06/03 PHP
laravel 判断查询数据库返回值的例子
2019/10/11 PHP
javascript 函数式编程
2007/08/16 Javascript
JavaScript学习笔记(十)
2010/01/17 Javascript
Extjs gridpanel 出现横向滚动条问题的解决方法
2011/07/04 Javascript
一个简单的Node.js异步操作管理器分享
2014/04/29 Javascript
JavaScript基本语法学习教程
2016/01/14 Javascript
jQuery实现图像旋转动画效果
2016/05/29 Javascript
Javascript json object 与string 相互转换的简单实现
2016/09/27 Javascript
深究AngularJS中ng-drag、ng-drop的用法
2017/06/12 Javascript
微信小程序图片宽100%显示并且不变形
2017/06/21 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
2017/07/24 Javascript
node+express+ejs使用模版引擎做的一个示例demo
2017/09/18 Javascript
浅谈Vue的加载顺序探讨
2017/10/25 Javascript
ES7中利用Await减少回调嵌套的方法详解
2017/11/01 Javascript
ReactNative中使用Redux架构总结
2017/12/15 Javascript
vue单页开发父子组件传值思路详解
2018/05/18 Javascript
原理深度解析Vue的响应式更新比React快
2020/04/04 Javascript
VueJS实现用户管理系统
2020/05/29 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
2020/09/29 Javascript
python标准日志模块logging的使用方法
2013/11/01 Python
pyv8学习python和javascript变量进行交互
2013/12/04 Python
使用Python脚本来获取Cisco设备信息的示例
2015/05/04 Python
Python Matplotlib库入门指南
2015/05/18 Python
Python实现二维有序数组查找的方法
2016/04/27 Python
Python爬虫包BeautifulSoup异常处理(二)
2018/06/17 Python
python3模拟实现xshell远程执行liunx命令的方法
2019/07/12 Python
基于python读取.mat文件并取出信息
2019/12/16 Python
努比亚手机官网:nubia
2016/10/06 全球购物
小米旗下精品生活电商平台:小米有品
2018/12/18 全球购物
写给爸爸的道歉信
2014/01/15 职场文书
新年联欢会主持词
2014/03/27 职场文书
产品包装策划方案
2014/05/18 职场文书
个人委托函范文
2015/01/29 职场文书