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

现在我们需要在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. spring4 离线doc和api(自制)

    spring mvc api 文档(英文版) 链接: https://pan.baidu.com/s/1c25Ml4 密码: ufb9 spring MVC 学习文档(英文版) 链接: https:/ ...

  2. iis部署文件支持svg

    今测试的一个asp网站代码,在本地一切正常,可是上传到服务器上之后就发现一些图标不显示了.图片在文件路径存在,但是访问不了,经查询.svg的图片想要在iis(iis7支持)上能正常打开,还需要做一下映 ...

  3. Android 回调接口是啥，回调机制详解(zhuan)

    回调函数http://blog.csdn.net/a78270528/article/details/46918601 Android框架 android frame work: http://blo ...

  4. Excel应该这么玩——5、三种数据：Excel也是系统

        Excel最常用的功能就是记录数据,把数据按照行列记录下来.这部分数据是源数据,是业务活动中最原始的流水账,作为后续操作的依据.为了从源数据中得出一定的结论,需要对源数据进行分析得出报表数据. ...

  5. logstash实战

    官网上的文档没有更新,估计快商业化了,elasticsearch和kibana 都内嵌了不用再下载,可以参看1.3.3的,除了打个包外没啥区别 http://logstash.net/docs/1.3 ...

  6. oracle存储过程常用技巧

    我们在进行pl/sql编程时打交道最多的就是存储过程了.存储过程的结构是非常的简单的,我们在这里除了学习存储过程的基本结构外,还会学习编写存储过程时相关的一些实用的知识.如:游标的处理,异常的处理,集 ...

  7. CSS之float样式总结

    从四大开始开始慢慢接触前端,大概半年多过去了,虽然做了一些东西,但感觉有些点始终不是很清晰.有时候为了赶进度,没有太多时间对某个点进行全面深入思考分析,只能从网上搜一搜,试一试,只要效果出来了,任务就 ...

  8. java.sql.SQLException: null, message from server: "Host '192.168.xxx.xxx' is not allowed to connect to this MySQL server"

    当你连接自己的电脑上的MySQL时,报这样的错,你可以把ip换成 127.0.0.1或者localhost  ,当然前提是用户名和密码正确

  9. 对魔兽世界、支付宝、Linux三类软件的简单分析

    软工第一次作业: 软件有很多种,如工具类软件.游戏类软件.系统类软件,它们的运行方式也各种各样,如以单机方式运行.以网站方式运行或者以APP方式运行在手机端等,请选取三种软件,分析它们各自的特点. 这 ...

  10. 向STM32 CUBE MX 生成的工程里移植stemwin

    我参考这个文章做的: http://bbs.armfly.com/read.php?tid=1678 这次添加的是没有os的版本 另外跟用不用hal库没关系 1. keil自带了emwin 2. 用c ...