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

现在我们需要在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. linux-----------shell的基础命令

    shell中截取字符串的方法有很多中, ${expression}一共有9种使用方法. ${parameter:-word} ${parameter:=word} ${parameter:?word} ...

  2. My97DatePicker日期插件

    My97DatePicker是一款优秀的日期插件,它可以很方便地实现各种日期选择效果,博得广大IT开发人员的青睐. 下面来讲讲它的常用功能及设置方法. 方法/步骤   先来最简单的配置方法: (1)下 ...

  3. 搭建git for windows服务器

    文档出处 :http://blog.csdn.net/code_style/article/details/38764203 http://blog.csdn.net/aaron_luchen/art ...

  4. 常用git命令总结

    这些命令是最常用的,一般的提交代码.拉取代码.合并代码.分支切换等等操作用这些命令就足够了.    1.git init 把一个目录初始化成git仓库    2.git add test.txt 把文 ...

  5. Alwayson 与 mirror

    --将主副本改为同步模式和自动故障转移,将其中一个辅助副本改为同步辅助副本和自动故障转移 USE [master]GOALTER AVAILABILITY GROUP [TESTDB5AG]MODIF ...

  6. node 异步编程

    node 异步编程 我了解到的node异步编程可分成: 1.回调函数 2.pub/sub模式(发布/订阅模式) 3.promise 4.generator 5.async await 一.直接回调函数 ...

  7. asp.net XMLHttpRequest 进度条以及lengthComputable always false的解决办法

    一直用ajax好长时间了,对其原理也有一些了解,最近由于项目需要,使用ajax异步进度条的效果,就研究了一下,用原生的XMLHttpRequest实现进度条函数,XMLHttpRequest有以下函数 ...

  8. GUI生成exe文件

    gui如何生成exe文件: 已经有gui.m和gui.fig文件 1 安装编译器.已经安装好了vs10的. 2 设置编译器.在matlab命令行输入mex -setup,选择安装的c编译器 3 调用编 ...

  9. jquery.min.map 404 (Not Found)出错的原因及解决办法

    Chrome 更新后出现了 jquery.min.map 404  (Not Found) 的信息 这个到底是什么东西?查询了一下,得到了以下资料 JQuery 官方解释 摘录一下內容 从 jQuer ...

  10. SCALA XML pattern attrbute(属性)

    from: Working with Scala's XML Support 虽然这个guy炒鸡罗嗦,但是还是讲到我要的那句话:  Because Scala doesn't support XML ...