一看就懂:jsonp详解


Posted in Javascript onJune 01, 2015

json相信大家都用的多,jsonp我就一直没有机会用到,但也经常看到,只知道是“用来跨域的”,一直不知道具体是个什么东西。今天总算搞明白了。下面一步步来搞清楚jsonp是个什么玩意。

同源策略

首先基于安全的原因,浏览器是存在同源策略这个机制的,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。看起来不知道什么意思,实践一下就知道了。

1、随便建两个网页

一个端口是2698,一个2701,按照定义它们是不同源的。

一看就懂:jsonp详解

2.用jQuery发起不同源的请求
在2698端口的网页上添加一个按钮,Click事件随便发起两个向端口为2701域的请求。

$("#getOtherDomainThings").click(function () {

    $.get("http://localhost:2701/Scripts/jquery-1.4.4.min.js", function (data) {

        console.log(data)

    })
    $.get("http://localhost:2701/home/index", function (data) {

        console.log(data)

    })

})

根据同源策略,很明显会悲剧了。浏览器会阻止,根本不会发起这个请求。(not allowed by Access-Control-Allow-Origin)

一看就懂:jsonp详解

OK,原来jsonp是要解决这个问题的。

script标签的跨域能力
不知道大家知不知道CDN这个东西,例如微软的CDN,使用它,我们的网页可以不提供jQuery,由微软的网站帮我们提供:

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js" type="text/javascript"></script>

回到我们的2698端口的网页,上面我们在Click事件里有一个对2701端口域的jQuery文件的请求,这次使用script标签来请求。
<script type="text/javascript" src="http://localhost:2701/Scripts/jquery-1.4.4.min.js"></script>

当然,200,OK了

一看就懂:jsonp详解

同样是端口2698的网页发起对2701域的请求,放在script里设置scr属性的OK了,另一个方式就悲剧。利用script的跨域能力,这就是jsonp的基础。

利用script获取不同源的json
既然它叫jsonp,很明显目的还是json,而且是跨域获取。根据上面的分析,很容易想到:利用js构造一个script标签,把json的url赋给script的scr属性,把这个script插入到dom里,让浏览器去获取。实践:

function CreateScript(src) {

    $("<script><//script>").attr("src", src).appendTo("body")

}

添加一个按钮事件来测试一下:
$("#getOtherDomainJson").click(function () {

    $.get('http://localhost:2701/home/somejson', function (data) {

        console.log(data)

    })

})

一看就懂:jsonp详解

首先,第一个浏览器,http://localhost:2701/home/somejson这个Url的确是存在一个json的,而且在 2698网页上用script标签来请求这个2701这个Url也是200OK的,但是最下面报js语法错误了。原来用script标签加载完后,会立即 把响应当js去执行,很明显{"Email":"zhww@outlook.com","Remark":"我来自遥远的东方"}不是合法的js语句。

利用script获取异域的jsonp

显然,把上面的json放到一个回调方法里是最简单的方法。例如,变成这样:

一看就懂:jsonp详解

如果存在jsonpcallback这个方法,那么jsonpcallback({"Email":"zhww@outlook.com","Remark":"我来自遥远的东方"})就是合法的js语句。

由于服务器不知道客户端的回调是什么,不可能hard code成jsonpcallback,所以就带一个QueryString让客户端告诉服务端,回调方法是什么,当然,QueryString的key要遵从服务端的约定,上面的是”callback“。

添加回调函数:

function jsonpcallback(json) {

    console.log(json)

}

把前面的方法稍微改改参数:
$("#getJsonpByHand").click(function () {

    CreateScript("http://localhost:2701/home/somejsonp?callback=jsonpcallback")

})

一看就懂:jsonp详解

200OK,服务器返回jsonpcallback({"Email":"zhww@outlook.com","Remark":"我来自遥远的 东方"}),我们也写了jsonpcallback方法,当然会执行。OK顺利获得了json。没错,到这里就是jsonp的全部。

利用jQuery获取jsonp
上面的方式中,又要插入script标签,又要定义一个回调,略显麻烦,利用jQuery可以直接得到想要的json数据,同样是上面的jsonp:

$("#getJsonpByJquery").click(function () {

    $.ajax({

        url: 'http://localhost:2701/home/somejsonp',

        dataType: "jsonp",

        jsonp: "callback",

        success: function (data) {

            console.log(data)

        }

    })

})

得到的结果跟上面类似。

总结

一句话就是利用script标签绕过同源策略,获得一个类似这样的数据,jsonpcallback是页面存在的回调方法,参数就是想得到的json。

