Web交互的进化史

Web交互的进化史

F5大法

犹记得高中时期，本屌上课时捧着NOKIA 3230刷NBA直播的场景，”*”号键刷的飞起，小朋友们不时投过来羡慕的期待的目光等着我直播比分。 猛砸”*”号的过程就是不停的像服务器request实时数据的过程，每砸一次就建立一次HTTP连接，GET一条URL资源。 这样的“实时”获取资源的效率可想而知是多么的低下，用户无法预知服务器端的数据是否更新，另一方面当服务器有数据变更时也没法通知给用户。大多数时间用 户获取到的是同样的数据，而服务器也必须把整个页面数据一遍又一遍的response给用户。如果同时访问的用户不多，那么这样的资源浪费是容许的，而如 果直播的是火箭-湖人的比赛无异于遭受DDOS攻击。

Ajax

最初听到这个词很诧异，总能联想到荷甲球队，还以为这项技术是“灰翔的荷兰人”发明的，其实毛关系都没有–！~。

人家的全称是Asynchronous JavaScript and XML，异步 JavaScript 及 XML。听起来挺唬人的，其实也就那么回事。

所谓的异步其实就是JavaScript去完成像服务器request的工作，request的或许只是需要更新的数据比如说NBA的比分，而不必去更新整个页面（标题啊，广告啊，还有评论里各种科黑、科蜜关于C罗，煤球王的对喷…）。

• 轮询（polling）方式实现的Ajax,上j8。

设定一个时间间隔不停的像服务器发起请求。

比起F5大法，AJAX只像服务器获取少量数据，然而仍无法预知何时服务器上的数据会更新，仍然会发起大量无用的请求，大量的并发依然会使服务器压 力巨大。请求来的数据只是忽略了轮询间隔时间的“实时”数据, 调整轮询的间隔时间就是在数据的实时性与服务器压力之间的权衡。

• 捎带轮询（piggyback polling），这个不能叫做第二代Ajax，充其量是1s。

捎带轮询（piggyback polling）是一种比轮询“更加聪明”的做法，因为它会删除掉所有非必需的请求（没有返回数据的那些）。不存在时间间隔，客户端在需要的时候向服务器端发送请求。

上面的介绍是在网上截下来的，“更加聪明”实则可以认为是个贬义词。“客户端会在需要的时候向服务器发送请求”，然而服务器数据更新的行为客户端是根本无法预知的，有可能服务器累积在服务端的数据因客户端未能发送请求而无法响应给客户端，实时性因此完败给F5大法。

Comet

Comet 技术可以实现主动向服务器推送数据。comet的优点在于它可以在任何时候向客户端发送数据，而不仅仅只是响应用户的输入请求。而发送数据是在一个已有的 单连接上进行的。因此可以大大降低发送数据的延迟时间（建立connection的开销，以及客户端发送请求的等待时间）。 Comet技术在HTTP上有好多种实现方式，不全介绍。

• 长轮询Long-poling

客户端发送给服务器的请求，如果服务器没有数据，可以一直由服务器hold住，直到服务端有数据才会响应给客户端。这样做明显减少了客户端的请求数，大大减少的服务器的压力，节省了带宽资源。更重要的是真正实现了又服务器向客户端push数据。

这种长轮询方式仍是基于HTTP，然而由于HTTP是面向无连接的，如果一次request直到到了超时时间服务器仍没有数据响应，连接就会断开。 长轮询的实现原理相当于做了一个超时非常长的request并且在超时错误的代码中不断的执行自己，一旦接受到数据后再重新发起请求。

• 流（Streaming）

由下图可以看出客户端一旦建立连接，服务端就会给客户端猛推数据，客户端每次接收到数据不会释放连接或者再次发送请求。直到连接超时客户端会再次建立连接接收数据。

• Websocket 　　 WebSocket 是HTML5一种新的协议。基于TCP之上定义了帧协议。它是实现了浏览器与服务器的全双工通信。 在 WebSocket API 中，浏览器和服务器只需要要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。