跨域梳理

跨域技术很多,这里做个小梳理:

CORS(跨域资源分享):

在IE8+中是通过一个XDomainRequest对象实现的,使用方法和XMLHttpRequest相似:

var xdr=new XDomainRequest();
     xdr.onload=fn;
     xdr.onerror-fn;
     xdr.open(method,url);
     xdr.send();

IE的XDR对象:

1.不传送cookie;

2.只能设置请求头的Content-Type

3.不能访问响应头部

XDR对象只支持异步请求,且返回后只能访问responseText。

而其他浏览器则是通过XMLHttpRequest对象实现对CORS的支持。在操作上的唯一区别是在open()的url参数中传入绝对路径,可以访问status/statusText。

1.不能用setRequestHeader()自定义头部。

2.不发送he'jie'shou和接收cookie

3.调用getAllResponseHeaders()只返回空字符串。

下面一段代码是《高级》中给出的跨浏览器CORS

 1 function createCORSRequest(method,url){
 2   var xhr = new XMLHttpRequest();
 3   if("withCredenticals" in xhr){
 4       xhr.open(method,url,true);
 5   }else if(typeof XDomainRequest != "undefined"){
 6       xhr = new XDomainRequest();
 7       xhr.open(method,url);
 8   }else{
 9       xhr=null;
10   }
11   return xhr;
12 }
13 var request=createCORSRequest('get',url);
14 if(request){
15     request.onload=function(){};
16     request.send(null);
17 }

最后14-17行的代码其实是不完整的,因为IE的XDR对象在返回的时候会触发onload事件,也就是说我们只能在onload中操作返回的responseText。但是对于其他浏览器则还是看readystatechange和status操作返回数据。

 

其他跨域技术:

图像ping:

只能发送GET请求,无法访问服务器的响应文本,多用在跟踪用户点击页面/动态广告曝光次数。

1 var img=new Image();
2 img.onload=fn;
3 img.onerror=fn;
4 img.src='url?queryString'

 

JSONP(参数式JSON):主要是两部分,一个是callback函数,一个事作为函数参数的json数据。

JSONP的实现一般是在页面动态创建并插入一个script标签,且script.src=url?callback=handleresponse,这里将一个函数名传给服务器,服务器接到请求后返回一段代码:

handleresponse({"name":"value"});

1.查询字符串中callbak=handleresponse,意思是我们页面已经有一个handleresponse函数,用来处理将要返回的数据。我们把这个函数名作为查询字符串发给服务器。

2.服务器将要返回的json数据作为参数  传入接收到的handleresponse函数中,并把这段代码发回来。

3.服务器发回来的js代码被页面加载后,页面立即执行:

handleresponse({"name":"value"});

 

Comet部分先缓一缓

 

posted @ 2017-08-27 10:09  瓶子2333  阅读(146)  评论(0编辑  收藏  举报