说一说javascript跨域和jsonp
同源策略
在浏览器的安全策略中“同源策略”非常如雷贯耳，说的是协议、域名、端口相同则视为同源，域名也可换成IP地址，不同源的页面脚本不能获取对方的数据。
要是想使用XMLHttpRequest或者常规的AJAX请求获取另一个站点的数据，浏览器会告诉你“XXXX is not allowed by Access-Control-Allow-Orign”.
因为同源策略的存在，防止了跨域访问的安全问题，但同时也损失了方便获取资源的便利。
跨域的src属性
世事又非绝对，浏览器还是允许几个元素跨域访问外部资源的，如：<script>，<img>，<iframe>，也就是说，在html元素中拥有src属性的元素是可以跨域访问资源。
通过src属性，img可以引用其它站点或图床的图片，大大降低本站的图片持久。
通过src属性，script可以引用CDN的JS文件，加速了浏览器的脚本文件的下载，跨域的数据获取更加高效和方便。
通过src属性，iframe可以嵌入其它站点的页面，可以让页面的框架和可变内容分离，内容引用较为灵活，方便引用其它站点，虽然现在越来越不建议使用它。
正因为跨域访问的存在，web世界才能更加的精彩。
而JSONP正式利用了script标签的跨域能力。
JSONP
全名JSON with padding
就是通过约定，访问跨域服务器上数据的方法。
这种约定其实就是一个函数定义，并且具备数据参数的定义，由跨域服务器的脚本或动态生成的脚本调用并且传递数据参数。
该函数称之为“跨域回调函数”。
1.一个简单的跨域脚本调用
本地服务器上的一个脚本，直接引用了跨域服务器上的脚本文件。
<html>
<head>
<title>test</title>
</head>
<body>
<script src="http://localhost:3001/javascripts/jsonpsrc1.js"></script>
</body>
</html>
跨域服务器上的脚本jsonpsrc1.js
alert('hi 我们不是一个域的哦');
运行后，浏览器访问本地服务器上的页面，会弹出alert
2.跨域传递数据
在本地服务器的脚本中，约定一个函数，名为jsonpCallback跨域回调函数交由跨域服务器上的脚本调用。
注意，jsonpCallback跨域回调函数的定义必须是在引用跨域服务器上的脚本之前。
<html>
<head>
<title>test</title>
</head>
<body>
<script>
function jsonpCallback(data){
alert(JSON.stringify(data,null,2));
}
</script>
<script src="http://localhost:3001/javascripts/jsonpsrc2.js"></script>
</body>
</html>
跨域服务器上的脚本jsonpsrc2.js，按照约定的跨域回调函数名调用，并传递一个数据对象。
jsonpCallback({
name:'白色的海',
age:90
});
运行后，浏览器访问本地服务器上的页面，会弹出alert，显示跨域服务器传递过来的数据。
3.动态跨域回调函数
通过上面的2种方法已经基本实现了JSONP的使用，但是还存在一个问题，就是必须要提前约定这个跨域回调函数的名字 。
每次都要按照跨域服务器上的的回调函数名进行定义，极为不便。
那么两个跨域的脚本引用能否不绑定同一个函数名称呢。
可以在本地服务器脚本中任意定义跨域回调函数的名称，将该函数名用过参数请求给跨域服务器，在跨域服务器后台代码上动态拼接生成回调函数的调用字符串并响应给请求方。
在这里是用node.js+express的运行环境，并且以一个简单的查询航班信息的跨域请求进行简单的实现。
在本地服务器页面脚本中定义了showFlightInfo跨域回调函数，用于显示跨域服务器返回的航班信息。
在其后的script标签中对跨域服务器进行了一个JS的请求，并将航班信息和跨域回调函数名带过去。
<html>
<head>
<title>test</title>
<link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
<h1>航班信息</h1>
<h1>某航</h1>
<script>
function showFlightInfo(data){
var flightNoEle = document.createElement('h4');
flightNoEle.innerHTML=data.flightNo; var fromEle = document.createElement('h4');
fromEle.innerHTML=data.from; var toEle = document.createElement('h4');
toEle.innerHTML=data.to; document.body.appendChild(flightNoEle);
document.body.appendChild(fromEle);
document.body.appendChild(toEle);
}
</script>
<script src="http://localhost:3001/info/flight?flightNo=MU531&callbackFunc=showFlightInfo"></script>
</body>
</html>
跨域服务器的后台代码中响应JS请求，接收航班号，生成航班信息，连同跨域回调函数名称拼接成JS字符串后响应请求方。
router.get('/info/flight', function (req, res) {
//生成航班信息，这里直接拿请求过来的航班号写一个航班信息对象
var data = {
flightNo: req.query.flightNo,
from: '北京',
to: '上海'};
//获取请求过来的跨域回调函数名称
var callbackFunc = req.query.callbackFunc;
//拼成一个JS字符串
var s = callbackFunc + '(' + JSON.stringify(data, null, 2) + ');';
console.log(s);
//通过设置http的header，告知请求方响应的内容是JS脚本
res.setHeader('content-type', 'text/javascirpt;charset=utf-8');
//res.setHeader('content-language', 'zh-CN')
res.write(s);
res.end();
});
运行后，浏览器访问本地服务器上的页面，会显示跨域服务器上传递过来的航班信息。
为了看得清，将跨域服务器收到的请求和响应的内容输出到控制台，方便查看。
第一行是收到的请求，后面的是对请求的响应，可以看到跨域服务端返回给请求方一个JS的脚本，其中的回调函数名称是请求方定制的。
如此完成JSONP的基本实现。
不只是JSONP
通过跨域请求获取数据本质上是利用了<script>标签的src属性，通过浏览器将跨域的脚本拉过来并同时执行。
那么既然是拉过来执行，那和本页面中的其它脚本的执行没多大区分，那就当然也可以通过生成html元素和css的方式改变页面的显示内容，以实现更丰富的功能，比如广告。
基于上面的航班信息，我要在其中显示一块广告内容，内容来自于跨域服务器。
通过<script>标签引用跨域服务器上对应的广告资源地址
<html>
<head>
<title>test</title>
<link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
<h1>航班信息</h1>
<script src="http://localhost:3001/ad"></script>
<h1>某航</h1>
<script>
function showFlightInfo(data){
var flightNoEle = document.createElement('h4');
flightNoEle.innerHTML=data.flightNo; var fromEle = document.createElement('h4');
fromEle.innerHTML=data.from; var toEle = document.createElement('h4');
toEle.innerHTML=data.to; document.body.appendChild(flightNoEle);
document.body.appendChild(fromEle);
document.body.appendChild(toEle);
}
</script>
<script src="http://localhost:3001/info/flight?flightNo=MU531&callbackFunc=showFlightInfo"></script>
</body>
</html>
跨域服务器的后台代码中响应JS请求，生成一串使用document.write向页面中生成html元素的字符串。
router.get('/ad', function (req, res) {
//拼接一JS字符串，完成向html页面中输出html标记
var s = 'document.write(\'<div style="background-color:red;width:10rem;height:10rem">我是旅行社广告</div>\');';
console.log(s);
res.setHeader('content-type', 'text/javascirpt;charset=utf-8');
res.write(s);
res.end();
});
运行后，浏览器访问本地服务器上的页面，会在航班信息下方显示红色广告位，而这个广告位完全是跨域服务器生成的并且包括样式。
在此基础上，可以做出很多效果，包括将页面某一部分的生成交给专门的或者对应的业务服务器上完成。
说一说javascript跨域和jsonp的更多相关文章
- jQuery(三) javascript跨域问题(JSONP解决)
加油~ --WH 一.什么是javascript跨域问题? 域:服务器域名,唯一标识(协议,域名,端口)必须保证一致,说明域相同 跨域:在一个服务器上,去访问另一个服务器上,并且得到另一个服务器返回回 ...
- javascript 跨域问题 jsonp
转载:http://www.cnblogs.com/choon/p/5393682.html demo 用动态创建<script></script>节点的方式实现了跨域HTTP ...
- 关于javascript跨域及JSONP的原理与应用
同源策略,它是由Netscape提出的一个著名的安全策略,现在所有的可支持javascript的浏览器都会使用这个策略. 为什么需要同源策略,这里举个例子: 假 设现在没有同源策略,会发生什么事情呢? ...
- 利用javascript跨域访问cookie之广告推广
在上一篇<说一说javascript跨域和jsonp>中,利用JSONP进行了跨域的数据访问,利用JS本身的跨域能力在远端生成HTML结构的方式完成了一个小广告. 在实际应用中, 跨域使用 ...
- JavaScript 跨域漫游
前言: 最近在公司做了几个项目都涉及到了iframe,也就是在这些iframe多次嵌套的项目中,我发现之前对iframe的认识还是比较不足的,所以就静下心来,好好整理总结了iframe的相关知识:&l ...
- Javascript跨域问题总结
疯狂的JSONP 关于JSON与JSONP简单总结 window.name实现的跨域数据传输 JavaScript跨域总结与解决办法 flash跨域策略文件crossdomain.xml配置详解
- JavaScript 跨域：window.postMessage 实现跨域通信
JavaScript 跨域方式实现方式有很多,之前,一篇文章中提到了 JSONP 形式实现跨域.本文将介绍 HTML5 新增的 api 实现跨域:window.postMessage . 1 othe ...
- thinkphp，javascript跨域请求解决方案
javascript跨域请求解决方案 前言 对于很多前端或者做混合开发的同学,我们难免会遇到跨域发起请求业务,比如A站点向B站点请求数据等等.由于最近要做一个站点集群的项目,所以具体业务要求很多个站点 ...
- JavaScript 跨域之 POST 实现。
javascript 跨域是一个很常见的问题,其中 jsonp 是一个最常用的手段,但是 jsonp 只支持 get,不支持 post,所以如果想通过 jsonp 来 post 一些数据,就头大了. ...
随机推荐
- [.NET] C# 知识回顾 - Event 事件
C# 知识回顾 - Event 事件 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/6060297.html 序 昨天,通过<C# 知识回顾 - ...
- CSS知识总结（七）
CSS常用样式 5.背景样式 1)背景颜色 background-color : transparent | color 常用值:①英文单词,②十六进制,③RGB或RGBA 另外,还有一种是 渐变色彩 ...
- ios 类似微信红点显示功能
设计思路:给UIView增加一个分类 所有的视图都可以根据需要来进行红点显示 #import <UIKit/UIKit.h> @interface UIView (CHRRedDot) @ ...
- 14门Linux课程，打通你Linux的任督二脉！
Linux有很多优点:安全.自主.开源--,也正是这些优点使得很多人都在学Linux. 虽说网上有大把的Linux课程资源,但是对很多小白来说网上的课程资源比较零散并不适合新手学习. 正因为此,总结了 ...
- LVM基本介绍与常用命令
一.LVM介绍LVM是 Logical Volume Manager(逻辑卷管理)的简写,它是Linux环境下对磁盘分区进行管理的一种机制LVM - 优点:LVM通常用于装备大量磁盘的系统,但它同样适 ...
- 用SecureCRT连接虚拟机中的Linux系统(Ubuntu)
今天突然练习linux命令行的时候,想在window中联系linux命令行.经过一番dudu找到了一个不错的的工具(SecureCRT--意思安全)就是用SSH链接linux主机.推荐大家使用.毕竟w ...
- /etc/ppp/chap-secrets
# Secrets for authentication using CHAP # client server secret IP addresses abc l2tpd * client:VPN 用 ...
- 架构之路（九）Session Per Request
前面的两篇反应很差:没评论没赞.很伤心啊,为什么呢?搞得我好长一段时间都没更新了——呵呵,好吧,我承认,这只是我的借口.不过,还是希望大家多给反馈.没有反馈,我就只能猜了:前面两篇是不是写得太“粗”了 ...
- 【完全开源】知乎日报UWP版（上篇）：界面设计、官方API分析
目录 说明 使用Fiddler分析android版API 部分效果图 关于源码 说明 在做博客园UWP版的时候其实就有做知乎日报的打算了,前段时间一直出差,在酒店里用Fiddler简单的分析了一下An ...
- 探索 Linux 系统的启动过程
引言 之所以想到写这些东西,那是因为我确实想让大家也和我一样,把 Linux 桌面系统打造成真真正正日常使用的工具,而不是安装之后试用几把再删掉.我是真的在日常生活和工作中都使用 Linux,比如在 ...