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 条评论
登录 后参与评论

相关文章

来自专栏抠抠空间

babel简介

1560
来自专栏https://www.cnblogs.com/L

Nginx篇--解读nginx配置

之前讲解了Nginx的源码安装与加载到系统服务中去,http://www.cnblogs.com/LHWorldBlog/p/8298226.html 今天详细...

1013
来自专栏lonelydawn的前端猿区

php绘制图片验证码

验证码是一种安全保护机制,在注册时要求必须有人工操作进行验证,用于防止垃圾注册机大量注册用户账号占用服务器内存从而使服务器瘫痪。 图片验证码的实现十分简单。首先...

2445
来自专栏张善友的专栏

WCF 消息帧格式

在TCP/IP协议栈中,当数据通过协议栈向下流动时,每一层都要给数据增加控制信息用于确保正确的传递。控制信息放置在被传送数据的开始,称之为包头,这种在协议栈中每...

1778
来自专栏cloudskyme

设计模式(5)-己所不欲,施之于人(代理模式)

什么是代理?在我们的日常生活中的例子非常多。 比如上网有的时候使用代理服务器,通过代理上网,这就是代理的一个非常常见的例子。 从这里边可以看到3个对象:真实网路...

3214
来自专栏蓝天

进程间传递文件描述符fd

众所周知,子进程会继承父进程已经打开的文件描述符fd,但是fork之后的是不会被继承的,这个时候是否无能无力了?答应是NO。Linux提供了一个系统调用se...

672
来自专栏程序员的碎碎念

ThinkPHP基础知识(二)

今天闲来无事,继续来看我们的tp下一个教程(勉强叫做这个吧)。看前面的博客文章我们知道: ? 那么,我们怎么创建控制器和方法呢? 一、创建控制器和方法 创建控制...

3496
来自专栏大内老A

使命必达: 深入剖析WCF的可靠会话[原理揭秘篇](上)

本系列先后通过《实例篇》、《概念篇》、《协议篇》和《编程篇》对WCF的可靠会话进行了详细探讨。作为本系列的最后一片,我们将深入到WCF的可靠会话体系的最底层,对...

2137
来自专栏Jack-Cui

Caffe学习笔记(二):使用Python生成caffe所需的lmdb文件和txt列表清单文件

Python版本:Python2.7 运行平台:Ubuntu14.04 最后修改时间:2017.4.20     在上个笔记中,已经学会了如何使用Ca...

4028
来自专栏技术沉淀

命令行工具:文件初探

1093

扫码关注云+社区