《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种异步技术进行深入的研究和分析。