jsonp介绍与jsonp封装

首先说个很多刚接触的人都想问的问题:     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:

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);
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏LIN_ZONE

Nginx负载均衡的5种策略(转载)

本文转自:nginx负载均衡的5种策略(转载) 如需转载请注明出处:https://www.cnblogs.com/zhuchenglin/p/9750970...

1761
来自专栏工科狗和生物喵

《实时控制软件》Git相关操作从注册到Push全教程

此处,我们可以开始建立一个很方便的本地和远程的联系的仓库。 如果你是你是直接clone的老师的库。那么可以准备删除这个本地仓库(不是文件,是git的本地仓库,好...

2936
来自专栏Crossin的编程教室

将打飞机游戏打包成 exe

发现很多朋友在写了 pygame 的打飞机游戏之后,都很想打包成 exe 文件分享给别人玩。但是在打包的过程中,可能遇到一些问题。今天我就来整理一下 pygam...

3866
来自专栏较真的前端

不可忽视的前端安全问题——XSS攻击

1705
来自专栏Youngxj

emlog文章列表页设置new和热门小图标教程

1733
来自专栏流柯技术学院

Win Server 2003 10条小技巧

微软推出Windows Server 2003已经有一段时间了,但是,由于它是一个面向企业用户的服务器操作系统,所以,没有引起更多个人用户的注意。实际上,简单地...

1792
来自专栏啸天"s blog

proxyee-dowm无封号风险的百度云高速下载器

2064
来自专栏从零开始学自动化测试

Appium+python自动化15-Mac上环境搭建

前言 mac上搭建appium+python的环境还是有点复杂的,需要准备的软件 1.nodejs 2.npm 3.cnpm 4.appium 5.pip 6....

2938
来自专栏Laoqi's Linux运维专列

SubversionEdge部署研发团队文档管理

1164
来自专栏极乐技术社区

小程序搜索组件wxSearch

一、功能  支持自定义热门key  支持搜索历史  支持搜索建议  支持搜索历史(记录)缓存  二、使用  1、将wxSearch文件夹整个拷贝到根目录下  2...

3778

扫码关注云+社区