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. mysql 之各种 join 之间的关系

    一.了解一下 mysql 中所拥有的各种 join left join(左联接):返回包括左表中的所有记录和右表中联结字段相等的记录  right join(右联接):返回包括右表中的所有记录和左表中 ...

  2. HDU1098---数学

    Ignatius's puzzle Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...

  3. AWT和Swing的关系

    1.AWT和Swing都是java中的包. 2.AWT(Abstract Window Toolkit):抽象窗口工具包,早期编写图形界面应用程序的包,AWT是通过调用操作系统的native方法实现的 ...

  4. 转--python之正则入门

    原文地址 1. 正则表达式基础 1.1. 简单介绍 正则表达式并不是Python的一部分.正则表达式是用于处理字符串的强大工具,拥有自己独特的语法以及一个独立的处理引擎,效率上可能不如str自带的方法 ...

  5. JSON与对象的相互转换

    json是一种轻量级的数据格式,(本质为字符串) 低版本可以使用json2.js插件来解决.下载地址:https://github.com/douglascrockford/JSON-js JSON语 ...

  6. Python面向对象-day07

    写在前面 上课第七天,打卡: 时间的高效利用: 前言: 今天egon老师补充了下 is 和 == 的区别,整理如下:Python中变量的属性以及判断方法 一.面向过程和面向对象 - 1.面向过程 核心 ...

  7. 20155332 2016-2017-2 《Java程序设计》第7周学习总结

    20155332 2016-2017-2 <Java程序设计>第7周学习总结 教材学习内容总结 了解Lambda语法 了解方法引用 了解Fucntional与Stream API 掌握Da ...

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

    学号 2016-2017-2 <Java程序设计>第X周学习总结 教材学习内容总结 1.Java中的所有不正常类都继承于Throwable类.Throwable主要包括两个大类,一个是Er ...

  9. OO第三阶段总结

    软件形式化方法历史 形式化方法的研究高潮始于20世纪60年代后期,针对当时所谓"软件危机",人们提出种种解决方法,归纳起来有两类:一是采用工程方法来组织.管理软件的开发过程:二是深 ...

  10. AQS框架

    java并发包基石 AQS是JUC中很多同步组件的构建基础,简单来讲,它内部实现主要是状态变量state和一个FIFO队列来完成,同步队列的头结点是当前获取到同步状态的结点,获取同步状态state失败 ...