JSONP
- JSONP的原理是利用浏览器对<script>标签的src属性没有同源限制这一特性，通过动态插入一个<script>标签，对服务端发出相应的请求。同时服务器端也不在返还JSON格式的数据，而是返回一段调用。
JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数，而数据就是传入回调函数中的JSON数据。
实际项目中JSONP通常用来获取JSON格式的数据，这时前后端通常约定一个参数callback，这个参数的值，就是处理返回数据的函数名称。
- JSONP的优点
1.兼容性较好，在一些老版本的浏览器中也可以运行，不需要XMLHttpRequest或ActiveX的支持；
2.将回调方法的权限给了调用方，服务端只提供纯服务的数据，至于提供服务以后的页面渲染和后续view操作都由调用者自己定义。
- JSONP的缺点
1.它只支持get请求而不支持post等其它类型的请求；
2.它只支持跨域HTTP请求，而不能解决不同域的两个页面之间如何进行JavaScript调用的问题；
3.在调用失败时，不会返回各种HTTP状态码，大多数框架的实现都是结合超时时间来判定的；
4.安全性较低，不易得到保障。
- JSONP代码实例
//服务端
<?php
header('Content-type: application/json'); //获取回调函数名
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']); //json数据
$json_data = '["customername1","customername2"]'; //输出jsonp格式的数据
echo $jsoncallback . "(" . $json_data . ")";
?>
//客户端
<script type="text/javascript">
function callbackFunction(result, methodName){ //回调函数
var html = '<ul>';
for(var i = 0; i < result.length; i++){
html += '<li>' + result[i] + '</li>';
}
html += '</ul>';
document.getElementById('divCustomers').innerHTML = html;
}
</script>
<script type="text/javascript" src="http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction">
//客户想访问的地址
</script>
CORS
- 当我们使用XMLHttpRequest发送请求时，浏览器如果发现该请求不符合同源策略，会自动给该请求加一个请求头：Origin。后台在经过一系列处理后，如果确定接受该请求，则会在返回结果中加入一个响应头：Access-Control-Allow-Origin。
浏览器会自动判断该响应头中是否包含Origin的值，如果包含，则浏览器会处理响应，我们就可以拿到响应数据；如果不包含，浏览器会直接驳回，这时我们就无法拿到响应数据了。
- 整个CORS的通信过程，都是浏览器自动完成的，不需要用户参与。对于开发者来说，CORS通信与同源的Ajax通信没有差别，代码完全一样。浏览器一旦发现Ajax请求跨域，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。
因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨域通信。
- 市场上绝大多数浏览器及IE10版本以上都支持CORS。
- CORS代码实例
//服务端
app.get('/getNews', function(req, res){
var news = [
"第11日前瞻：中国冲击4金 博尔特再战200米羽球",
"正直播柴飚/洪炜出战 男双力争会师决赛",
"女排将死磕巴西！郎平安排男陪练模仿对方核心",
"没有中国选手和巨星的110米栏 我们还看吗？",
"中英上演奥运金牌大战",
"博彩赔率挺中国夺回第二纽约时报：中国因对手服禁药而丢失的奖牌最多",
"最“出柜”奥运？同性之爱闪耀里约",
"下跪拜谢与洪荒之力一样 都是真情流露"
]
var data = [];
for(var i=0; i<3; i++){
var index = parseInt(Math.random()*news.length);
data.push(news[index]);
news.splice(index, 1);
}
res.header("Access-Control-Allow-Origin", "http://a.jrg.com:8080");
//表示接受"http://a.jrg.com:8080"这个url来获取资源
//res.header("Access-Control-Allow-Origin", "*");
//表示接受所有的url来获取资源
res.send(data);
//返回数据
})
//客户端，代码和同源环境下没有区别
<script>
$('.change').addEventListener('click', function(){
var xhr = new XMLHttpRequest();
xhr.open('get', 'http://b.jrg.com:8080/getNews', true);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
appendHtml( JSON.parse(xhr.responseText) )
}
}
window.xhr = xhr
})
function appendHtml(news){
var html = '';
for( var i=0; i<news.length; i++){
html += '<li>' + news[i] + '</li>';
}
console.log(html);
$('.news').innerHTML = html;
}
function $(id){
return document.querySelector(id);
}
</script>
降域
- 降域也叫跨子域。当两个url的主域名不同，但子域名相同的情况下，我们可以通过<iframe>标签将目标url先嵌入html中，再设置页面的document.domain值为两个url共同的子域名，即可实现降域。
- 降域最重要的前提条件是两个url的子域名必须相同。
- 降域代码实例：
//URL: http://a.jrg.com:8080/a.html
<iframe src="http://b.jrg.com:8080/b.html" frameborder="0" ></iframe>
//通过<iframe>标签将目标url嵌入
<script>
document.querySelector('.main input').addEventListener('input', function(){
console.log(this.value);
window.frames[0].document.querySelector('input').value = this.value;
})
document.domain = "jrg.com"; //通过设置共同的子域名来实现降域
</script>
//URL: http://b.jrg.com:8080/b.html
<script>
document.querySelector('#input').addEventListener('input', function(){
window.parent.document.querySelector('input').value = this.value;
})
document.domain = 'jrg.com'; //通过设置共同的子域名来实现降域
</script>
PostMessage
- PostMessage是一个用于安全地使用跨源通信的方法。它允许来自不同源的脚本采用异步的方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递，相当于提供了一个受控的机制来安全地绕过浏览器的同源限制。
- PostMessage(data,origin)方法接受两个参数：
1.data：要传递的数据。html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象，然而并不是所有浏览器都做到了这一点，部分浏览器仍然只能处理字符串参数；
2.origin：字符串参数。用于指明目标窗口的源，即协议+主机+端口号[+URL]，URL会被忽略，所以可以不写。这个参数主要是出于安全考虑，postMessage方法只会将message传递给指定窗口。我们也可以将其设置为"*"，这样就可以传递给任意窗口；如果要指定和当前窗口同源的话，则设置为"/"即可。
- PostMessage代码实例：
//URL: http://a.jrg.com:8080/a.html
<iframe src="http://localhost:8080/b.html" frameborder="0" ></iframe>
<script>
$('.main input').addEventListener('input', function(){ //监听input中的内容
console.log(this.value);
window.frames[0].postMessage(this.value,'*'); //发送相应的信息到目标url
});
window.addEventListener('message',function(e){ //监听接收到的数据信息
$('.main input').value = e.data; //将接收到的信息显示出来
console.log(e.data);
});
function $(id){
return document.querySelector(id);
};
</script>
//URL: http://b.jrg.com:8080/b.html
<script>
$('#input').addEventListener('input', function(){ //监听input中的内容
window.parent.postMessage(this.value, '*'); //发送相应的信息到目标url
});
window.addEventListener('message',function(e){ //监听接收到的数据信息
$('#input').value = e.data; //将接收到的信息显示出来
console.log(e.data);
});
function $(id){
return document.querySelector(id);
};
</script>
