前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >jsonp介绍与jsonp封装

jsonp介绍与jsonp封装

作者头像
游魂
发布2018-06-08 16:55:45
2.2K0
发布2018-06-08 16:55:45
举报
文章被收录于专栏:前端开发前端开发
点击查看原图
点击查看原图
首先说个很多刚接触的人都想问的问题:     jsonp到底是什么? (看完本篇文章你就知道了)

1、一个众所周知的问题,Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面、动态网页、web服务、WCF,只要是跨域请求,一律不准;

2、不过我们又发现,Web页面上调用js文件时则不受是否跨域的影响(不仅如此,我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力,比如<script>、<img>、<iframe>);

3、于是可以判断,当前阶段如果想通过纯web端(ActiveX控件、服务端代理、属于未来的HTML5之Websocket等方式不算)跨域访问数据就只有一种可能,那就是在远程服务器上设法把数据装进js格式的文件里,供客户端调用和进一步处理;

4、恰巧我们已经知道有一种叫做JSON的纯字符数据格式可以简洁的描述复杂数据,更妙的是JSON还被js原生支持,所以在客户端几乎可以随心所欲的处理这种格式的数据;

5、这样子解决方案就呼之欲出了,web客户端通过与调用脚本一模一样的方式,来调用跨域服务器上动态生成的js格式文件(一般以JSON为后缀),显而易见,服务器之所以要动态生成JSON文件,目的就在于把客户端需要的数据装入进去。

6、客户端在对JSON文件调用成功之后,也就获得了自己所需的数据,剩下的就是按照自己需求进行处理和展现了,这种获取远程数据的方式看起来非常像AJAX,但其实并不一样。

7、为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。


Jsonp原理:

首先在客户端注册一个callback, 然后把callback的名字传给服务器。

此时,服务器先生成 json 数据。

然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 jsonp.

最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。

客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时数据作为参数,传入到了客户端预先定义好的 callback 函数里.(动态执行回调函数)


封装jsonp:

代码语言:javascript
复制
function jsonp( url, fn ){
    //构造一个函数到window上
    var fnName="__jsonpFn"+Math.random().toString().replace(".","");
    //创建script标签
    var script=document.createElement("script"),
    //获得页面中的head标签
        head=document.head;
    //设置script标签请求的src,记得带有参数
    script.src=url + "?callback=" + fnName;
    //先绑定函数,再请求更加安全
    window[fnName]=function( data ){ //发回数据调用的内容
        fn(data);  //用户写的函数

        //删除函数,删除内容

        delete window[fnName];
        head.removeChild( script );
    };

    //将script标签加到页面中,浏览器就会自动的请求下载js格式的字符串
    head.appendChild(script);
}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017-9-26 1,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 首先说个很多刚接触的人都想问的问题:     jsonp到底是什么? (看完本篇文章你就知道了)
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档