jsonp的使用
假设我们已经了解什么是同源策略，以及什么是浏览器的同源策略的限制。
现在我们需要在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的使用的更多相关文章
- 实例操作JSONP原理
絮语:按这个步骤走,你就会明白JSONP是什么鬼. 1.工程目录: ng-mywork demo.html test.js 2.nginx的server配置 server { listen ; ser ...
- angular2系列教程（九）Jsonp、URLSearchParams、中断选择数据流
大家好,今天我们要讲的是http模块的第二部分,主要学习ng2中Jsonp.URLSearchParams.observable中断选择数据流的用法. 例子
- 疯狂的JSONP
何为跨域?何为JSONP?JSONP技术能实现什么?是否有必要使用JSONP技术? 跨域 就是由于JavaScript同源策略的限制,使得a.com域名下的js无法操作b.com或c.a.com域名下 ...
- 通过扩展让ASP.NET Web API支持JSONP
同源策略(Same Origin Policy)的存在导致了"源"自A的脚本只能操作"同源"页面的DOM,"跨源"操作来源于B的页面将会被拒 ...
- 跨域的jsonP
1.出现原因:因为web中的同源策略(域名,协议,端口号)限制了跨域访问. 2.区别于json (个人理解)json是数据交换格式,jsonp是数据通信中的交互方式 3.jsonp的get与p ...
- ASP.NET Web API 配置 JSONP
之前的一篇博文:jsonp跨域+ashx(示例) 1. 安装 Jsonp 程序集: PM> Install-Package WebApiContrib.Formatting.Jsonp PM&g ...
- 原生JS封装Ajax插件(同域&&jsonp跨域)
抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...
- 跨域之jsonp
我们都知道使用<script>标签可以引入外部的JS文件,即使这个JS文件来自于其他的网站,比如我们引用存放在网络服务器上的jQuery框架.在这个过程中,我们已经实现跨域访问.像< ...
- 由浅入深学习ajax跨域(JSONP)问题
什么是跨域?说直白点就是获取别人网站上的内容.但这么说貌似又有点混淆,因为通常我们用ajax+php就可以获取别人网站的内容,来看下面这个例子. 来看看跨域的例子,jquery+ajax是不能跨域请求 ...
- JSONP的诞生、原理及应用实例
问题: 页面中有一个按钮,点击之后会更新网页中的一个盒子的内容. Ajax可以很容易的满足这种无须刷新整个页面就可以实现数据变换的需求. 但是,Ajax有一个缺点,就是他不允许跨域请求资源. 如果我的 ...
随机推荐
- Hihocoder 1063 缩地
树形dp 涉及不重复背包组合求最小 从边长分段看不好入手 因为点数只有100点值<=2,总值<=200 可以对每个点的每个值进行dp 这里最后不回来肯定优于全回来 然后由于要分为回来和不回 ...
- LeetCode:Two Sum II
public class Solution { public int[] twoSum(int[] numbers, int target) { int left = 0; int right = n ...
- Easy Tag Write(3.2)
package skyseraph.android.util; /** * @Title : LogUtil.java * @Package : tcl.nfc.phone.util * @Class ...
- 创建 MIME 类型////////////zzz
用 Apache 创建 MIME 类型 在 Apache 里, MIME 类型和文件扩展名之间的映射是被存放在配置文件 "apache根目录/conf/mime.types" 里的 ...
- Windows Phone 二十一、联系人存储
联系人资料是手机上必有的,在最新的 Windows Phone 中开放了相应的 API ,以便于应用程序读写通讯录. 注意:系统没有对整个手机自带的通讯录写入开放权限,每个应用只能管理属于当前应用的联 ...
- （二）ADS1.2的安装教程以及使用 调试 （不会 AXD 调试工具）
安装教程: 参考百度 http://jingyan.baidu.com/article/cdddd41c7db85253cb00e1ae.html 具体使用看: 杨铸的那本书(嵌入式底层软件驱动开发) ...
- 添加sudo权限
进入超级用户模式.也就是输入"su -",系统会让你输入超级用户密码,输入密码后就进入了超级用户模式.(当然,你也可以直接用root用) 添加文件的写权限.也就是输入命令" ...
- Java比C++好在哪儿？
1.内外局部变量,不允许重名,避免了C++的那种混淆. 2.语言层面支持多线程,大幅减少了线程同步所需的代码量. 3.匿名类,匿名函数,可以作为参数直接写在参数所需要的位置,而不需要在其它地方再定义实 ...
- Windows访问Ubuntu14.04远程桌面全攻略
最近接到一个任务,在Ubuntu系统下开发一个串口读写程序.开发要在台式机上进行,安装UbuntuKylin 14.04,并且在串口连接了设备.个人使用的是笔记本电脑,系统是Windows8.1.自然 ...
- Linux部署Apache ActiveMQ 5.14.1
简单记一下,下载地址 http://activemq.apache.org/download.html 一.安装JDK7以上,官方说明:http://activemq.apache.org/versi ...