我们日常使用的互联网产品，少不了前后端数据的交互，Ajax和websocket都是数据交互的利器，那么它们分别是什么？Ajax和websocket是如何完成数据实时交互的？websocket与Ajax轮询的区别又是什么？它们分别的使用场景有哪些？本文将会给出答案。

Ajax

Ajax，即异步JavaScript和XML，是一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新，这意味着可以在不重新加载整个网页的情况下，对网页的部分进行加载更新。

Ajax 的优点在于它在浏览器与web服务器之间使用异步数据传输（HTTP请求），不阻塞用户，核心对象是XMLHTTPRequest。通过这个对象，js可在不重新加载页面的情况下与web服务器交换数据。

websocket

websocket是HTML5一种新的协议，实现了浏览器与服务器全双工通信。其本质是：先通过HTTP/HTTPS协议进行握手后创建一个用于交换数据的TCP连接，服务端与客户端通过此TCP连接进行实时通信。

websocket最大的优点在于——服务器和浏览器可以在给定的时间范围内的任意时刻，互相推送消息。在建立连接之后，服务器可以主动传送数据给浏览器。

Ajax与websocket最大的不同在于：Ajax需要客户端发起请求，websocket服务器和客户端可以互相实时推送消息。

Ajax轮询和websocket的区别

实现浏览器与服务器的实时数据交互，可以通过建立websocket，也可以通过Ajax轮询的方式。

那么这两种方式有什么不同呢？

1. Ajax轮询

Ajax轮询的原理非常简单，就是让浏览器隔几秒就发送一次请求，询问服务器是否有新信息，交互场景如下：

客户端：有没有新信息(Request)

服务端：没有（Response）

客户端：有没有新信息(Request)

服务端：没有（Response）

客户端：有没有新信息(Request)

服务端：没有（Response）

…..

客户端：有没有新信息(Request)

服务端：有了，给你（Response）

…..

我们可以看出：Ajax轮询这种方式，在不断地建立HTTP连接，然后等待服务端处理，服务端不会主动联系客户端，只有客户端发起。

这种方式是有很大缺陷的，这种方式会非常的耗费资源，Ajax轮询需要服务器有很快的处理速度。

所以，很有可能发生如下的情景：

客户端：有没有新信息(Request)

服务端：没有（Response）

客户端：有没有新信息(Request)

服务端：请稍候再试~（503错误）

客户端：有没有新信息(Request)

服务端：请稍候再试~（503错误）

…..

2. websocket连接

通过上述，我们可以看出Ajax轮询并不是最好的方式，轮询需要消耗服务器很多的资源。所以，在这种情况下，websocket出现了，服务端就可以主动推送消息给客户端。

此时的交互情景如下：

客户端：我要建立Websocket协议，需要的服务：chat，Websocket协议版本：17（HTTP Request）

服务端：确认，已升级为Websocket协议

客户端：麻烦有消息的时候推送给我

服务端：好的，有的时候会告诉你的

服务端：消息~消息~消息

服务端：消息~消息~消息

服务端：消息~消息~消息

服务端：收到~收到~收到

…..

只需要经过一次HTTP请求，就可以做到两端源源不断的消息传送了。

那么websocket是如何解决资源消耗的问题呢？

这里是需要经过两层代理的，即HTTP协议在Nginx等服务器的解析下，传送给相应的 Handler（PHP等） 来处理。简单地说，就好比一个速度非常快速的信使（Nginx），他负责把问题转交给相应的客服（Handler）。

本身信使基本上速度是足够的，但是每次都卡在客服（Handler） 了，总是有客服处理速度太慢，导致客服不够。

Websocket就解决了这样一个难题，建立websocket连接后，可以直接跟信使建立持久的连接，有信息的时候客服想办法通知信使，然后信使在统一转交给客户。 这样就可以解决Handler处理速度过慢的问题了。

Ajax和websocket的应用场景

了解了Ajax和websocket的基本概念，那么我们平时会在哪些应用场景应用到这两种技术呢？

