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...

3461
来自专栏啸天"s blog

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

2484
来自专栏狂码一生

centos-7绑定静态ip、配置网关、配置DNS、查看网络服务相关信息

一、配置静态IP     >vim /etc/sysconfig/network-scripts/ifcfg-ens33     将 BOOTPROTO=dh...

48213
来自专栏王亚昌的专栏

office系列文档的在线预览解决方案 - 在linux平台下转为pdf

office系列文档包括:.ppt .pptx .doc .docx .xls .xlsx 等常用格式。

2832
来自专栏子勰随笔

iMac(OS X)不可或缺的套件管理器 —— Homebrew

1755
来自专栏较真的前端

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

1865
来自专栏FreeBuf

如何开始对Android应用的逆向分析?

本文是我的关于如何开始Android逆向系列文章的第一部分。在文末提供了一个文档,你可以根据该文档说明部署同我一样的实验环境。

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

Selenium2+python自动化1-最新环境搭建

前言 目前selenium版本已经升级到3.0了,网上的大部分教程是基于2.0写的,所以在学习前先要弄清楚版本号,这点非常重要。本系列依然以selenium2为...

3185
来自专栏区块链

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

XSS攻击是前端技术者最关心的安全漏洞,在OWASP最新公布的2017 常见安全漏洞TOP 10中,XSS又被列入其中。 ? XSS是什么 XSS是跨站脚本攻击...

1916
来自专栏极乐技术社区

小程序搜索组件wxSearch

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

4448

扫码关注云+社区

领取腾讯云代金券