###1. JSONP
JSONP由两部分组成:回调函数和数据
JSONP是通过动态<script>元素来使用的,使用时可以为src属性指定一个跨域URL
eg:
function handelResponse(response){
alert('''......')
}
var script = document.createElement("script");
script.src = "http://..../json/?handelResponse" ;
document.body.insertBefore(script,document.body.firstChild);
缺点:JSONP是从其他域中加载代码执行 要确定JSONP请求是否失败并不容易
###2. Comet(“服务器推送”)
Comet 是一种服务器向页面推送数据的技术,它本含两种方法:长轮询和流
1.)长轮询/短轮询,两者最大的区别在于服务器如何发送数据。短轮询是服务器立即发送响应,无论数据是否有效,而长轮询是等待发送响应。
无论是长轮询或短轮询,浏览器都要在接收数据前先发起对服务器的链接,且服务器在浏览器打开状态下一直保持连接打开
2.)HTTP流
浏览器向服务器发送一个请求,而服务器保持连接打开,然后周期性的向浏览器发送数据
eg:
function fn(url, prog ,finish){
var xhr = new XMLHttpRequest();
var strNum = 0;
xhr.open("get",url,true);
xhr.onreadystatechange = function(){
var resulet ;
if(xhr.readyState == 3){
result = xhr.responseText.substring(strNum);
strNum += result.length;
prog(result);
}elset if(xhr.readyState == 4){
finish(xhr.responseText);
}
}
xhr.send(null);
return xhr;
}
var a = fn("xxx.php",function(data){
alert("Received:" +data)
},function(data){
alert("Done!");
});
###3.新增两个Comet接口
3.1)服务器发送事件(SSE)
SSE API用于创建到服务器的单向链接,服务器可以通过这个链接发送任意数量的数据。服务器相应的MIME格式必须是text/event-stream
MIME类型: 每当浏览器请求一个页面时,web服务器会在发送实际页面内容之前,先发送一些头信息;任何资源都有自己的MIME类型;
eg: Content-Type="text/event-stream" / <meta http-equiv="Content-Type" content="text/html";>
3.1.1)SSE API
JavaScript使用SSE:创建新的EventSource对象,并传入一个入口点:
var source = new EventSource("xxx.php");
传入的URL必须与创建对象的页面同源(相同的URL模式·域及端口)
该source实例对象含一个readyState属性, 0 为正连接到服务器;1表示打开了链接;2表示关闭了链接
及以下三个事件
open:在建立连接时触发
message:再从服务器接收到新事件时触发
source.onmessage = function(event){
var data = event.data; // 服务器发回的数据以字符串形式保存在event.data中
}
error:在无法建立连接是触发
强制断开链接: source.close();
3.1.2)事件流
3.2)Web Sockets
一个单独的持久连接上提供全双工·双向通信;
使用标准的HTTP服务器无法实现Web Sockets;
由于它使用了自定义的协议,所以URL模式也略有不同。未加密的不是http:// 而是 ws:// ; 加密的不是https:// 而是 wss://
3.2.1) 创建实例对象
var socket = new WebSocket("ws://www.xxx.com/abc.php");
传入的URL必须为绝对的,同源策略对它不适用。
实例化对象与XHR类似,websocket也有一个表示当前状态的readyState属性:
WebSocket.OPENING(0):正在建立连接
。。。.OPEN(1):已经建立连接
.CLOSING(2):正在关闭连接
.CLOSE(3):已经关闭
socket.close(); // 在任何时候可以调用该方法,关闭连接
3.2.2) 发送和接受数据
socket.send("xxx"); // 可传入任意字符串
WebSocket只能发送纯文本数据,因此在传送复杂数据之前,需进行序列化处理;
eg: // 传送一个json数据
var msg = {
"name" : "John",
"age": 23
}
socket.send(JSON.stringify(msg));
当服务器接收后并返回消息是,WebSocket对象会触发message事件,该事件与其他传递消息的协议类似,也将返回数据保存在event.data属性中
socket.onmessage = function(event){
event = event || window.event;
var data = event.data;
// 注意:event.data保存的数据与send发送的数据相同,都为字符串格式
...
}
3.2.3) 其他事件
open、erro、close(webCoean、code、reason)