js-其他跨域技术(JSONP`Comet)

###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）