AJax技术

Ajax技术在Web开发中的应用初探

字号+ 作者:H5之家 来源:H5之家 2018-03-30 17:04 我要评论( )

论文导读:可以有效地改善用户体验。Ajax技术在Web开发中的应用初探。Ajax技术在Web开发中的应用初探。论文,论文参考。

论文导读:目前在Web应用开发中,Ajax无疑已经成为最能提高用户体验的一种技术。而它在技术方面的优点,如标准公开、跨浏览器和跨平台的兼容性、和Flex和Flash技术很好的集成等特点已经将Ajax推向了更广泛的应用。本文从实际开发的角度出发,解析了Ajax的基本原理。
关键词:AjaxWeb应用,用户体验
 

1 Ajax概述

Ajax是一种用于创建交互式Web应用的开发技术,它不是一种单一的技术,而是几种各自发展的一系列相关技术的有机结合。虽然在利用Ajax时,需要多种技术的支持。论文参考。但值得庆幸的是,您可能已经非常熟悉其中的大部分技术。

下面是Ajax应用程序所用到的基本技术:

n 使用XHTML与CSS的标准表现。

n 使用DOM(Document Object Model)进行动态显示与交互。

n 使用XML和XSLT进行数据交换与操作。

n 使用XMLHttpRequest进行异步数据传输。

n 使用JavaScript将所有这些绑在一起。

2 与传统的Web应用比较

传统的Web应用允许用户端填写表单(form),当送出表单时就向Web服务器发送一个请求。服务器接收并处理传来的表单,然后送回一个新的网页,但这个做法浪费了许多频宽,因为在前后两个页面中的大部分HTML码往往是相同的。由于每次应用的沟通都需要向服务器发送请求,应用的回应时间就依赖于服务器的回应时间。这导致了用户界面的回应比本机应用慢得多。

与此不同,AJAX应用可以仅向服务器发送并取回必需的数据,它使用SOAP或其它一些基于XML的页面服务接口(界面),并在客户端采用JavaScript处理来自服务器的回应,从而达到不用刷新页面就可以更新页面。因为在服务器和浏览器之间交换的数据大量减少(大约只有原来的5%),结果我们就能看到回应(服务器回应)更快的应用(结果)。同时很多的处理工作可以在发出请求的客户端机器上完成,所以Web服务器的处理时间也减少了。

3 Ajax相关技术

前文已经提到,Ajax包含了多种技术。对于大多数Web应用开发者而言,其中的一些技术已经相当熟悉。即便是不够熟悉,这些技术都很容易学习,并不像完整的编程语言那样困难。

3.1 JavaScript

JavaScript是一种轻型的通用解释性脚本语言,其核心已经嵌入目前主流的Web浏览器中。虽然大部分时候看到的JavaScript应用都是在网页中简单地调用页面内置对象和方法,但其实JavaScript是一种具有丰富的面向对象特性的程序设计语言,利用它能够执行许多复杂的任务。

Ajax应用是用JavaScript编写的,如果没有对JavaScript有足有多编程经验或理解,开发Ajax将困难重重。

3.2 CSS

CSS既Cascading Style Sheets(级联样式表)的缩写。论文参考。顾名思义,它是用来进行网页风格设计的。采用CSS对页面进行布局和修饰有以下几个特点。

1)表现和内容相分离

将设计部分剥离出来放在一个独立样式文件中,HTML文件中只存放文本信息。这样的页面对搜索引擎更加友好。

2)提高页面浏览速度

对于同一个页面视觉效果,采用CSS+DIV重构的页面容量要比TABLE编码的页面文件容量小得多,前者一般只有后者的1/2大小。浏览器就不用去编译大量冗长的标签。

3)易于维护和改版

只要简单的修改几个CSS文件就可以重新设计整个网站的页面。

3.3 XMLHttpRequest

在Ajax涉及到的技术中,“最新”并且对于未从接触过Ajax的开发者而言可能最陌生的术语就是XMLHttpRequest对象了。通过这个对象,Ajax可以像桌面应用程序一样只同服务器进行数据层面的交换。XMLHttpRequest对象与服务器交互通常都通过XML来实现,当然也可以是基于文本的其他形式。

