开篇:润墨网以专业的文秘视角,为您筛选了一篇浅析网页无刷新技术范文,如需获取更多写作素材,在线客服老师一对一协助。欢迎您的阅读与分享!
摘要:网页无刷新技术实现了局部数据更新而不刷新整个页面,减轻了服务器处理程序的压力,节省了网络带宽,减少了用户等待时间,提升了用户体验。该文介绍并分析了常见的三种网页无刷新技术,最后对这几种技术进行比较。
关键词:无刷新;隐藏iframe;浏览器插件;ajax
中图分类号:TP311 文献标识码:A 文章编号:1009-3044(2014)11-2562-03
Abstract: The web technology without refresh to realize the local data update without to refresh the whole page, reduces the server process pressure, saves network bandwidth, reduces user waiting time, and improves the user experience. This article introduced and analyzed 3 common web technologies without refresh , finally, compared to these 3 kinds of Technology.
Key words: no refresh; hidden iframe; browser plugin; ajax
传统网页在点击超链接或者按钮后需要重新加载整个页面,在加载完成之前有的区域是空白的,影响了用户体验。特别是在网络不是很顺畅的情况下,等待时间很长。加上现在移动设备的流行,GSM网络甚至一般3G网络的速度还比较缓慢的情况下,如果需要加载整个网页,就会大大消磨用户的耐心。在此背景下,出现了不需要刷新整个页面只更新局部的网页无刷新技术。
1 传统网页加载方式
传统网页加载方式为客户端(即浏览器)提交URL请求,服务器收到请求之后,将对应的网页文件以HTML格式整个发送到客户端,客户端解释这些HTML代码,并将网页显示出来,如图1所示。这个过程哪怕是局部区域的数据更新都需要客户端向远程服务器提交整个页面的刷新请求,这样在远程服务器上就会对整个页面的所有数据进行运算。另外,远程服务器返回用户的数据是整个页面,这样会占用大量互联网带宽,并且还要耗费客户端资源来重绘页面[1]。
这种传统的加载方式在网速较慢的情况下,使用户的等待时间加长。移动设备在网速普遍较慢的情况下等待时间更长,降低了用户体验。网页无刷新技术即不刷新整个页面只更新局部范围数据的出现使得这一尴尬局面得到大大改善。用户在请求更新数据的时候服务器只需要将局部范围的数据返回客户端显示即可,提高了系统响应速度,减少了用户的等待时间。
2.2 客户端插件技术
客户端插件是一种遵循浏览器规范的应用程序接口编写出来的程序,Web浏览器能够直接调用插件程序,用于处理特定类型的文件。客户端插件也可以直接和Web服务器通信,达到无刷新实现数据更新的目的。
客户端插件有Java的Java Applet、Microsoft的ActiveX、Adobe的Flash和Flex等。Java Applet是用Java语言编写的嵌入到网页中的小应用程序,它可以直接与用户进行交互,负责处理用户请求以及从服务器端接收的数据;ActiveX插件以前也叫做OLE控件或OCX控件,它是一些软件组件或对象,将其插入到Web网页中来实现与用户的交互和与服务器的通信;Flex是由Macromedia公司在2004年3月的,基于其专有的Macromedia Flash平台,它是一种很轻便的客户端技术,只要客户端安装了Flash Player就可以使用Flex技术,Flex应用程序采用了“一次加载,多次使用”的原则,Flex客户端是一个整体的应用,不是由多个页面组成的,天生就是不需要刷新的。Flex客户端是页面加载开始就整个下载到客户端了,其中的一些模块也可以采用延迟加载[3]。
2.3 ajax技术
Ajax技术是当前最热门的网页技术之一,其全称是Asynchronous JavaScript And XML, 即异步JavaScript 和XML。它是结合了JavaScript、XHTML 和CSS、DOM、XML 和XSTL、XMLHttpRequest 等编程技术以新的方式组合而成, Ajax 包含: 基于XHTML 和CSS 标准的表示;使用Document Object Model 进行动态显示和交互;使用XMLHttpRequest 与服务器进行异步通信;使用XML 和XSLT 技术实现数据的交换和维护;使用JavaScript 绑定一切[4]。它在客户端创建XmlHttpRequest对象,由这个对象向服务器提交请求,在收到返回信息后,由Javascript利用DOM(Document Object Model,文档对象模型)来更新局部网页内容。
3 三种无刷新技术比较
尽管这三种技术都可以实现无刷新更新局部区域数据,但是它们之间还是有一定的区别的。隐藏iframe方式不是所有的浏览器都支持;而浏览器插件的方式也存在这样的问题,如果用户选择不安装插件,那么这种方式也失去了效果;浏览器兼容性最好的是ajax,几乎所有的浏览器都支持javascript,而且创建XmlHttpRequest对象针对不同的浏览器又有不同的创建方式。所以目前ajax广泛应用于目前的Web网站,从门户网站到个人网站、微博、博客等,到处都能见到ajax的影子。
4 结束语
正因为网页无刷新技术的出现,开发人员可以像开发桌面软件一样开发网页程序,各种网页应用大放异彩,丰富了网络环境。网页无刷新技术减轻了服务器压力,节省了网络带宽,网页在各种条件下特别是手机网络中能够快速显示,减少了用户等待时间,提升了用户体验。
参考文献:
[1] 胡飞,杨华千,彭涛,蒲昌玖.无刷新Web远程过程调用技术综述[J].重庆工商大学学报:自然科学版,2012(8):52-55.
[2] HTML 标签[OL]. http://.cn/tags/tag_iframe.asp.
[3] 王丽,杨雪,刘文苗.基于Flex技术的虚拟演示实验系统[J].实验室研究与探索,2011(2):64-67.
[4] 于虹. Ajax无刷新技术[J].电脑知识与技术,2009(6):4782-4784.