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. Linux网络协议栈(一)——Socket入门(2)

    转自: http://www.cnblogs.com/hustcat/archive/2009/09/17/1568765.html 3.套接字的实现套接字最先是在UNIX的BSD版本实现的,所以也叫 ...

  2. [python网络编程]使用scapy修改源IP发送请求

    Python爬虫视频教程零基础小白到scrapy爬虫高手-轻松入门 https://item.taobao.com/item.htm?spm=a1z38n.10677092.0.0.482434a6E ...

  3. python自动化运维之路~DAY5

    python自动化运维之路~DAY5 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.模块的分类 模块,用一砣代码实现了某个功能的代码集合. 类似于函数式编程和面向过程编程,函数 ...

  4. Linux命令之ll

    ll命令 用处:以长格形式列出当前目录下的所有文件,每个文件的长度和创建时间不同. 用法:输入 ll 示例: 前面的一大串字母的意思,第一个要么是d要么是-,d的意思就是目录,-的意思就是文件.其后的 ...

  5. centos6.5环境下安装zk

    第一步:先下载安装包,解压. 第二步:进去根目录,创建data文件夹  mkdir  data 第三步:进去conf文件夹,修改  zoo_sample.cfg    的名字   mv zoo_sam ...

  6. Windows 上安装 Redis 及可能出现的错误和解决方法！

    前言 Redis(REmote Dictionary Server) 是一种以key-value写得存储系统.他是开源的ANSI语言编写的.遵守BSD协议.被称作“数据结构服务器”,因为它的值(val ...

  7. HDU - 4333 Revolving Digits（扩展KMP）

    http://acm.hdu.edu.cn/showproblem.php?pid=4333 题意 一个数字,依次将第一位放到最后一位,问小于本身的数的个数及等于本身的个数和大于本身的个数,但是要注意 ...

  8. 海明码 CRC冗余校验码

    海明码(也叫汉明码)具有一位纠错能力.本文以1010110这个二进制数为例解释海明码的编码和校验方法 确定校验码的位数x 设数据有n位,校验码有x位.则校验码一共有2x种取值方式.其中需要一种取值方式 ...

  9. Python基础(函数部分)-day04

    写在前面 上课第四天,打卡: 加勒比海盗今天上映:端午节公司发的粽子很有范! 一.函数的基本概念 - 函数是什么?  函数,就是一个'锤子',一个具有特定功能的'锤子',使用者可以在适当的时候使用这个 ...

  10. Dom4j工具类源码解析

    话不多说,上源码: package com.changeyd.utils;import java.io.File;import java.io.FileNotFoundException;import ...