《Web异步与实时交互——iframe AJAX WebSocket开发实战》—— 1.3 Web实时交互方式——轮询、长轮询、长连接及推送

简介:

本节书摘来异步社区《Web异步与实时交互——iframe AJAX WebSocket开发实战》一书中的第1章,第1.3节,作者: 赵振 , 王顺 , 于梦竹 , 李泽 , 侯法超 , 刘备 , 时国森 , 李照耀 , 王世军,更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.3 Web实时交互方式——轮询、长轮询、长连接及推送

如何实时获取服务器端的最新数据,是Web实时交互关注的内容。在介绍Web实时交互方式前,先来具体了解HTTP的通信机制,为之后概念的精准定义做铺垫。HTTP通信过程可分为4步。

第1步:HTTP是基于传输层的TCP协议,在HTTP工作开始之前,Web浏览器首先要通过网络与Web服务器在TCP层建立连接。在TCP层进行“三次握手”之后,建立了TCP连接,此时HTTP就可以进行传输了(注意,由于HTTP为无连接、无状态的协议,在本书之后的章节内容中,若提到打开、保持或关闭连接时,其中的“连接”均指TCP层的连接)。

第2步:建立连接后,客户端发送一个请求给服务器。

第3步:服务器接到请求后,给予相应的响应信息。

第4步:客户端接收服务器所返回的信息通过浏览器显示在用户的显示屏上,然后客户端与服务器断开连接。

需要注意的是,在第4步服务器响应请求后是否断开连接,要看协议版本(HTTP 1.0协议在服务器响应后,会关闭连接;HTTP 1.1协议在服务器响应后,默认会保持连接,直到超时或出错),要看是否客户端主动请求断开连接、要看是否服务器端主动断开连接,要看是否出错或是否连接超时等对连接进行断开。

在很多情况下,保持住连接,有以下两点好处。

(1)客户端和服务器可以继续通过保持住的连接发送请求及响应,节省了为每个请求建立新连接所需的时间、资源。这在客户端内存、CPU等资源比较有限,或服务器端需要处理大量并发请求时,保持连接,重用该连接的传输通道是非常有必要的技术手段。

(2)当客户端向服务器端发送请求后,服务器端若无需要响应给客户端的最新信息时,阻塞该请求不进行响应,并保持住连接;等到服务器端有信息需要响应该客户端时,使用保持住的连接进行响应。该技术手段属于实时Web交互技术,可以有效解决1.1节问题(3)中实时更新服务器端信息的需求。

基于上述基础知识,在大量分析相关Web实时交互技术的基础上,总结并清晰定义4种Web交互技术,即轮询、长轮询、长连接及推送。

轮询:客户端定时发送请求,服务器端接收到客户端请求后,马上进行响应,并关闭连接。

长轮询:客户端发送请求,服务器端接收到客户端请求后进行阻塞,并保持连接;当服务器端有数据需要响应时,使用保持住的连接进行响应,并关闭连接。

长连接:客户端发送请求,服务器端接收到客户端请求后进行阻塞,并保持连接;当服务器端有数据需要响应时,使用保持住的连接进行响应,并保持住连接。

推送:客户端与服务器端建立连接后,服务器端可以直接将数据推送给客户端。

其中,轮询是不断、循环使用基于HTTP协议的传统Web交互方式对服务器端数据进行获取,但正如1.1节所述,其在满足实时更新服务器端信息时有一定延迟。除此之外,长轮询、长连接及推送都可以满足实时更新服务器端信息,属于实时Web交互技术的范畴。

本节中介绍的iframe、AJAX和WebSocket是三项Web异步交互技术,可使用轮询、长轮询、长连接及推送4种Web实时交互方式,与服务器进行交互。

相关文章
|
1月前
|
前端开发 JavaScript Java
使用Ajax进行异步交互:提升Java Web应用的用户体验
【4月更文挑战第3天】Ajax技术在Web开发中提升UX,通过与服务器异步交互实现页面局部更新,无需完整刷新。核心组件包括XMLHttpRequest、JavaScript、HTML/CSS及服务器端脚本。在Java Web应用中,可使用原生JavaScript或框架如jQuery、AngularJS实现Ajax请求。Ajax减少页面刷新,实现实时数据更新,即时表单验证和动态UI,显著改善用户体验,是现代Web开发不可或缺的一部分。
|
4月前
|
前端开发 JavaScript API
Ajax技术的秘密揭秘:异步传输,高效交互
Ajax技术的秘密揭秘:异步传输,高效交互
|
10月前
|
前端开发 数据可视化 大数据
Echarts通过ajax获取数据定时更新轮询的解决方案及问题分析
Echarts通过ajax获取数据定时更新轮询的解决方案及问题分析
176 0
|
6天前
|
XML 前端开发 安全
【专栏:HTML 进阶篇】HTML 表单验证与 AJAX 交互
【4月更文挑战第30天】本文探讨了HTML表单验证和AJAX在现代网页开发中的重要性。HTML表单验证通过必填、数据格式和范围验证确保用户输入的准确性,而AJAX则实现异步通信,提供动态数据加载、局部更新和实时交互。两者的结合优化了表单处理,提高用户体验并减少服务器负担。实际应用包括在线注册、购物车系统和表单反馈。然而,开发者需注意浏览器兼容性、错误处理和安全性问题。掌握这些技术,能打造更智能、高效的网页应用,为用户提供更好的体验。在数字化时代,HTML表单验证和AJAX是网页创新与进步的关键。
|
6天前
|
XML 前端开发 JavaScript
【PHP 开发专栏】PHP 与 Ajax 交互开发
【4月更文挑战第30天】本文探讨了PHP与Ajax交互在Web开发中的应用。Ajax负责客户端的异步请求,PHP处理服务器端业务逻辑。两者结合实现高效、流畅的用户体验。文中阐述了Ajax的工作原理,PHP的角色,数据传输格式选择,并提供了发送Ajax请求、PHP处理请求的示例代码。实际应用包括实时数据更新、表单验证和动态内容加载。开发中需注意跨域、数据安全和性能优化。PHP与Ajax的结合将继续在Web开发中发挥重要作用。
|
6月前
ajax+json模拟一个页面多个统计图数据交互
ajax+json模拟一个页面多个统计图数据交互
28 1
|
8月前
|
JavaScript 前端开发 UED
事件处理(Event Handling):构建交互性Web应用的基石
在现代Web应用开发中,交互性是吸引用户的重要因素之一。而事件处理是实现这种交互性的关键。通过响应用户的操作,您可以创造出令人愉悦的用户体验。在本博客中,我们将深入探讨事件处理的概念、不同类型的事件、事件绑定、事件冒泡以及如何有效地使用事件处理来构建交互性强大的Web应用。
110 0
|
8月前
|
安全 中间件 API
详解Django请求与响应:深入理解Web Http交互的核心机制
详解Django请求与响应:深入理解Web Http交互的核心机制
75 0
|
9月前
|
JavaScript 前端开发 Java
【JCEF】如果用JCEF对项目进行web交互
【JCEF】如果用JCEF对项目进行web交互
280 0
|
9月前
|
前端开发
【JCEF】后端通过技术进行web交互
【JCEF】后端通过技术进行web交互
164 0