假设我们已经了解什么是同源策略，以及什么是浏览器的同源策略的限制。

现在我们需要在a.demo.com下的某个页面one.html 里加载不同域b.demo.com下的json数据。

我们都知道用<script>或者<img>标签的src属性是可以跨域从某个站点加载数据的，jsonp就是根据这个原理来实现。

我们同样也知道，当浏览器加载完<script>标签的内容之后，它会立即执行。所以为了不让浏览器报错，这些内容应该是一些变量的定义或者是函数的调用之类的东西。

但是，我们要使用这些数据，所以如果这些内容是变量的定义的话，那么我们将使用不了（你可以试下）。所以，我们要将这些数据包装在一个函数调用里面，让它作为这个函数调用的参数。

比如像下面这个样子：

jsonCallBack({"email":"123456789@qq.com"})

那么我们要在one.html里面怎么应用这个来自b.demo.com的数据呢？

讲完了理论，来实战。

首先，我们建立一个页面叫做jsonp-one.html，

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

    <button id="getData"> click me to get data</button>

    <script>

        window.onload = function(){

            var btn = document.getElementById('getData');

            var handle = function(){

               var scriptEle = document.createElement('script');

               scriptEle.src = 'http://localhost:8080/jsonData.json?callback=jsonCallBack';

               document.getElementsByTagName('body')[0].appendChild(scriptEle);

            };

            btn.addEventListener('click',handle,false);

        }

        var jsonCallBack = function(data){

            console.dir(data);

        }

    </script>

</body>

</html>

我使用webstorm自带的浏览器查看功能，所以当我打开时，他的地址栏是这样的：http://localhost:63342/javascript/test/jsonp-one.html

主机地址是localhost，端口号63342。

可以看到，代码里当点击按钮的时候，会新建一个script标签，然后设置它的src为我们所需要的数据来源的地址，最后加上?callback=jsonCallBack 。这样子数据文件就可以被加载到。最后我们将这个script插入到body里面。

图为还未点击按钮之前的页面以及控制台。

然后我们新建一个文件，叫做jsonData.json，名字不重要，只要和jsonp-one.html里面的一致即可，重要的是里面的内容：

jsonCallBack({"email":"123456789@qq.com"})

这里的数据其实是调用一个函数，函数名jsonCallBack，参数是我们真正要传给jsonp-one.html页面的数据。

现在我们另起一个服务，正如上面的代码所示，

http://localhost:8080/jsonData.json?callback=jsonCallBack

通过这个地址可以访问到刚才jsonData.json的内容。图为jsonData.json的内容：

然后我们可以看到，在jsonp-one.html里面，我们定义一个函数jsonCallBack，这样的话，当我们加载完来自8080端口的数据时，便能够立即调用这个函数，因为这个函数我们在这里已经定义过了，所以不会报错，能够正常执行。至于我们要用这些数据来干什么，那就是你自己在jsonCallBack这个函数里面要做的事情了。

当我们点击按钮时，我们可以看到浏览器的network以及控制台的输出：

控制台：

可以看到，数据正确加载了。

就这样，实现了使用jsonp技术，将数据从端口8080的这个域，传到端口63342的这个域。

