一.comet(彗星-隐意：更长的ajax请求)

1.短轮询（不算comet，因为它很短，单纯想总结到一起）：xhr + setInterval

      function getProgress(){
          var xhr = new XMLHttpRequert();
             xhr.send();
             xhr.onload = function(){
                 if(xhr.status == 200){
                    //todo
                 }
             }
      }

      setInterval(function(){

         getProgress();

      },1000)

2.长轮询：xhr + callback

     function getProgress(){
          var xhr = new XMLHttpRequert();
             xhr.send();
             xhr.onreadystatechange = function(){
                 if(xhr.status == 200){
                    //todo
                    getProgress();
                 }
             }
      }
      

3.流 xhr

      function creatStreamingClient(url, progress, finished){
              var xhr = new XMLHttpRequest(),
                  received = 0;
              xhr.open('get');
              xhr.onreadystatechange = function(){
                  var result;
                  if(xhr.readystate == 3){
                      result = xhr.responseText.substring(received);

                      received += result.length;

                      progress(result);
                  } else if(xhr.readyState == 4){
                      finish(xhr.responseText);
                  }
              };

              xhr.send();
              reture xhr;
          }

          var client = creatStreamingClient('xxx.php',
              function(data){ // todo },
              function(data){ // todo }
          )
          

二.服务器发送事件SSE

    var source = new EventSource('xxx.php');
    source.onmessage = function(event){
        var data = event.data;
        //todo
    }
    

1. source 三个事件提供监听：
2. open 建立连接时触发。
3. message 从服务器接收到新数据时触发
4. error 无法建立连接时触发。

注意

1. 如果想主动终止连接，可以调用source.close();
2. 如果后台同时返回一个数据 event.data => 'foo',如果为多个数据 event.data => 'foo\nfoo2'。
3. SSE同时支持短轮训、长轮训、http流，还能在断开连接之后，确定何时重新连接
4. MIME类型必须为 text/event-stream
5. 协议类型为http https协议
6. 后台还可以设置一个id 值，id可以对应后台一个服务，如果连接断开，还可以根据id来恢复本次事件流。

三.Web Sockets（双全工、双向通信）

    var socket = new WebSocket('ws://www.test.com/xxx.php');
    socket.onopen = function(){
        if (socket.readyState === WebSocket.OPEN) {
           socket.send('helloWorld');
        }
    }
    socket.onmessage = function(event){
        var data = event.data;
        //todo
    }
    socket.onerror = function() {
       cosnole.log('WebSocket error!')
    }
    socket.onclose = function(event) {
       let clean = event.wasClean // 是否已经关闭 
       let code = event.code // 服务器返回的数值状态码。 
       let reason = event.reason //服务器返回的消息。
    }

注意

1. 只有支持web socket的服务器才能实现这种协议传输(ws:// wss:// 同类比较 http:// https://)
2. 如果要传到服务端的是复杂数据格式，要先调用JSON.stringify()

总结

1. 如果想实现类似进度条这种功能（重视定时反馈到用户），可以选择【短轮询】
2. 如果想实现，类似股票实时数据获取（可以不定时，但是不能间断获取数据），可以使用【流、SSE】
3. 如果想实现即时聊天系统（重视双向数据实时传递），可以选择【web sockets】,如果是常规服务器， 也可以XHR + SSE 配合使用实现双向通信。

本文作者原创，仅供学习交流使用，转载需注明出处。