jsonpcallback({"Email":"zhww@outlook.com","Remark":"我来自遥远的东方"})

ADD 原生js:

<button id="btn">click</button>

<script type="text/javascript">

    function $(str){

        return document.getElementById(str)

    }

    function CreateScript(src) {

        var Scrip=document.createElement('script');

        Scrip.src=src;

        document.body.appendChild(Scrip);

    }

    function jsonpcallback(json) {

            console.log(json);//Object { email="中国", email2="中国222"}

    }

    $('btn').onclick=function(){

      CreateScript("http://localhost:51335/somejson?callback=jsonpcallback")    

    }

</script>
Javascript 相关文章推荐
JavaScript中的其他对象
Jan 16 Javascript
js中符号转意问题示例探讨
Aug 19 Javascript
Eclipse下jQuery文件报错出现错误提示红叉
Jan 13 Javascript
js的alert样式如何更改如背景颜色
Jan 22 Javascript
如何设置一定时间内只能发送一次请求
Feb 28 Javascript
js实现div在页面拖动效果
May 04 Javascript
EasyUI修改DateBox和DateTimeBox的默认日期格式示例
Jan 18 Javascript
基于Vue的文字跑马灯组件(npm 组件包)
May 24 Javascript
关于Vue单页面骨架屏实践记录
Dec 13 Javascript
javascript实现视频弹幕效果(两个版本)
Nov 28 Javascript
sharp.js安装过程中遇到的问题总结
Apr 02 Javascript
如何将JavaScript将数组转为树形结构
Jun 02 Javascript
JS数组array元素的添加和删除方法代码实例
Jun 01 #Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
Jun 01 #Javascript
window.onload与$(document).ready()的区别分析
May 30 #Javascript
JQuery给网页更换皮肤的方法
May 30 #Javascript
jQuery实现给页面换肤的方法
May 30 #Javascript
js获取滚动距离的方法
May 30 #Javascript
jquery简单实现外部链接用新窗口打开的方法
May 30 #Javascript
You might like
无数据库的详细域名查询程序PHP版(3)
2006/10/09 PHP
PHP 如何利用phpexcel导入数据库
2013/08/24 PHP
php基于Snoopy解析网页html的方法
2015/07/09 PHP
CI框架整合smarty步骤详解
2016/05/19 PHP
测试你的JS的掌握程度的代码
2009/12/09 Javascript
Javascript 面向对象 对象(Object)
2010/05/13 Javascript
IE之动态添加DOM节点触发window.resize事件
2010/07/27 Javascript
window.location的重写及判断location是否被重写
2014/09/04 Javascript
jQuery中大家不太了解的几个方法
2015/03/04 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
2015/06/19 Javascript
使用JavaScript的AngularJS库编写hello world的方法
2015/06/23 Javascript
jquery使用ul模拟select实现表单美化的方法
2015/08/18 Javascript
AngularJS中的Directive实现延迟加载
2016/01/25 Javascript
JS+HTML5手机开发之滚动和惯性缓动实现方法分析
2016/06/12 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
2017/04/02 jQuery
Node.js dgram模块实现UDP通信示例代码
2017/09/26 Javascript
微信小程序实现预览图片功能
2020/10/22 Javascript
JavaScript代码调试方法实例小结
2019/01/05 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
2019/07/04 Javascript
IE11下处理Promise及Vue的单项数据流问题
2019/07/24 Javascript
JavaScript Array.flat()函数用法解析
2020/09/02 Javascript
[06:38]DOTA2怒掀电竞风暴 2013Chinajoy
2013/07/27 DOTA
python使用nntp读取新闻组内容的方法
2015/05/08 Python
使用 Python 处理3万多条数据只要几秒钟
2020/01/19 Python
使用Python实现微信拍一拍功能的思路代码
2020/07/09 Python
Python读取yaml文件的详细教程
2020/07/21 Python
Superdry极度乾燥官网:日本街头风格,纯英国制造品牌
2016/10/31 全球购物
美国球迷装备的第一来源:FOCO
2020/07/03 全球购物
外语系毕业生找工作的求职信
2013/11/28 职场文书
网络管理员岗位职责
2014/03/17 职场文书
本科生求职信
2014/06/17 职场文书
机关作风建设剖析材料
2014/10/11 职场文书
2014年仓库管理工作总结
2014/12/17 职场文书
火烧圆明园的观后感
2015/06/03 职场文书
Mysql数据库按时间点恢复实战记录
2021/06/30 MySQL
MySQL中datetime时间字段的四舍五入操作
2021/10/05 MySQL