XMLHttpRequest其实是一个JavaScript对象。在客户端,我们很容易就可以创建一个XMLHttpRequest对象。

3.4 DOM

DOM是Document Object Model文档对象模型的缩写。根据W3C DOM规范,DOM是一种与浏览器,平台,语言无关的接口,使得你可以访问页面其他的标准组件。简单理解,DOM解决了Netscape的Javascript和Microsoft的Jscript之间的冲突,给予web设计师和开发者一个标准的方法,让他们来访问他们站点中的数据、脚本和表现层对像。

DOM是以层次结构组织的节点或信息片断的集合。这个层次结构允许开发人员在树中导航寻找特定信息。分析该结构通常需要加载整个文档和构造层次结构,然后才能做任何工作。由于它是基于信息层次的,因而 DOM 被认为是基于树或基于对象的。

利用JavaScript操作DOM,Ajax应用就能够实时修改用户界面,例如有效地重绘页面的某一部分,或者修改表格的内容。

4 Ajax使用的场合

Ajax虽然可以实现无刷新更新页面内容,但是也不是什么地方都可以使用,它主要应用在交互较多、频繁读数据、数据分类良好的Web应用中。

4.1 适用场合

1)表单驱动的场合

使用Ajax,可以随时提交异步数据,并在页面上快速显示更新结果,而不需要刷新整个页面。

2)深层次的树的导航

深层次的级联菜单(树)的遍历是一项非常复杂的任务。使用JavaScript来控制显示逻辑,使用Ajax延迟加载更深层次的数据可以有效地减轻服务器的负担。

3)快速的用户与用户之间的交流响应

在众多人参与交流讨论的场合下,为了避免用户主动刷新页面以获取新的结果,Ajax是最好的选择。

4)类似投票无关痛痒的场合

对于类似这样的场合,如果提交过程较长,很多用户就会因为等待时间太长而不参与。但是利用Ajax可以把时间控制在很短的时间内,从而吸引更多的用户参与。

5)对数据进行过滤和操纵相关数据的场合

对数据使用过滤器,按照某一字段排序,开关过滤器等,任何要求具备很高交互性数据操纵的场合都应该使用JavaScript。在每次数据更新后,在对其进行查找和处理需要耗费较多的时间,而Ajax可以加速这个过程。

6)普通的文本输入提示和自动完成的场合

在文本框等输入表单中给予输入提示,或者自动完成,可以有效地改善用户体验。论文参考。尤其对于那些自动完成的数据可能来自于服务器端的场合,Ajax是很好的选择。

2.不适用场合

1)部分简单的表单

虽然表单提交可以从Ajax获取最大的一处,但太多简单的表单极少能从Ajax得到明显改善。

2)搜索

有些使用了Ajax的搜索引擎不允许使用浏览器的后退按钮来查看前一次的搜索结果,这对已经养成搜索习惯的用户来说是不可原谅的。

3)替换大量的文本

使用Ajax可以实现页面的局部刷新,但是如果页面的每个部分都改变了,重新请求服务器要更加合理一些。

4)对呈现的操纵

Ajax看起来是纯粹的UI技术,但事实上不是。对于可维护的干净的Web应用,不使用Ajax来控制页面呈现是一个不错的主意。JavaScript可以很简单地处理XHTML/HTML/DOM,使用CSS就可以很好的表达数据显示。

5 结论

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • Ajax技术在“数字校园”中的应用研究

    Ajax技术在“数字校园”中的应用研究

    2017-08-26 08:02

  • 行使ajax技术,提拔网站用户体验

    行使ajax技术,提拔网站用户体验

    2016-12-22 12:02

  • Ajax技术:弄不好会减损用户体验

    Ajax技术:弄不好会减损用户体验

    2015-11-03 16:43

  • 技术是目前最流行的 ,它极大地改善了传统Web应用的用户体验,

    技术是目前最流行的 ,它极大地改善了传统Web应用的用户体验,

    2015-10-31 08:06

网友点评