Web异步与实时交互-iframe AJAX WebSocket开发实战.docx

《Web异步与实时交互-iframe AJAX WebSocket开发实战.docx》由会员分享，可在线阅读，更多相关《Web异步与实时交互-iframe AJAX WebSocket开发实战.docx（97页珍藏版）》请在优知文库上搜索。

1、Web异步与实时交互iframeAJAXWebSOCket开发实战1 .第1章Web交互开发相关技术概述2 .第2章iframe实现模拟异步交互3 .第3章iframe应用案例分析4 .第4章AJAX实现异步后台传输技术5 .第5章AJAX应用案例分析6 .第6章WebSoekel实现主动推送交互7 .第7章WebSe)Cket聊天室8 .第8章若干异步传输技术及交互方式的综合测试与分析9 .欢迎来到异步社区！10 .看完了第1章Web交互开发相关技术概述Web交互开发中的异步、实时Web交互技术，是当前Web应用技术研究领域的新热点之-O本章首先对传统Web交互技术进行了简单介绍，进一步从W

2、eb异步交互技术和Web实时交互方式两个角度，对Web交互开发中的异步、实时等系列技术进行了概要介绍、分析，并给出了本书的思路及内容安排。1.1 基于HTTP协议的Web交互HTTP协议（HyperTextTransportPotocol,超文本传输协议），是基于服务器/客户端模式的无连接、无状态的协议。基于HTTP协议的Web应用中，所有的请求是由客户端发起的，服务器处于被动响应的地位。然而，服务器却相当于是信息的发布者，当有新信息产生时，服务器并不能主动将新信息发送给客户端，必须等待客户端主动发起访问请求建立连接后才能发送给客户端。当遇到实时监控、即时通信、在线互动等的Web交互开发需求（

3、如设备监控、聊天室、股票行情等需求）时，传统的Web交互技术显得力不从心。最初，客户端只能通过设定自动刷新时间的方式（如使用meta标签，或通过JaVaSCriPt代码进行设定）使浏览器主动刷新，向服务器端发送请求，来获取服务器端的新信息。这种方式有以下几个缺点。（1）刷新页面的时候，网页会呈现一片空白，影响用户的体验。（2）在多数情况下页面中需要更新的信息只是很小一部分，其他信息不变。这样，在刷新整个页面时，传送了额外的信息，使得页面刷新速度变慢，并增加了网络的负担。（3）由于客户端隔一段时间才发送一次请求，并不能实时获得服务器端的新信息，有一定延迟。其中，问题（1）（2）可以通过1.2节中

4、介绍的Web异步技术来解决；问题（3）可以通过1.3节中介绍的Web实时交互技术来解决。1.2 Web异步交互技术iframeAJAX及WebSOCket随着Web交互技术的发展，出现了使用iframe模拟异步传输，来实现局部刷新页面获取数据的功能，从而解决1.1节中的问题（1）（2）oiframe是一种HTML标记，它会创建包含另外一个文档的内联框架，通过iframe框架可以在当前页面中显示其他页面的信息。这时将iframe的SrC属性设置为对另外一个页面的连接请求，并在当前页面中通过JaVaSCriPt动态更新iframe的内容，就可以将服务器端的数据响应到客户端，而不会出现主页面一片空白

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

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

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

8、入的研究和分析。1.3 Web实时交互方式轮询、长轮询、长连接及推送如何实时获取服务器端的最新数据，是Web实时交互关注的内容。在介绍Web实时交互方式前，先来具体了解HTTP的通信机制，为之后概念的精准定义做铺垫。HTTP通信过程可分为4步。第1步：HTTP是基于传输层的TCP协议，在HTTP工作开始之前，Web浏览器首先要通过网络与Web服务器在TCP层建立连接。在TCP层进行“三次握手”之后，建立了TCP连接，此时HTTP就可以进行传输了（注意，由于HTTP为无连接、无状态的协议，在本书之后的章节内容中，若提到打开、保持或关闭连接时，其中的“连接”均指TCP层的连接）。第2步：建立连接后

9、，客户端发送一个请求给服务器。第3步：服务器接到请求后，给予相应的响应信息。第4步：客户端接收服务器所返回的信息通过浏览器显示在用户的显示屏上，然后客户端与服务器断开连接。需要注意的是，在第4步服务器响应请求后是否断开连接，要看协议版本（HTTPLO协议在服务器响应后，会关闭连接；HTTPLl协议在服务器响应后，默认会保持连接，直到超时或出错），要看是否客户端主动请求断开连接、要看是否服务器端主动断开连接，要看是否出错或是否连接超时等对连接进行断开。在很多情况下，保持住连接，有以下两点好处。（1）客户端和服务器可以继续通过保持住的连接发送请求及响应，节省了为每个请求建立新连接所需的时间、资源。

