前端跨域与实时通信：CORS、JSONP、Comet及WebSocket详解

跨域资源共享与域名共享机制

1.CORS

CORS（跨域资源共享）的核心机制是通过自定义HTTP头部实现浏览器与服务器的交互，进而判定请求或响应的成败。具体做法是在请求中附加Origin头部，携带请求页面的源信息（协议、域名及端口），服务器据此决定是否允许响应。

2.document.domain

若将页面的document.domain设置为相同值，则页面间可相互访问对方的JavaScript对象。

注意：

该值不得设置为URL中不包含的域；

松散的域名无法设置为紧绷的域名。

图像Ping与JSONP技术解析

3.图像Ping

var img=new Image();
img.onload=img.onerror=function(){
... ...
}
img.src="url?name=value";

数据通过查询字符串形式发送，响应内容任意，通常为像素图或204状态码。

图像Ping主要用于跟踪用户点击页面或动态广告的曝光次数。

缺点：

仅支持发送GET请求；

无法获取服务器响应文本，仅适用于浏览器与服务器间的单向通信。

JSONP实现原理与风险

4.Jsonp

var script=document.createElement("script");
script.src="url?callback=handleResponse";
document.body.insertBefore(script,document.body.firstChild);

JSONP由回调函数和数据两部分组成。

回调函数是接收到响应时页面中应调用的函数，其名称通常在请求中指定。

数据是指传入回调函数中的JSON数据。

优点：

可直接访问响应文本，支持浏览器与服务器间的双向通信。

缺点：

JSONP从其他域加载代码执行，存在其他域不安全的可能；

难以判断JSONP请求是否失败。

Comet推送技术：长轮询与流

5.Comet

Comet技术可实现服务器向浏览器推送数据。

Comet的实现方式包括长轮询和流。

短轮询指浏览器定时向服务器发送请求，以检查是否有数据更新。

长轮询指浏览器向服务器发送请求后，服务器保持连接打开直至有数据可发送。发送数据后浏览器关闭连接并立即发起新请求。其优点是所有浏览器均支持，利用XHR对象和setTimeout()即可实现。

流技术指浏览器向服务器发送请求，服务器保持连接打开并周期性地向浏览器发送数据，整个页面生命周期内仅使用一个HTTP连接。

WebSocket全双工通信详解

6.WebSocket

WebSocket可在单独的持久连接上提供全双工、双向通信。

WebSocket使用自定义协议，未加密连接使用ws://，加密连接使用wss://。

var webSocket=new WebSocket("ws://");
webSocket.send(message);
webSocket.onmessage=function(event){
var data=event.data;
... ....
}

注意：

必须向WebSocket构造函数传入绝对URL；

WebSocket可打开任何站点的连接，是否与特定域中的页面通信完全取决于服务器；

WebSocket仅能发送纯文本数据，对于复杂数据结构，发送前必须进行JSON.stringify(message)序列化。

优点：

在客户端和服务器之间发送的数据量极少，从而减少字节开销。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持本站！