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. org.apache.catalina.LifecycleException: Failed to stop component(生命周期异常)

    真是郁闷透顶,以前昨天还可以用,换了myeclipse自带的tomcat就可以用: 异常: org.apache.catalina.LifecycleException: Failed to stop ...

  2. 定义get/set方法快捷方式

    定义get/set方法可以通过鼠标进行完成,这里有一个简单的通过编辑器默认生成getter/setter,编辑器会生成默认生成get/set方法 第一步:右键鼠标,如图所示选择 第二步:点击OK就可以 ...

  3. jQuery实现滚动监听

    1.设计思路 1)获取窗口滚动高度: 2)获取附加导航栏: 3)获取导航栏下的所有li: 4)通过相同class获取所有监听元素:(此例中为jumbotron巨幕) 5)遍历所有监听元素,若当前元素距 ...

  4. 客户端连接linux经常间隔性断开链接【转】

    起因 在使用SecureCRT通过telnet或SSH访问linux时,总是出现过段时间操作就会断开连接提示重连的问题.起初以为是网络不稳定造成的,但我测试发现在服务器端一直可以ping通客户端IP, ...

  5. spring中用到了哪些设计模式

    spring中用到了哪些设计模式?(顺丰) spring中常用的设计模式达到九种,我们举例说明: 第一种:简单工厂 又叫做静态工厂方法(StaticFactory Method)模式,但不属于23种G ...

  6. Django 2.0.1 官方文档翻译:编写你的第一个djang补丁（page 15）

    编写你的第一个djang补丁(page 15) 介绍 有兴趣为社区做一些贡献?可能你发现了django中的一个你想修复的bug,或者你你想添加一个小小的功能. 回馈django就是解决你遇到的问题的最 ...

  7. 一个简单的"RPC框架"代码分析

    0,服务接口定义---Echo.java /* * 定义了服务器提供的服务类型 */ public interface Echo { public String echo(String string) ...

  8. 20155205 2016-2017-2 《Java程序设计》第5周学习总结

    20155205 2016-2017-2 <Java程序设计>第5周学习总结 教材学习内容总结 第八章 如果没有try的话,出现异常会导致程序崩溃,而try则可以保证程序的正常运行下去.( ...

  9. [ZJOI2012]波浪弱化版（带技巧的DP）

    题面 \(solution:\) 这道确实挺难的,情况特别多,而且考场上都没想到如何设置状态.感觉怎么设状态不能很好的表示当前情况并转移,考后发现是对全排列的构造方式不熟而导致的,而这一题的状态也是根 ...

  10. 记录一个PHP安装redis扩展时的问题

    安装过程:https://www.cnblogs.com/pengyunjing/p/8688320.html 由于我之前安装过该扩展,重新安装时没有执行make clean命令,所以安装好出现了下面 ...