10、这在客户端内存、CPU等资源比较有限，或服务器端需要处理大量并发请求时，保持连接，重用该连接的传输通道是非常有必要的技术手段。（2）当客户端向服务器端发送请求后，服务器端若无需要响应给客户端的最新信息时，阻塞该请求不进行响应，并保持住连接；等到服务器端有信息需要响应该客户端时，使用保持住的连接进行响应。该技术手段属于实时Web交互技术，可以有效解决1.1节问题（3）中实时更新服务器端信息的需求。基于上述基础知识，在大量分析相关Web实时交互技术的基础上，总结并清晰定义4种Web交互技术，即轮询、长轮询、长连接及推送。 轮询：客户端定时发送请求，服务器端接收到客户端请求后，马上进行响应，并关闭连

11、接。 长轮询：客户端发送请求，服务器端接收到客户端请求后进行阻塞，并保持连接；当服务器端有数据需要响应时，使用保持住的连接进行响应，并关闭连接。 长连接：客户端发送请求，服务器端接收到客户端请求后进行阻塞，并保持连接；当服务器端有数据需要响应时，使用保持住的连接进行响应，并保持住连接。 推送：客户端与服务器端建立连接后，服务器端可以直接将数据推送给客户端。其中，轮询是不断、循环使用基于HTTP协议的传统Web交互方式对服务器端数据进行获取，但正如1.1节所述，其在满足实时更新服务器端信息时有一定延迟。除此之外，长轮询、长连接及推送都可以满足实时更新服务器端信息，属于实时Web交互技术的范畴。本

12、节中介绍的iframe、AJAX和WebSoCket是三项Web异步交互技术，可使用轮询、长轮询、长连接及推送4种Web实时交互方式，与服务器进行交互。1.4内容安排本书以介绍iframe、AJAX和WebSoCket三项Web异步交互技术为基本主线，在此基础上，进一步对iframe、AJAX和WebSoCkel分别通过轮询、长轮询、长连接和推送方式，实现对Web交互时的性能进行测试和深入分析。章节内容安排为，第2章到第7章主要介绍上述三项技术的相关知识、关键代码解析以及案例实现，重点在技术知识讲解、技术上手应用方面；第8章，是以前7章内容为基础，对相关理论、技术细节、不同方案进行进一步深入地

13、测试、分析，目的在于使读者更加清晰、深入地了解三项Web异步交互技术及4种Web交互技术，在面对不同系统开发需求时，可以根据本书提供的测试分析中的各项性能指标，进行综合考虑，并最终设计、确定技术方案0第2章iframe实现模拟异步交互最初，客户端只能通过设定自动刷新时间的方式(如使用meta标签，或通过JaVaSCriPt代码进行设定)使浏览器主动刷新，向服务器端发送请求，以轮询的方式获取服务器端的最新信息。通常情况下，用户要获取最新的信息，必须刷新浏览器中的整个页面来获取服务器端的响应数据。但是，在多数情况下页面中需要更新的信息只是很小一部分，其他信息不变。这样，在刷新整个页面时，不仅传送了

14、额外的信息，增加了网络的负担，且刷新页面的同时，网页会呈现一片空白，给用户的视觉体验带来严重的影响。iframe技术模拟实现了异步交互技术，有效解决了上述问题。本章介绍了利用iframe实现模拟异步交互技术的相关基础知识、工作原理、关键代码及基本案例。2.1 简介服务器端响应时间是用户体验中关键的一部分。为了解决之前技术更新页面时，服务器端响应时间长、页面刷新速度慢、用户体验度差等问题，使用iframe模拟异步交互技术来实现局部刷新页面获取数据。iframe是一种HTML标签，它会创建包含另外一个文档的内联框架。通过iframe框架可以在当前页面中显示其他页面的信息。这时将iframe的SrC

15、属性设置为对另外一个页面的长连接请求，并在当前页面中通过JaVaSCriPt动态更新iframe的内容，即可将服务器端响应的数据无刷新显示在主页面。通过iframe实现的模拟异步交互技术，可以应用于聊天室、实时状态监控、股票行情等需要实时刷新的应用场景。2.2 相关关键技术及工作原理2.2.1 DOMDOM(DocumentObjectModel)即文档对象模型。DOM是与系统平台和编程语言无关的W3C官方标准。W3C对DoM的定义是：“一个与系统平台和编程语言无关的接口，程序和脚本可以通过这个接口动态地对文档的内容、结构和样式进行访问和修改。”DOM本质上是一个树形结构模型，它将整个页面映射

16、为一个由层次节点组成的文档。每个节点都有一系列的子节点；每个子节点都有唯一的父节点；节点又分为元素节点和文本节点两种，元素节点中有属性。DoM可以根据节点之间的关系对文档进行操作。程序开发人员可以利用DoM技术实现动态地创建文档，遍历文档结构，添加、修改、删除文档内容等。DoM技术实现了用户页面动态地变化，使得页面的可交互性大大地增强。目前，DoM包括以下3个部分。CoreDOMCOreDOM是针对任意结构文档的标准对象模型，它所定义的对象已经可以表达出任何HTML和XML文档中的数据。 HTMLDOMHTMLDe)M是针对HTML的文档对象模型，它将所有的HTML元素定义为对象，Web开发人员可以通过对象的方法来访问并操作HTML文档。 XMLDOMXMLDoM是针对XML的文档对象模型，它定义了