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数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。
如果对于callback参数如何使用还有些模糊的话,我们后面会有具体的实例来讲解。
Jsonp的客户端具体实现
1.先来个最简单的一个。首先我在IIS中建立了两个网站,当然端口一个是888另外一个是8888,我们就把888作为本地服务器,8888作为远程服务器的。
现在本地有这样一个网页

复制代码代码如下:

<html>
    <head>
        <title>index.html</title>
        <script type="text/javascript" src="http://localhost:8888/remote.js" ></script>
    </head>
    <body></body>
</html>

其中JavaScript文件引用的是8888的remote.js文件。

复制代码代码如下:

alert(‘我是远程文件‘);

运行本地服务器网站后效果为

现在最简单的跨域成功了。
2.我们在1的基础上进行修改一下,先看代码

复制代码代码如下:

<html>
    <head>
        <title>index.html</title>
        <script type="text/javascript">
            function aehyok(data)
            {
                alert(data.result);
            }
        </script>
        <script type="text/javascript" src="http://localhost:8888/remote.js" ></script>
    </head>
    <body></body>
</html>

先将本地文件中添加一个js函数,然后调用远程服务器的js文件。

复制代码代码如下:

aehyok({"result":"我是远程js带来的数据"});

这是在远程服务端js文件中的代码。
运行后效果

调用成功。显示本地函数被跨域的远程js调用成功,并且还接收到了远程js带来的数据。很欣喜,跨域远程获取数据的目的基本实现了,但是又一个问题出现了,我怎么让远程js知道它应该调用的本地函数叫什么名字呢?毕竟是jsonp的服务者都要面对很多服务对象,而这些服务对象各自的本地函数都不相同啊?我们接着往下看。

复制代码代码如下:

<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            type: "get",
            async: false,
            url: "../Home/aehyok",
            dataType: "jsonp",
            jsonp: "callback", //传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)
            jsonpCallback: "aehyok", //自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据
            success: function (json) {
                alert("第二次"+json.result);
            },
            error: function () {
                alert(‘fail‘);
            }
        });
    });

function aehyok(data) {
        alert("第一次"+data.result);
    }
</script>

我是在asp.net mvc3.0项目中,所以后台在控制器中

复制代码代码如下:

public string aehyok()
        {
            return "aehyok({\"result\":\"我是远程js带来的数据\"})";
        }

然后执行结果为

通过调试可以发现URLhttp://localhost:6247/Home/aehyok?callback=aehyok&_=1369235398641 
callback=aehyok就是回调函数,在调用完后台返回是先执行aehyok(data)。
然后又执行success(json)。所以有两次的弹窗。
我现在只不过是在一个项目下进行,其实道理还是一样的。

时间: 2024-11-17 02:07:48

jsonp原理和实例详解的相关文章

TCP/IP协议族——ARP、DNS工作原理及实例详解

 测试网络: 通过VMware创建了两个虚拟机,并利用桥接方式联网以此模拟两台主机连接一台路由器的情况.测试网络图如下: ARP协议工作原理 ARP协议能实现任意网络地址到任意物理地址的转换,这里仅讨论IP地址到以太网地址(MAC地址)的转换.其工作原理是:主机向自己所在网络广播一个ARP请求,该请求包含目标机器的网络地址.此网络上的其他机器都将接收到这个请求,但只有被请求的目标机器会回应一个ARP应答,其中包含自己的物理地址. 以太网ARP请求/应答报文 以太网ARP请求/应答报文格式如下

TCP/IP协议族——IP工作原理及实例详解(上)

 IP协议详解 本文主要介绍了IP服务特点,头部结构,IP分片知识,并用tcpdump抓取数据包,来观察IP数据报传送过程中IP的格式,以及分片的过程. IP头部信息:IP头部信息出现在每个IP数据报中,用于指定IP通信的源端IP地址.目的端IP地址,知道IP分片和重组. IP数据报的路由和转发:IP数据报的路由和转发发生在出目标机器之外的所有主机和路由器上.他们决定数据报是否应该转发以及如何转发. IP服务的特点 IP协议是TCP/IP协议族的动力,它为上层协议提供无状态.无连接.不可靠的

