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脚本函数库 方便开发
Oct 13 Javascript
js focus不起作用的解决方法(主要是因为dom元素是否加载完成)
Nov 05 Javascript
Js 弹出框口并返回值的两种常用方法
Dec 30 Javascript
node.js中的events.emitter.listeners方法使用说明
Dec 10 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
Mar 09 Javascript
jquery实现二级导航下拉菜单效果
Dec 18 Javascript
angularjs封装$http为factory的方法
May 18 Javascript
最基础的vue.js双向绑定操作
Aug 23 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
May 01 Javascript
微信小程序实现登录注册tab切换效果
Dec 29 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
Jul 27 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
Oct 09 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
Zerg建筑一览
2020/03/14 星际争霸
PHP 图片文件上传实现代码
2010/12/29 PHP
PHP中使用crypt()实现用户身份验证的代码
2012/09/05 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
php封装实现钉钉机器人报警接口的示例代码
2020/08/08 PHP
JavaScript 密码强度判断代码
2009/09/05 Javascript
基于Jquery的实现回车键Enter切换焦点
2010/09/14 Javascript
js对数字的格式化使用说明
2011/01/12 Javascript
8个超棒的学习 jQuery 的网站 推荐收藏
2011/04/02 Javascript
使用原生javascript创建通用表单验证——更锋利的使用dom对象
2011/09/13 Javascript
Google (Local) Search API的简单使用介绍
2013/11/28 Javascript
jQuery打印指定区域Html页面并自动分页
2014/07/04 Javascript
jQuery获取页面元素绝对与相对位置的方法
2015/06/10 Javascript
JavaScript清空数组元素的两种方法简单比较
2015/07/10 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记6)
2015/12/20 Javascript
jquery 一键复制到剪切板的实例
2017/09/20 jQuery
Vue3 中的数据侦测的实现
2019/10/09 Javascript
解决ele ui 表格表头太长问题的实现
2019/11/13 Javascript
js里面的变量范围分享
2020/07/18 Javascript
python多线程方式执行多个bat代码
2016/06/07 Python
Python实现判断一个字符串是否包含子串的方法总结
2017/11/21 Python
python3+PyQt5重新实现自定义数据拖放处理
2018/04/19 Python
对python读取CT医学图像的实例详解
2019/01/24 Python
Python使用lambda表达式对字典排序操作示例
2019/07/25 Python
python实现图片压缩代码实例
2019/08/12 Python
Tensorflow 1.0之后模型文件、权重数值的读取方式
2020/02/12 Python
python线程池如何使用
2020/05/28 Python
关于Kotlin中SAM转换的那些事
2020/09/15 Python
Python+Selenium随机生成手机验证码并检查页面上是否弹出重复手机号码提示框
2020/09/21 Python
Html5移动端获奖无缝滚动动画实现示例
2018/06/25 HTML / CSS
Canvas制作的下雨动画的示例
2018/03/06 HTML / CSS
Skyscanner波兰:廉价航班
2017/11/07 全球购物
自主招生自荐信范文
2013/12/04 职场文书
公司经理聘任书
2014/03/29 职场文书
2014年幼师工作总结
2014/11/22 职场文书
纪委立案决定书
2015/06/24 职场文书