《Web异步与实时交互——iframe AJAX WebSocket开发实战》—— 2.1 简介

2.1 简介

服务器端响应时间是用户体验中关键的一部分。为了解决之前技术更新页面时,服务器端响应时间长、页面刷新速度慢、用户体验度差等问题,使用iframe模拟异步交互技术来实现局部刷新页面获取数据。iframe是一种HTML标签,它会创建包含另外一个文档的内联框架。通过iframe框架可以在当前页面中显示其他页面的信息。这时将iframe的src属性设置为对另外一个页面的长连接请求,并在当前页面中通过JavaScript动态更新iframe的内容,即可将服务器端响应的数据无刷新显示在主页面。

通过iframe实现的模拟异步交互技术,可以应用于聊天室、实时状态监控、股票行情等需要实时刷新的应用场景。

时间: 2024-10-30 07:49:24

《Web异步与实时交互——iframe AJAX WebSocket开发实战》—— 2.1 简介的相关文章

《Web异步与实时交互——iframe AJAX WebSocket开发实战》—— 导读

前言 Web异步与实时交互--iframe AJAX WebSocket开发实战 本书思路及意义 异步交互.实时交互作为Web交互技术中的热点和难点,越来越多地被研究和使用. 在Web异步交互方面,AJAX作为当今非常热门和流行的异步传输技术,已被行业广泛采用.但在AJAX这种真正的异步传输技术出现之前,一般使用iframe模拟实现异步传输,目的是保证网页在不刷新的情况下进行数据传输更新网页内容,从而提高用户的体验.目前,iframe实现模拟异步传输这一技术,仍然经常被程序员使用. 而WebSo

《Web异步与实时交互——iframe AJAX WebSocket开发实战》—— 第1章 Web交互开发相关技术概述

第1章 Web交互开发相关技术概述 Web异步与实时交互--iframe AJAX WebSocket开发实战Web交互开发中的异步.实时Web交互技术,是当前Web应用技术研究领域的新热点之一.本章首先对传统Web交互技术进行了简单介绍,进一步从Web异步交互技术和Web实时交互方式两个角度,对Web交互开发中的异步.实时等系列技术进行了概要介绍.分析,并给出了本书的思路及内容安排.

《Web异步与实时交互——iframe AJAX WebSocket开发实战》—— 第2章 iframe实现模拟异步交互

第2章 iframe实现模拟异步交互 Web异步与实时交互--iframe AJAX WebSocket开发实战最初,客户端只能通过设定自动刷新时间的方式(如使用标签,或通过JavaScript代码进行设定)使浏览器主动刷新,向服务器端发送请求,以轮询的方式获取服务器端的最新信息.通常情况下,用户要获取最新的信息,必须刷新浏览器中的整个页面来获取服务器端的响应数据.但是,在多数情况下页面中需要更新的信息只是很小一部分,其他信息不变.这样,在刷新整个页面时,不仅传送了额外的信息,增加了网络的负担,

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

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

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

1.3 Web实时交互方式--轮询.长轮询.长连接及推送 如何实时获取服务器端的最新数据,是Web实时交互关注的内容.在介绍Web实时交互方式前,先来具体了解HTTP的通信机制,为之后概念的精准定义做铺垫.HTTP通信过程可分为4步. 第1步:HTTP是基于传输层的TCP协议,在HTTP工作开始之前,Web浏览器首先要通过网络与Web服务器在TCP层建立连接.在TCP层进行"三次握手"之后,建立了TCP连接,此时HTTP就可以进行传输了(注意,由于HTTP为无连接.无状态的协议,在本书

《Web异步与实时交互——iframe AJAX WebSocket开发实战》—— 1.4 内容安排

1.4 内容安排 本书以介绍iframe.AJAX和WebSocket三项Web异步交互技术为基本主线,在此基础上,进一步对iframe.AJAX和WebSocket分别通过轮询.长轮询.长连接和推送方式,实现对Web交互时的性能进行测试和深入分析. 章节内容安排为,第2章到第7章主要介绍上述三项技术的相关知识.关键代码解析以及案例实现,重点在技术知识讲解.技术上手应用方面:第8章,是以前7章内容为基础,对相关理论.技术细节.不同方案进行进一步深入地测试.分析,目的在于使读者更加清晰.深入地了解

《Web异步与实时交互——iframe AJAX WebSocket开发实战》—— 1.1 基于HTTP协议的Web交互

1.1 基于HTTP协议的Web交互 HTTP协议(Hyper Text Transport Potocol,超文本传输协议),是基于服务器/客户端模式的无连接.无状态的协议.基于HTTP协议的Web应用中,所有的请求是由客户端发起的,服务器处于被动响应的地位.然而,服务器却相当于是信息的发布者,当有新信息产生时,服务器并不能主动将新信息发送给客户端,必须等待客户端主动发起访问请求建立连接后才能发送给客户端. 当遇到实时监控.即时通信.在线互动等的Web交互开发需求(如设备监控.聊天室.股票行情

《Web异步与实时交互——iframe AJAX WebSocket开发实战》—— 2.2 相关关键技术及工作原理

2.2 相关关键技术及工作原理 2.2.1 DOM DOM(Document Object Model)即文档对象模型.DOM是与系统平台和编程语言无关的W3C官方标准.W3C对DOM的定义是:"一个与系统平台和编程语言无关的接口,程序和脚本可以通过这个接口动态地对文档的内容.结构和样式进行访问和修改." DOM本质上是一个树形结构模型,它将整个页面映射为一个由层次节点组成的文档.每个节点都有一系列的子节点:每个子节点都有唯一的父节点:节点又分为元素节点和文本节点两种,元素节点中有属性

《Web异步与实时交互——iframe AJAX WebSocket开发实战》—— 2.3 示例程序

2.3 示例程序 下面使用iframe模拟异步交互技术,使用轮询的方式,实现数字累加功能. 2.3.1 客户端关键代码客户端代码主要包含3个部分:定时向服务器端发送请求.接收服务器端返回的信息及展示服务器端返回的信息. 关键代码如下所示: <html> <head> <script type="text/javascript"> function addMessage(counts){ //将服务器端发送回的信息更新到文本框 var messageE