jsonp的使用的更多相关文章

  1. 实例操作JSONP原理

    絮语:按这个步骤走,你就会明白JSONP是什么鬼. 1.工程目录: ng-mywork demo.html test.js 2.nginx的server配置 server { listen ; ser ...

  2. angular2系列教程（九）Jsonp、URLSearchParams、中断选择数据流

    大家好,今天我们要讲的是http模块的第二部分,主要学习ng2中Jsonp.URLSearchParams.observable中断选择数据流的用法. 例子

  3. 疯狂的JSONP

    何为跨域?何为JSONP?JSONP技术能实现什么?是否有必要使用JSONP技术? 跨域 就是由于JavaScript同源策略的限制,使得a.com域名下的js无法操作b.com或c.a.com域名下 ...

  4. 通过扩展让ASP.NET Web API支持JSONP

    同源策略(Same Origin Policy)的存在导致了"源"自A的脚本只能操作"同源"页面的DOM,"跨源"操作来源于B的页面将会被拒 ...

  5. 跨域的jsonP

    1.出现原因:因为web中的同源策略(域名,协议,端口号)限制了跨域访问.   2.区别于json (个人理解)json是数据交换格式,jsonp是数据通信中的交互方式   3.jsonp的get与p ...

  6. ASP.NET Web API 配置 JSONP

    之前的一篇博文:jsonp跨域+ashx(示例) 1. 安装 Jsonp 程序集: PM> Install-Package WebApiContrib.Formatting.Jsonp PM&g ...

  7. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

  8. 跨域之jsonp

    我们都知道使用<script>标签可以引入外部的JS文件,即使这个JS文件来自于其他的网站,比如我们引用存放在网络服务器上的jQuery框架.在这个过程中,我们已经实现跨域访问.像< ...

  9. 由浅入深学习ajax跨域(JSONP)问题

    什么是跨域?说直白点就是获取别人网站上的内容.但这么说貌似又有点混淆,因为通常我们用ajax+php就可以获取别人网站的内容,来看下面这个例子. 来看看跨域的例子,jquery+ajax是不能跨域请求 ...

  10. JSONP的诞生、原理及应用实例

    问题: 页面中有一个按钮,点击之后会更新网页中的一个盒子的内容. Ajax可以很容易的满足这种无须刷新整个页面就可以实现数据变换的需求. 但是,Ajax有一个缺点,就是他不允许跨域请求资源. 如果我的 ...

随机推荐

  1. grunt 入门学习

    前端工作流,Grunt上手指南 Posted@2013-04-20 7:15 a.m. CategoriesGrunt ,  javascript 我想先花点时间回忆一下作为一个前端需要做的工作(Lo ...

  2. 【MongoDB for Java】Java操作MongoDB

    上一篇文章: http://www.cnblogs.com/hoojo/archive/2011/06/01/2066426.html介绍到了在MongoDB的控制台完成MongoDB的数据操作,通过 ...

  3. 夺命雷公狗----Git---2---基本用法

    首先我们来创建一个git仓库,其实命令也是很简单的.. git init 其实在创建完成后,该目录会多了一个.git的文件夹,但该文件夹是隐藏的.... 其实这就是一个git仓库,特别建议不要在这个目 ...

  4. 坑爹的 SONY AS100V GPS

    事情是这样的,为了记录自己的生活,也是出于对视频编辑的兴趣,买了一台 SONY 的 AS100V 运动摄像机. 公司到货,回家路上拍了一段,回家兴冲冲的连上电脑,想看看 GPS 数据,发现是 SONY ...

  5. MooseFS

    http://www.moosefs.org/

  6. python 编辑文件时路径问题解决方法：文件或者目录不存在、文件编辑后无法保存等（以编辑xml文件为例）

    1.获取工程所在根路径:根路径=os.path.dirname(os.path.abspath('__file__')) 2.将获取的根路径和相对路径组合:组合路径=os.path.join(根路径, ...

  7. asp.net MVC 过滤器使用案例：统一处理异常顺道精简代码

    重构的乐趣在于精简代码,模块化设计,解耦功能……而对异常处理的重构则刚好满足上述三个方面,下面是我的一点小心得. 一.相关的学习 在文章<精简自己20%的代码>中,讨论了异常的统一处理,并 ...

  8. Centos7上启动vpn客户端失败问题处理

    在某台云主机上(Centos7)搭建vpn客户端,发现一直启动失败,检查了下日志,报错如下: Sat Jan :: WARNING: Your certificate is not yet valid ...

  9. JAVA泛型详解2 转载

    转载地址:http://www.cnblogs.com/sunwei2012/archive/2010/10/08/1845938.html 普通泛型 class Point<T>{ // ...

  10. Linux:-拷贝或传送文件的技巧

    <---拷贝目录如何做到排除文件?常用命令cp,用法比较LOW---> tar -cf - ./* --exclude="nohup.out" | (cd /opt/ ...