AJAX富客户端开发

一. AJAX客户端开发

首先要理解一点:Ajax不是一项技术。它其实是几项技术,每项技术自身都很繁荣,它们以强有力的全新方式结合起来。Ajax涵盖:
-- 运用XHTML和CSS实现基于各种标准的展示。
-- 运用文档对象模型(Document Object Model)实现动态显示和交互。
-- 运用XML和XSLT实现数据交换和操作。
-- 运用XMLHttpRequest实现异步数据检索。
-- JavaScript将所有这些绑定到一起。

所以要进行Web2.0的富客户端开发,就是要运用强大的javasript将上述所有的技术有机的融合在一起,从而获得用户的良好体验和感官!

1.1 控件开发技术选择

    一张页面的呈现分别由三部分组成: HTML内容、CSS文件和Javascript文件;那么这三部分怎么样组织衔接才符合我们软件的开发方式了。理想情况就是三部分内容由三个独立的文件组成,各负责自己功能实现,能够分开开发并能方便的集成起来达到最终的呈现:

  • (M)HTML文件:页面呈现的具体内容,是承载服务端数据以HTML的形式展现的文件
  • (V)CSS文件:层叠样式单,是控制页面布局以及渲染页面外观的,及也可称做页面的皮肤
  • (C)Javascipt文件:是页面呈现中的控制单元,它可以控制页面的简单业务以及呈现中的HTML元素动态效果。那么我们的理想效果就是,此javascript是富客户端控件具体实现, 也可以象CSS文件一样以皮肤的方式附在HTML文件上,而不需要HTML文件中做特殊的处理。

1.1.1 htc控件开发方式

    为达到页面呈现的三个组成要素的相互独立、方便集成的特性,采用htc方式做客户端控件开发不适为一种好的方式。但是,htc不是W3C标准不能和其他浏览期兼容所以我们直接抛弃它。

1.1.2 所采用的开发方式

    通过JQuery基类库的使用我们可以实现以皮肤方式附加HTML元素控件的特性的控件开发效果。通过这种控件实现方式,我们也可以将控件的特性犹如CSS一样,由单独的文件存在并能以皮肤的方式方便的附加在HTML上,从而达到最终的富客户端控件效果。 下面将介绍实现这种效果的几个关键技术点:

二. 几个关键技术点

2.1 实现以皮肤的方式加载控件

   达到以皮肤的方式自动加载控件,当页面由浏览器加载完毕后自动开始加载脚本控件,由这句代码实现$(document).ready()里面做控件的加载初始化操作; 同时如下代码里的 $("table[@control=VogueGrid]") 表示查找HTML页面内容里所有是VogueGrid类型的Table元素,找到之后将对其进行VogueGrid的初时化操作。


实现的VogueGrid控件效果,可以异步的查询数据、排序、拖动、编辑等功能;如图:

代码使用JQuery做为基础类库,采用面向对象的开发方式,代码整洁:



2.2 动态的事件绑定

   控件就要响应用户的很多事件操作,如onclick、onmousemove等;DOM元素可以绑定多个事件成为事件链顺序执行,事件是以冒泡的形式向上传递(当然也可以阻止当前事件继续冒泡); 所以,我们要有一个灵活的、动态的事件绑定方式和移出方式; 如下例子:

2.3 灵活的样式、DOM操作

    通过使用JQuery我们可以方便的进行HTML元素查找、新增、插入、删除和修改样式等操作,它对css和XPath的支持大大提升针对HTML控件开发的效率。 

jquery是一个轻便的,精简的javascript库,可以通过非常方便的代码实现强大的功能。
jquery支持各种浏览器:Internet Explorer 5.5+, Firefox 1.0+, Safari 1.3+, and Opera 8.5+.

jquery的官方主站:http://jquery.com/
jquery的文档资料:http://jquery.com/docs/
jquery的下载地址:在官方主站首页就可以下载到,压缩后的大小为17.1k,确实小巧。


转载于:https://www.cnblogs.com/witluo/archive/2007/07/17/821382.html