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的服务者都要面对很多服务对象，而这些服务对象各自的本地函数都不相同啊？我们接着往下看。

  $(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);

    }

我是在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)。所以有两次的弹窗。
我现在只不过是在一个项目下进行，其实道理还是一样的。

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

  1. JS JSOP跨域请求实例详解

    JSONP(JSON with Padding)是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题.这篇文章主要介绍了JS JSOP跨域请求实例详解的相关资料,需要的朋友可以参考下 ...

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

    Fiddler是Windows底下最强大的请求代理调试工具,监控任何浏览器的HTTP/HTTPS流量,窜改客户端请求和服务器响应,解密HTTPS Web会话,图4.44为Fiddler原理示意图. 图 ...

  3. 当里个当，免费的HTML5连载来了《HTML5网页开发实例详解》连载（一）

    读懂<HTML5网页开发实例详解>这本书 你还在用Flash嘛?帮主早不用了 乔布斯生前在公开信“Flash之我见”中预言:像HTML 5这样在移动时代中创立的新标准,将会在移动设备上获得 ...

  4. Vue 实例详解与生命周期

    Vue 实例详解与生命周期 Vue 的实例是 Vue 框架的入口,其实也就是前端的 ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进 ...

  5. Spring学习 6- Spring MVC (Spring MVC原理及配置详解)

    百度的面试官问:Web容器,Servlet容器,SpringMVC容器的区别: 我还写了个文章,说明web容器与servlet容器的联系,参考:servlet单实例多线程模式 这个文章有web容器与s ...

  6. 事件驱动模型实例详解（Java篇）

    或许每个软件从业者都有从学习控制台应用程序到学习可视化编程的转变过程,控制台应用程序的优点在于可以方便的练习某个语言的语法和开发习惯(如.net和java),而可视化编程的学习又可以非常方便开发出各类 ...

  7. DeepLearning tutorial（3）MLP多层感知机原理简介+代码详解

    本文介绍多层感知机算法,特别是详细解读其代码实现,基于python theano,代码来自:Multilayer Perceptron,如果你想详细了解多层感知机算法,可以参考:UFLDL教程,或者参 ...

  8. javascript常用经典算法实例详解

    javascript常用经典算法实例详解 这篇文章主要介绍了javascript常用算法,结合实例形式较为详细的分析总结了JavaScript中常见的各种排序算法以及堆.栈.链表等数据结构的相关实现与 ...

  9. python 排序算法总结及实例详解

    python 排序算法总结及实例详解 这篇文章主要介绍了python排序算法总结及实例详解的相关资料,需要的朋友可以参考下 总结了一下常见集中排序的算法 排序算法总结及实例详解"> 归 ...

随机推荐

  1. java基础基础总结----- 常用DOS命令（一）

    常用DOS命令 dir(directory):列出当前目录下的文件以及文件夹 mkdir (make directory) : 创建目录 rd (remove directory): 删除目录 cd ...

  2. PowerDesigner使用（设置继承，实现）

    1.File—New Mode 2添加4个class,1个接口(基本的添加工具都在这里面) 3.class1的设置名字,设置方法 3.设置继承,实现 4.编辑class2,class3继承父类的属性. ...

  3. mac 上sublime3安装编码插件

    我们常常会遇到这样的问题:我们使用 mac 的时候,从 windows 上接受过来的文档通过 sublime3打开之后就是乱码,这个时候需要安装相对应的编码插件才能正常查看. 1. 打开 sublim ...

  4. P3594 [POI2015]WIL-Wilcze doły

    P3594 [POI2015]WIL-Wilcze doły 题目描述 给定一个长度为n的序列,你有一次机会选中一段连续的长度不超过d的区间,将里面所有数字全部修改为0.请找到最长的一段连续区间,使得 ...

  5. Hadoop基础-HDFS集群中大数据开发常用的命令总结

    Hadoop基础-HDFS集群中大数据开发常用的命令总结 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 本盘博客仅仅列出了我们在实际生成环境中常用的hdfs命令,如果想要了解更多, ...

  6. 【JUC】CountDownLatch

    因为在调用端的异步中,需要调用其他多个服务获取数据再汇总结果返回,所以用到了CountDownLatch CountDownLatch的概念 CountDownLatch是一个同步工具类,用来协调多个 ...

  7. matplotlib笔记——legend用法

    rates = [0.01, 0.001, 0.0001] models = {} costs = np.array([[0.7, 0.9, 0.4, 0.6, 0.4, 0.3, 0.2, 0.1] ...

  8. jQuery基础 (一)——样式篇（属性与样式）

    一.操作特性的DOM方法主要有3个 getAttribute方法 setAttribute方法 removeAttribute方法 注意:而在jQuery中用一个attr()与removeAttr() ...

  9. java元注解 @Documented注解使用

    @Documented 注解表明这个注解应该被 javadoc工具记录. 默认情况下,javadoc是不包括注解的. 但如果声明注解时指定了 @Documented,则它会被 javadoc 之类的工 ...

  10. 作业引擎quartz.net --- 监听链

    针对多个作业:如何描述各个跑批任务之间的顺序,紧前.紧后关系,实现灵活调度.例如:A完成则B开始,B完成C开始. 对quartz.net 进行了查阅,能实现如上业务,如下图: 测试代码: using ...