跨域请求,协议,域名,端口有一个不一样都是跨域请求。
产生跨域请求的原因:
同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。
比如http://www.1234.com和https://www.1234.com,同样都是80端口,但是协议不一样。又或者是http://m.1234.com和http://www.1234.com。二级域名不一样两个都是不同的域。又或者是http://www.1234.com:8080和http://www/1234.com:9090端口不一样也就是两个不同的域。
1> document.domain + iframe (只有在主域相同的时候才能使用该方法)
2> 动态创建script
这个没什么好说的,因为script标签不受同源策略的限制。
3> CORS
CORS背后的思想,就是使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功,还是应该失败。
IE中对CORS的实现是xdr
var xdr = new XDomainRequest();
xdr.onload = function(){
console.log(xdr.responseText);
}
xdr.open('get', 'http://www.baidu.com');
......
xdr.send(null);
其它浏览器中的实现就在xhr中
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if(xhr.readyState == 4){
if(xhr.status >= 200 && xhr.status < 304 || xhr.status == 304){
console.log(xhr.responseText);
}
}
}
xhr.open('get', 'http://www.baidu.com');
......
xhr.send(null);
实现跨浏览器的CORS
function createCORS(method, url){
var xhr = new XMLHttpRequest();
if('withCredentials' in xhr){
xhr.open(method, url, true);
}else if(typeof XDomainRequest != 'undefined'){
var xhr = new XDomainRequest();
xhr.open(method, url);
}else{
xhr = null;
}
return xhr;
}
var request = createCORS('get', 'http://www.baidu.com');
if(request){
request.onload = function(){
......
};
request.send();
}
4> JSONP
JSONP包含两部分:回调函数和数据。
回调函数是当响应到来时要放在当前页面被调用的函数。
数据就是传入回调函数中的json数据,也就是回调函数的参数了。
function handleResponse(response){
console.log('The responsed data is: '+response.data);
}
var script = document.createElement('script');
script.src = 'http://www.baidu.com/json/?callback=handleResponse';
document.body.insertBefore(script, document.body.firstChild);
/*handleResonse({"data": "zhe"})*/
//原理如下:
//当我们通过script标签请求时
//后台就会根据相应的参数(json,handleResponse)
//来生成相应的json数据(handleResponse({"data": "zhe"}))
//最后这个返回的json数据(代码)就会被放在当前js文件中被执行
//至此跨域通信完成
使用ajax的jsonp
$.ajax({
url:"http://5678.com//rest/orgbg/select",
type:"get",
cache:false,
dataType:"jsonp",
jsonp:"callback", //这里定义了callback的参数名称,以便服务获取callback的函数名即getMessage
jsonpCallback:"getMessage", //这里定义了jsonp的回调函数
success:function(data){
// alert("success:"+data.data.orgBg);
$("#bg_context").append(removeHtml(data.data.orgBg));
},
error:function(){
alert("发生异常");
}
});
function getMessage(jsonp){
alert("message:"+jsonp);
}