tco/iP协议族——IP工作原理及实例详解(下)

 IP协议详解 上一篇文章文章主要介绍了IP服务的特点,IPv4头部结构IP分片,并用tcpdump抓取数据包,来观察IP数据报传送过程中IP的格式,以及分片的过程.本文主要介绍IP路由,IP转发,重定向和IPv6头部结构. IP路由 IP协议的一个核心任务是数据报的路由,即决定发送数据报到目标机器的路径.为了理解IP路由过程,我们先简要分析IP模块的基本流程. IP模块工作流程 从右往左分析上图,它首先对该数据报的头部做CRC校验,确认无误之后就分析其头部的具体信息. 如果该IP数据报的头

当里个当,免费的HTML5连载来了《HTML5网页开发实例详解》连载(一)

读懂<HTML5网页开发实例详解>这本书 你还在用Flash嘛?帮主早不用了 乔布斯生前在公开信<Flash之我见>中预言:像HTML 5这样在移动时代中创立的新标准,将会在移动设备上获得胜利. --国际巨头Google.苹果等都支持HTML 5标准,要不要学,你看着办! BAT三巨头都偷偷用上HTML 5了 HTML 5目前在国内的发展达到了空前的高度,以BAT三大巨头互联网公司为例,他们都已经争先恐后地将HTML 5的新技术融入到现实的开发领域中了.本书的例子会涉及WebQQ.

DeepLearning tutorial(3)MLP多层感知机原理简介+代码详解

DeepLearning tutorial(3)MLP多层感知机原理简介+代码详解 @author:wepon @blog:http://blog.csdn.net/u012162613/article/details/43221829 本文介绍多层感知机算法,特别是详细解读其代码实现,基于python theano,代码来自:Multilayer Perceptron,如果你想详细了解多层感知机算法,可以参考:UFLDL教程,或者参考本文第一部分的算法简介. 经详细注释的代码:放在我的gith

javascript常用经典算法实例详解

javascript常用经典算法实例详解 这篇文章主要介绍了javascript常用算法,结合实例形式较为详细的分析总结了JavaScript中常见的各种排序算法以及堆.栈.链表等数据结构的相关实现与使用技巧,需要的朋友可以参考下 本文实例讲述了javascript常用算法.分享给大家供大家参考,具体如下: 入门级算法-线性查找-时间复杂度O(n)--相当于算法界中的HelloWorld ? 1 2 3 4 5 6 7 8 9 10 //线性搜索(入门HelloWorld) //A为数组,x为要

免费的HTML5连载来了《HTML5网页开发实例详解》连载(五)图解通过Fiddler加速开发

Fiddler是Windows底下最强大的请求代理调试工具,监控任何浏览器的HTTP/HTTPS流量,窜改客户端请求和服务器响应,解密HTTPS Web会话,图4.44为Fiddler原理示意图. 图4.44  Fiddler原理示意图 Fiddler安装的系统要求为Windows XP或Windows 8中的版本,其中Fiddler2依赖于Microsoft.NET Framework 2.0,最新的Fiddler4依赖于Microsoft.NET Framework 4.0. Fiddler

《HTML 5网页开发实例详解》样章、内容简介、前言

http://spu.jd.com/1167757597.html http://product.dangdang.com/23484942.html 样章 http://download.csdn.net/download/hdzn0603/7421803 内容简介 <HTML 5网页开发实例详解>从实际的应用场景出发,结合当下的热门技术,深入浅出地介绍了 HTML 5所包含的各项新技术.本书分为 14章.第 1~4章介绍了 HTML 5和浏览器的发展史. HTML 5新特性的使用,最新的前

事件驱动模型实例详解(Java篇)

或许每个软件从业者都有从学习控制台应用程序到学习可视化编程的转变过程,控制台应用程序的优点在于可以方便的练习某个语言的语法和开发习惯(如.net和java),而可视化编程的学习又可以非常方便开发出各类人机对话界面(HMI).可视化编程或许是一个初学者开始对软件感兴趣的开始,也可能是一个软件学习的里程碑点,因为我们可以使用各类软件集成开发环境(IDE)方便的在现成的界面窗口上拖放各类组件(Component),这类组件包括我们常见的按钮(Button),单选按钮(Radio Button),复选框