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

现在我们需要在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. Java：回调机制

    引用:http://blog.sina.com.cn/s/blog_48cf38890100go6x.html 1.  什么是回调函数    回调函数(callback Function),顾名思义, ...

  2. openGL漫游功能简单实现

    最近弄openGL漫游功能的时候,在网上找了好多源码都没有达到预期效果,然后就自己写了一个算法分享一下. 上下键实现位移,左右键实现转动. 算法思想:由于改变观察点函数原型为: void gluLoo ...

  3. include与require的区别?

    require()语句的性能与include()相类似,都是包括并运行指定文件.不同之处在于:对include()语句来说,在执行文件时每次都要进行读取和评估:而对于require()来说,文件只处理 ...

  4. Mysql中的少用函数

    1.查询时需要转换类型,大多发生在数字和字符串.时间和字符串之间 Mysql提供了两个个类型转换函数:CAST和CONVERT CAST() 和CONVERT() 函数可用来获取一个类型的值,并产生另 ...

  5. ffmpeg编译参数详解

    Usage: configure [options]用 法:configure [选项]Options: [defaults in brackets after descriptions]选   项: ...

  6. 利用CNN进行人脸年龄预测

    很久之前做的东西了,最近做了一个人脸相似度检测,里面用到了这里的一个模型,所以抽个空把人脸年龄检测的思路总结一下. 与其他CNN分类问题类似,人脸年龄预测无非就是将人脸分为多个类别,然后训练卷积神经网 ...

  7. Hibernate 基础配置及常用功能（三）

    本章重点讲述Hibernate对象的三种状态以及如何配置二级缓存 有关Hibernate的三种状态如何相互转换网上都能查到,官方文档描述的也比较详细.这里主要是针对几个重点方法做代码演示. 一.状态转 ...

  8. Dynamics AX 2012 R2 无法创建类"Excel.Application"的COM对象

        Reinhard在做一个Excel导入项目时,发现X++代码一旦执行到Excel组件部分,就会报如下错误: 无法创建类"Excel.Application"的COM对象.请 ...

  9. UI图标资源搜索

    下面这些网站可以搜索图标资源,方面界面制作: 分享下http://www.tutorialcadet.com/20-user-interface-icon-sets-for-developers/下面 ...

  10. gulp编译sass

    前言:前段时间学习了sass语法,但是一直用的是"考拉"这个软件工具将我写的sass代码编译成css,然后再引用到项目里面去的,随着对sass的更加深入的了解,我开始尝试着将sas ...