跨域梳理

Posted 2020-10-04 瓶子2333

跨域技术很多，这里做个小梳理：

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部分先缓一缓