《Web异步与实时交互——iframe AJAX WebSocket开发实战》—— 1.2 Web异步交互技术——iframe、AJAX及WebSocket

简介:

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

1.2 Web异步交互技术——iframe、AJAX及WebSocket

随着Web交互技术的发展,出现了使用iframe模拟异步传输,来实现局部刷新页面获取数据的功能,从而解决1.1节中的问题(1)(2)。iframe是一种HTML标记,它会创建包含另外一个文档的内联框架,通过iframe框架可以在当前页面中显示其他页面的信息。这时将iframe的src属性设置为对另外一个页面的连接请求,并在当前页面中通过JavaScript动态更新iframe的内容,就可以将服务器端的数据响应到客户端,而不会出现主页面一片空白,等待刷新的现象。并且,仅刷新iframe框架而不是主页面,也减少了页面刷新的内容,这在一定程度上提高了页面刷新速度。

然而,iframe是通过刷新隐藏框架,获取响应后通过DOM技术对主页内容进行更新——这实际上是模拟的异步交互,并非真正的异步交互。随着Web交互技术的发展,一个真正意义上的异步交互技术应运而生——AJAX。这种技术通过异步通信和响应,来完成页面的局部刷新,以此改善传统Web应用中大量不必要的整页刷新,从而提高响应的效率,让用户更快地得到操作结果,减少中间的等待时间。同时AJAX作为浏览器端技术,极大地改善页面的表现和交互方式,可以让传统的Web应用程序界面具备桌面应用程序般的表现力,从而为用户提供更人性的服务。

但是,iframe、AJAX都是基于HTTP协议进行Web交互。HTTP协议的工作模式对于其构建实时Web应用存在诸多的限制——只能先由客户端提交请求,服务器端响应请求,并非是由服务器向客户端进行主动推送。随着HTML 5标准的推出,这一状况得到了改善,其提出了一种新的浏览器服务器通信协议——WebSocket协议。通过该协议可以在浏览器和服务器之间构建一条全双工的通信连接,可以支持服务器端向客户端主动推送信息,实现实时刷新页面的功能。WebSocket协议不仅解决了1.1节中的问题(1)(2),还解决了1.1节问题(3)中提出的实时性问题。

综上所述,AJAX作为当今非常热门、流行的异步传输技术,已被行业广泛采用。但在AJAX这种真正的异步传输技术出现之前,一般使用iframe模拟实现异步传输,目的是保证网页在不刷新的情况下进行数据传输更新网页内容,从而提高用户的体验。目前,iframe实现模拟异步传输这一技术,仍然经常被程序员使用。而WebSocket技术,作为HTML 5标准中的亮点,真正实现了“服务器推”的概念。其实际上是对AJAX技术的跨越式优化。但由于目前该技术较新(AJAX应用较成熟)、浏览器支持、WebSocket对服务器端性能的影响等方面的因素,尚未被大范围应用。因此,出现了这些异步传输技术在应用市场上被共同使用的情况,有必要对这3种异步技术进行深入的研究和分析。

相关文章
|
29天前
|
监控 JavaScript 前端开发
《理解 WebSocket:Java Web 开发的实时通信技术》
【4月更文挑战第4天】WebSocket是Java Web实时通信的关键技术,提供双向持久连接,实现低延迟、高效率的实时交互。适用于聊天应用、在线游戏、数据监控和即时通知。开发涉及服务器端实现、客户端连接及数据协议定义,注意安全、错误处理、性能和兼容性。随着实时应用需求增加,WebSocket在Java Web开发中的地位将更加重要。
|
29天前
|
网络协议 算法
WebSocket 技术详解
【2月更文挑战第12天】
98 1
|
29天前
|
前端开发 JavaScript BI
Django教程第5章 | Web开发实战-数据统计图表(echarts、highchart)
使用echarts和highcharts图表库实现折线图、柱状图、饼图和数据集图
85 2
|
29天前
|
前端开发 JavaScript API
Ajax技术的秘密揭秘:异步传输,高效交互
Ajax技术的秘密揭秘:异步传输,高效交互
|
28天前
|
网络协议 JavaScript 前端开发
WebSocket:实现客户端与服务器实时通信的技术
WebSocket:实现客户端与服务器实时通信的技术
|
3天前
|
监控 网络协议 JavaScript
WebSocket技术详解与应用指南
WebSocket是全双工TCP协议,解决HTTP的单向通信问题,允许服务器主动推送信息。本文档介绍了WebSocket的基本概念、工作原理(基于HTTP握手,通过帧进行数据通信)、应用场景(实时聊天、在线游戏、数据监控等)和实现方法(客户端使用JavaScript API,服务器端有多种编程语言库支持)。学习WebSocket能提升Web应用的实时性和交互性。
10 1
|
20天前
|
应用服务中间件 数据库 nginx
Python Web开发实战:从搭建博客到部署上线
使用Python和Flask初学者指南:从搭建简单博客到部署上线。文章详细介绍了如何从零开始创建一个博客系统,包括准备Python环境、使用Flask和SQLite构建应用、设计数据库模型、创建视图函数和HTML模板,以及整合所有组件。最后,简述了如何通过Gunicorn和Nginx将应用部署到Linux服务器。
|
29天前
|
Java 应用服务中间件 API
【SpringBoot技术专题】「开发实战系列」Undertow web容器的入门实战及调优方案精讲
【SpringBoot技术专题】「开发实战系列」Undertow web容器的入门实战及调优方案精讲
74 0
|
29天前
|
存储 数据库 Python
Django教程第6章 | web开发实战-文件上传(导入文件、上传图片)
web应用实战:导入文件解析到DB,上传图片【2月更文挑战第25天】
65 0
Django教程第6章 | web开发实战-文件上传(导入文件、上传图片)
|
29天前
|
存储 前端开发 JavaScript
Django教程第4章 | Web开发实战-三种验证码实现
手动生成验证码,自动生成验证码,滑动验证码。【2月更文挑战第24天】
53 0
Django教程第4章 | Web开发实战-三种验证码实现