1. Ajax的应用场景

Ajax的特点在于异步交互，动态更新web页面，因此Ajax的适用范围是交互较多，频繁读取数据的web应用。

比如如下场景：

（1）用Ajax进行表单数据验证

在填写表单内容时，需要保证数据的唯一性（例如新用户注册填写的用户名），因此必须对用户输入的内容进行数据验证。

使用Ajax技术，可以由XMLHttpRequest对象发出验证请求，根据返回的HTTP响应判断验证是否成功，整个过程不需要弹出新窗口，也不需要将整个页面提交到服务器，快速而又不会加重服务器负担。

（2）按需取数据

在web应用中，经常会用到分类树或树形结构，例如部门结构，文件的分类结构等。

Ajax技术是这样实现树形结构的：

• 在初始化页面时，只获取第一级子分类的数据并显示；
• 当用户点开一级分类的第一节点时，页面会通过Ajax向服务器请求当前分类所属的二级子分类的所有数据；
• 如果再请求已经呈现的二级分类的某一节点时，再次向服务器请求当前分类所属的三级子分类的所有数据，以此类推。

页面会根据用户的操作向服务器请求所需要的数据，这样就不会存在数据的冗余，减少了数据下载总量。同时，更新页面时不需要重新加载全部内容，只更新需要更新的那部分内容即可，大大缩短了用户的等待时间。

（3）自动更新页面

web应用中有很多数据的变化是实时的，例如：最新的新闻，天气预报以及聊天室等等。在Ajax出现之前，用户为了即使了解相应的内容必须不断刷新页面，查看是否有新的内容变化，或者页面本身实现定时刷新的功能。

应用Ajax技术可以改善这种这种情况，页面加载以后，会通过Ajax在后台进行定时的轮询，向服务器发送请求，查看是否有最新的消息（当然这种情况是有弊端的，上面也说到了）。如果有则将新的数据下载并且在页面上进行动态的更新，通过一定的方式通知用户。

2. websocket的应用场景

决定是否需要使用websocket技术的方法其实很简单：

• 你的产品需要提供多个用户相互交流的功能吗？
• 你的产品需要展示服务器端经常变动的数据吗？

如果回答都是肯定的，那么你的产品中就要应用websocket技术了。

常用的应用场景如下：

（1）社交类应用

对社交类的应用的一个好处之处就是——能够即时的知道你的朋友正在做什么？用户是不会想要在数分钟之后，才能知道一个家庭成员在群里发送的红包或者一个朋友给你发的消息。用户是在线的，所以用户收到的消息应该是实时的。

（2）股票基金类应用的价格

金融界瞬息万变——几乎是每毫秒都在发生变化，过时的信息就能导致损失。当我们打开一个股票或基金类应用时，我们想要知道产品实时的价格，而不是10秒前的数据。使用websocket可以实时更新这些数据变化而不需要等待。

（3）基于位置的应用

越来越多的基于位置的应用，都是借用移动设备的GPS功能来实现的。如果一直记录用户的位置，就可以收集到更加细致化的数据。如果需要实时的更新网络数据仪表盘(比如：说运动员的教练需要查看这些数据)，借用websocket可以做到让数据实时刷新。

（4）在线教育类应用

在线教育是学习的不错方式，可以和老师以及其他同学一起交流。websocket技术可以实现多媒体聊天、文字聊天等功能。

总结

我们总结一下，Ajax一般会应用在交互较多，频繁读取数据的web应用中。websocket一般会应用在需要提供多个用户相互交流，或需要实时的展示服务端变动的数据这两种情况。了解了这两项技术，在设计到相关产品功能时，就能应对自如了~

#专栏作家#

流年，人人都是产品经理专栏作家。互联网产品设计师，4年互联网产品设计经验。擅长用户体验设计，喜欢钻研需求功能背后的技术实现方式；在成为综合型产品设计师的道路上不断努力前进！

本文原创发布于人人都是产品经理。未经许可，禁止转载

题图作者提供