目前客户端（浏览器）和服务端交互大致有以下几种方式：

1）form表单提交方式，适合访问量不大，对用户体验要求不高的web系统开发，或者页面整体刷新无伤大雅的场合，通信方向是客户端提交给服务端，是客户端主动发起；

2）Ajax方式，特点是用户体验好，无需页面整体刷新，对服务器压力也小，有利于客户端和服务端的解耦，也是目前广为使用的一种客户端服务端交互方式，它也是通过客户端发起请求，服务端接受处理，通信方向和form表单相同；

3）server-sent-event,它是服务端主动向客户端（浏览器）发送数据，客户端监听并接受，然后处理，通信方向也是单向的，但是和上面两种相反，是服务端发起，客户端接受，但是其应用层协议还是基于http的。

4）web socket，这是将以前服务端通信的套接字原理实现在了浏览器上，使得浏览器和服务端可以相互发送消息，通信方向是双向的，只要连接一建立，双方都可以向对方发送数据，无需哪一方先来后来，应用层协议基于WS协议。

上面第3第4由于是HTML5中新添加的功能，所以在很多老版的浏览器中（如IE6-IE8）还不支持，因此应用还不够广泛.

这里主要实现的是第三种方式，即服务端推送事件，直接上代码

客户端代码


<!          DOCTYPE           html>         


          <          html          >         


          <          head           lang="en">         


                    <          meta           charset="UTF-8">         


                    <          title          ></          title          >         


          </          head          >         


          <          body          >         


          <          script          >         


                    (function()         


                    {         


                    var source;         


                    if (!!window.EventSource) {         


                    source = new EventSource('http://localhost/server.php');         


                    }         


                    source.onmessage=function(e)         


                    {         


                    var oSpan=document.createElement('span');         


                    oSpan.innerHTML=e.data+"<          br          >";         


                    


                    var oDiv=document.querySelector("#div1");         


                    oDiv.appendChild(oSpan);         


                    }         


                    


                    


                    })();         


          </          script          >         


          <          div           id="div1"></          div          >         


          </          body          >         


          </          html          >


　以上代码构造一个eventSource对象，指向一个服务端后台PHP文件，这个对象是HTML5中的服务端推送事件API封装对象，然后添加onmessage事件，用来监听服务端发送过来的消息，服务端一有消息发送，就会执行这个事件的回调函数，这里让它接收到数据之后将其包裹在span中并将这个span插入到div中。

服务端代码server.PHP


<?php         


          header(          'Content-Type: text/event-stream'          );         


          header(          'Cache-Control: no-cache'          );         


                    


          function           sendMsg(          $id          ,           $msg          ) {         


          echo           "id: $id"           . PHP_EOL;         


          echo           "data: $msg"           . PHP_EOL;         


          echo           PHP_EOL;         


          ob_flush();         


          flush          ();         


          }         


                    


          for          (          $i          =0;          $i          <=1000;          $i          ++)         


          {         


          $serverTime           = time();         


          sendMsg(          $serverTime          ,           'server time: '           .           date          (          "h:i:s"          , time()));         


          sleep(2);         


                    


          }


　　首先要设定其发送给客户端http报文中的首部


header(         'Content-Type: text/event-stream'         );<span style=         "font-size: 14px;"         >这是服务端推送事件特定的MIME类型，</span>        

        1


header(         'Cache-Control: no-cache'         );<span style=         "font-size: 14px;"         >表示不让浏览器进行缓存</span><br><span style=         "font-size: 14px;"         >然后每隔两秒向客户端发送一个时间戳，客户端接收到之后，显示到div中，效果如下：</span>        

        1



html5交互案例 h5交互形式_ajax


<span style=         "font-size: 14px;"         >有了这种通信方式，我们制裁采用的Ajax长轮询的方式来模拟服务器端推送事件就可以不用了，如果服务端收到一些需要通知客户端的信息，那么可以直接发送给客户端，而不必等待其发送请求。</span><br><br><br><br>        

        1