（计算机软件与理论专业论文）基于aspnet的ajax组件的设计与封装.pdf

沈阳理工大学硕士学位论文 摘 要 ajax 的全称是 asynchronous javascript and xml，即异步 javascript 和 xml。 ajax 不是指一种单一的技术，而是有机地利用了 xhtml、dom、css、xml、 xlst、json 和 javascript 等一系列相关的技术，每种技术都有其独特之处，合 在一起组成了一个功能强大的新技术。ajax 实现了页面的无刷新，给使用 b/s 结 构系统的用户以与桌面系统相媲美的“所见即所得”的体验。鉴于组件的可重复 使用、 易维护和支持无缝升级等优点， microsoft 等公司已封装了部分 asp.net ajax 组件，但已封装的组件还缺少一些符合特定需求的功能且部分已有的组件性能还 有改进的余地。 本文根据开发人员提出的实际需求，设计与封装了多选树组件、单选树组件、 级联组件、可查询的多级列表组件、分页组件及二次确认等六个 asp.net ajax 组 件。多选树组件支持按编码关系对深层次的数据库表内容进行树状显示，支持用 户对任意级别的结点进行多项选择；单选树组件支持按编码关系对深层次的数据 库表内容进行树状显示，支持用户对任意级别的结点进行单项选择；级联组件支 持对有级别关系的数据进行联动选择；可查询的多级列表组件支持用户对列表中 值进行单项选择，同时支持模糊查询；分页组件支持显示控件与分页功能分离， 通过导航按钮进行翻页；二次确认组件支持用户对可能的误操作进行再次确认。 在设计与封装的基础上，采用大数据量的样本进行了测试，测试结果表明： 多选树组件和单选树组件比 microsoft 提供的 treeview 控件加载速度快；级联组 件和可查询的多级列表组件的加载速度在 10s 以内；分页组件比 asp.net 自带的 支持分页功能控件的效率高；二次确认组件有效地降低了用户的误操作率。 关键词：asp.net；ajax；组件；设计；封装 沈阳理工大学硕士学位论文 abstract ajax is shorthand for asynchronous javascript + xml, it isnt a technology. its really several technologies, each flourishing in its own right, coming together in powerful new ways. with ajax, users of b / s structure also can match the wysiwyg experience, which was only for c/s users. because of components advantages of reusable, easy to maintain and support a seamless upgrade, microsoft co. has packaged asp.net ajax components, but there is also room for improvement. according to the actual needs put forward by the developers, 6 ajax components based on asp.net were designed and encapsulated. they are multi-selected tree component, radio tree component, cascade component, list for query and selected component, paging component and re-confirm component. these 6 components all make their best use: 1st supports for the deep-rooted relations multi-selected, 2nd for any level of individual choice nodes, 3rd has the support of the relationship between the level of data linked to choose, 4th supports for individual choice and fuzzy inquiry, 5th supports for the separation of control and paging functions, navigation through the page button, 6th supports the user to reconfirm the potential disoperation. test result shows that: the load speed of multi-selected tree component and radio tree component is faster than treeview; load speed of cascade component and multi-level list for query and selected component is in 10s ; paging component is efficient than asp.net page components; re-confirm component effectively reduced the users disoperation rate. key words：asp.net; ajax; component; design; encapsulation 第 1 章 绪论 -1- 第 1 章 绪论 1.1 研究背景及意义 c/s 结构的系统以其所见即所得的方便操作 1赢得了大批的忠实客户，但随着 企业规模的日益扩大，企业业务逻辑复杂程度不断提高，企业原有的 c/s 结构的 信息系统暴露出越来越多的问题，包括系统维护成本高，企业信息系统的总成本 大大提高等。同时，随着互联网技术的发展，基于 b/s 结构的系统优势越来越明 显，因此很多系统开发商越来越倾向于开发此类系统。然而，b/s 结构的系统也存 在着致命的弱点，因为其重心在于后端机制，所以其前端 web 用户界面对用户操 作的响应性差 2。这使得开发人员开发的软件所能提供的用户体验和用户的实际需 要有一定的差距。 如果能够结合 c/s 和 b/s 两种结构的优点，开发一种基于 b/s 结构，同时又 能有与基于 c/s 结构的桌面系统相媲美的流畅应用的系统，就能够更好地满足用 户的要求。目前，除了程序设计、编码优化和服务器调优等措施之外，还可以采 用 ajax(asynchronous javascript and xml，异步 javascript 和 xml)来达到同样目 的 3，而且随着 gmail、google maps 的推出和各种浏览器的支持，ajax 正逐渐吸 引全世界开发人员的目光。 微软发布了 asp.net ajax，并提供了部分组件，但尚不能满足开发过程中的 需求，需要自行编码实现某些功能。由于使用组件开发可以增强系统的灵活性、 重用性、可移植性和可维护性，提高软件生产率，减轻软件开发的负担，推动应 用软件的开发向着高质量、规范化、可复用的方向发展 4，所以将常用功能封装成 组件，有利于降低成本、提高软件开发的工作效率。 1.2 国内外研究现状 1.2.1 ajax 研究现状 早在 2005 年 2 月 ajax 的概念被提出来之前，google 公司就已经将此项技术 沈阳理工大学硕士学位论文 -2- 应用于 google maps 5中，当用户使用鼠标转动地图的时候，改变是立即的，几乎 没有延迟，并且不需要重载页面。也正是因为 google maps 的强大功能，让广大用 户认识到了 ajax 的威力。google 公司的 gmail 6服务最为人称道的是它的用户界 面，它允许用户一次打开多个电子邮件，并且，即使用户正在写邮件，邮件列表 也能够自动更新 。 同样的是 google 公司的产品：google suggest，当用户选择一个 suggests term 的时候，改变是立即生效的。 amazon 开发了基于 ajax 的 a 搜索引擎，得到用户的广泛好评。 国内 flickr 7的在线照片共享系统已是 yahoo 功能的一部分了。 1.2.2 asp.net ajax 组件研究现状 microsoft公司在推出了atlas作为asp.net的扩展以支持ajax之后， 又于2007 年推出了 asp.net ajax 框架，可以很好地支持.net framework 2.0 及以上版本的 asp.net 下的 ajax 开发 8。 microsoft公司出品的ajax control toolkit 是一个基于 asp.net ajax 平台 上开发的一组控件工具箱 9，包含了 34 个在 web 开发中常使用到的控件，可供 开发人员免费使用与散布，并且提供源代码可供开发人员修改。 另有其它公司有radajax封装的 ajax manager、 ajax timer等6个组件 10 以 及北京金富瑞公司的 ucml.net 框架 11，都对基于 asp.net 的 ajax 组件开发做 了研究，并有成果发布。ajaxaspects 是一个使用 javascript 代理调用服务器端 webservices 方法的引擎 12；ajax.net 是首家支持各种方式通过 javascript 访问到 服务器端的.net 免费库 13； cajax 是一个通过 javascript 远程调用来创建和处理服务 器端请求的基于 php 对象的框架 14；cpaint 是另一个可用的针对 php 的 ajax 框架 15。 以上的基于 ajax 组件中，microsoft 等公司的免费组件不能满足开发过程中的 实际需求，其它商业公司有能满足需求的组件，但是囿于开发成本所限，难能购 买。 第 1 章 绪论 -3- 1.3 研究内容 本文研究的主要内容是基于 asp.net 的六个 ajax 组件的设计与封装， 具体包 括： （1）多选树组件 树状呈现的、 支持不同级别值的多项选择功能的组件。 组件的优势在于： 与微软提供的treeview控件相比，本组件的加载速度快； 与只支持末级结点的选择的组件相比，本组件支持多层次多级别值的 选择； 数据来源多样，支持sql server、oracle等数据库的表格文件。 （2）单选树组件 树状呈现的、 支持不同级别值的单项选择功能的组件。 组件的优势在于： 与微软提供的treeview控件相比，本组件的加载速度快； 与只支持末级结点的选择的组件相比，本组件支持任意级别值的选 择； 数据来源多样，支持sql server、oracle等数据库的表格文件。 （3）级联组件 使用select进行级联选择； 实时读取数据库数据。 （4）可查询的多级列表 以列表的形式展现每一级的结点内容，每屏列表只显示一级结点； 支持选择末级结点； 支持模糊查询。 （5）分页组件 显示和数据分离； 无刷新。 （6）二次确认组件 可有效防止用户的误操作。 沈阳理工大学硕士学位论文 -4- 1.4 论文结构 本文共分五章，安排如下： 第一章为绪论。介绍了课题的背景及意义、ajax 的研究现状、asp.net ajax 组件的国内外研究现状以及本文研究的主要内容。 第二章为技术介绍。介绍了 ajax，asp.net ajax 及组件的概念、组件的基本 思想和使用组件的优势。 第三章为概要设计。分门别类地对 asp.net ajax 组件的功能进行了分析与设 计，同时讲明全文的命名规则。 第四章为详细设计。在第三章概要设计的基础上，具体描述了各组件的详细 设计，使用流程图进行功能作用描述、列表讲明数据库设计等。 第五章为封装实现与测试。依步骤实现了组件的封装，并对组件进行了测试， 给出相应的测试结论。 最后对全文进行了总结和工作展望。 第 2 章 技术介绍 -5- 第 2 章 技术介绍 2.1 ajax 2.1.1 ajax 原理 ajax(asynchronous javascript and xml，异步 javascript 和 xml)，不是一门 新的语言或技术，它实际上是几项技术按一定的方式组合在一起，在共同的协作 中发挥各自的作用 16。 这些技术包括 javascript、xhtml(extensible hypertext markup languages， 可扩展超文本标记语言)、css(cascading style sheets，样式表)、dom(document object model，文档对象模型)、xml(extensible markup language，可扩展标记语 言)、json(javascript object notation)、xstl(extensible stylesheet language transformations)及 xmlhttprequest，其各自的作用为： 使用 xhtml 和 css 进行数据的标准化呈现； 使用 dom 实现动态显示和交互； 使用 xml 和 xstl 或 json 进行数据交换与处理； 使用 xmlhttprequest 对象进行异步数据读取； 使用 javascript 绑定和处理所有数据。 在 ajax 提出之前，业界对于上述技术都只是单独使用，或者只是小范围的组 合使用，没有真正意义上地综合应用，这是由之前的技术需求所决定的 17。但是随 着基于 web 程序的广泛应用，ajax 逐渐成为开发人员的宠儿。 2.1.2 传统 web 应用模型与 ajax 应用模型比较 图 2.1 展示了传统 web 应用与 ajax 应用模型的区别。 从图中可以看到，传统的 web 应用模型分为客户端和服务器，客户端发送请 求，服务器进行处理响应。 沈阳理工大学硕士学位论文 -6- 与传统 web 应用模型相比，ajax 应用模型在客户端和服务器间引入了 ajax 引擎， 用户与服务器间的交互通过 ajax 引擎来进行， 实际上是用户与 ajax 引擎交 互，ajax 引擎与服务器进行交互。 客户端浏览器 用户接口 web服务器 数据库服务器 应用服务器 httprequest html+css 服务器 客户端浏览器 用户接口 ajax 引擎 javascript html+css web或xml或 json服务器 数据库服务器 应用服务器 httprequestxml/json 服务器 传统传统web应用模型应用模型ajax web应用模型应用模型 图 2.1 传统 web 应用程序模式与 ajax 应用程序模式对比 2.1.3 传统 web 应用模型与 ajax 应用模型工作方式比较 图 2.2 展示了传统 web 应用与 ajax 应用模型工作方式比较。 传统的 web 应用程序采用同步交互过程。用户提交请求后，服务器接受请求， 解析数据并做一系列处理，将处理结果再转成 html 页返回给客户端（用户） 。服 务器在处理请求的时候， 用户多数时间处于等待的状态， 屏幕内容也是一片空白 17。 在新旧页面交替过程中，用户看到的是页面的抖动。 与传统的 web 应用不同，ajax 采用异步交互过程。ajax 在用户层与服务器层 间引入了一个中间层 ajax engine（ajax 引擎） ，用户与服务器间的交互通过 ajax engine 来进行， 实际上是用户与 ajax engine 交互， ajax engine 与服务器进行交互。 用户提交请求后，不必因等待服务器处理而面对空白，用户仍可浏览网页或进行 其它操作。ajax engine 处理用户的请求，根据处理结果重绘页面的变化部分。因 第 2 章 技术介绍 -7- 为 ajax engine 主要由 javascript 脚本来操作 dom 生成，所以 ajax engine 重绘页 面用时比由服务器重绘页面用时短，减少用户的心理和实际的等待时间 18。 时间 客户端 服务器 数据传输数据传输 输入 ajax web模型异步工作方式模型异步工作方式 用户交互 客户端处理 输入显示输入 服务器 处理 显示 数据传输数据传输 服务器 处理 输入显示显示 数据传输 数据传输 服务器 处理 用户界面用户界面 ajax引擎引擎 时间 客户端 服务器 用户交互 系统处理 数据传输 用户交互 数据传输 用户交互 系统处理 数据传输数据传输 传统传统web模型同步工作方式模型同步工作方式 图 2.2 传统 web 的同步工作模式与 ajax 异步工作模式比较 具体实现方法是在会话开始后， 浏览器装载一个 ajax 引擎， 而不是一个网页。 ajax 引擎是用 javascript 写制的， 负责绘制客户看到的界面和与服务器通信， ajax 引擎可以用异步通讯的方式将用户的输入发送给服务器，从而避免用户看着空白 的网页等待服务器的响应。用户的操作会调用一个 ajax 引擎的 javascript 函数， 在以前这通常会触发一个 http 请求给服务器，所有对用户操作的响应不需要再 沈阳理工大学硕士学位论文 -8- 通过服务器，诸如简单的数据检查、修改数据甚至检索网页，ajax 引擎都可以处 理，如果 ajax 引擎必须要服务器返回数据以响应用户的请求，比如需要服务器处 理提交的数据或者装载新的代码或数据等，ajax 引擎会采用异步通讯的方式发出 请求，通常用 xml，从而不会影响用户与程序的交互 19。消除了网络交互过程中 “处理等待处理等待”的缺点 20。 2.1.4 ajax 引擎 ajax 引擎有狭义和广义之分，广义的 ajax 引擎，包括了狭义的 ajax 引擎和 一些由 javascript 写成的业务逻辑模块。而狭义的 ajax 引擎，只是一些与 xmlhttprequest 相关，用来与完成与服务器交互的模块 21。本节所阐述的是狭义 的 ajax 引擎。 狭义的 ajax 引擎的主要功能包括： 捕获浏览器事件， 初始化 xmlhttprequest 对象，向服务器发送请求，接收服务器响应，更新客户端页面内容。这也正是 ajax 程序与服务器交互的过程 22。从这个过程可以看出 ajax 实质上也是遵循 request/response 模式，只不过这个过程是异步的 23。 （1） 捕获浏览器事件 当浏览器中的文档或它的某些元素发生了某些事情时，web 浏览器就产生一 个事件（event）。例如，浏览器装载完一个文档，就产生了一个 onload 事件；鼠 标点击层，就产生了一个 onclick 事件；键盘按一个键，就会产生一个 keydown 事 件。要捕获浏览器的事件，就是为某个事件注册一个处理函数。如，这里就为一个表单按钮注册了一个鼠标单击的处理函数 uploadphoto()，当鼠标 单击这个按钮时，就会执行 uploadphoto() 这个函数。 （2） 初始化 xmlhttprequest 对象 在捕获了用户的交互事件之后，如果需要与服务器交互，就要使用 xmlhttprequest。但是，浏览器不同或者版本不同，这个 xmlhttprequest 的实 例化过程实现方式也不同。ie 以 activex 控件的形式提供，而 mozilla 等浏览器则 以 xmlhttprequest 类的形式提供，所以需要保证程序兼容性，实现跨浏览器运 行。 第 2 章 技术介绍 -9- （3） 向服务器发送请求 在得到一个实例化了的 xmlhttprequest 对象之后， 就可以向服务器发送一个 http 的请求了。在发送之前需要指定响应处理函数，即服务器响应之后的回调函 数（callback），将 xmlhttprequest 对象的 onreadystatechange 属性指定为回调函 数名即可，比如： xmlhttprequestobject.onreadystatechange = callbackhandler。 指定响应处理函数之后，调用 xmlhttprequest 对象的 open 和 send 方法后，就向 服务器发送了一个 http 的请求了。 （4） 接收服务器响应 在发送 http 请求之前通过 onreadystatechange 属性指定了响应处理函数。这 个响应处理函数要做的第一步， 它需要检查 xmlhttprequest对象的readystate值， 判断请求目前的状态。 当 readystate 值为 4 的时， 表示服务器已经传回所有的信息。 服务器返回信息后，还需要判断返回的 http 状态码，以确定返回的页面没有错 误。所有的状态码都可以在 w3c 的官方网站上查到。其中，200 代表页面正常。 接下来就可以对返回的数据进行处理了。 （5） 更新客户端页面内容 xmlhttprequest 对成功返回的信息有两种处理方式： responsetext：将传回的信息当字符串使用。一些状态信息等非结构化的数 据，如删除成功之类的可以用这种方式处理； responsexml：将传回的信息当 xml 文档使用，用 dom 解析处理。一些 结构化的数据，如 20 条学生的记录，要填入到一个表格中，可以使用该方式。 2.1.5 ajax 相关技术 （1） xmlhttprequest ajax 最大的特点是无需刷新页面便可向服务器传输或读写数据，即无刷新更 新页面，这一特点主要得益于 xmlhttp 组件 xmlhttprequest 对象。这样就可 以像桌面应用程序一样，只同服务器进行数据层面的交换，而不用每次都刷新界 面，也不用每次将数据处理的工作提交给服务器来做，这样即减轻了服务器的负 担又加快了响应速度，缩短了用户等候时间 24。 沈阳理工大学硕士学位论文 -10- （2） javascript javascript 是一种基于对象和事件驱动具有较高安全性能的基于客户端浏览 器的脚本语言 25。使用 javascript 的目的是与 html 超文本标识语言、css 一起在 网页上实现与网络用户更加复杂的交互，从而适合开发客户端的应用程序。它通 过在标准的 html 语言中嵌入或调入实现功能。简单地说，javascript 是一种基于 对象的、简单的、安全的、跨平台的脚本语言。所以，javascript 最大的特点在于 能够在客户端浏览器运行，可以充分利用客户端的运算能力，来减轻服务器负载 和网络的流量。 （3） dom dom（document object model，文档对象模型）是 w3c 组织的推荐标准，用 于操作 html 和 xml 文件使用的一组 api 26。它提供了文件的树状结构表述， 让你可以改变其中的内容及表现方式，其本质是建立网页与脚本或程序语言沟通 的桥梁。 一个用 html 或 xhtml 构建的网页可以看作是一组结构化的数据，这些数 据被封在 dom 中，dom 提供了网页中各个对象的读写支持。 ajax 引擎捕获用户交互事件如鼠标点击、 下拉滚动条等， 并相应地更改 dom， 这使网页能无缝化重构，也就是在页面已经下载完毕后改变页面内容，从而响应 用户的请求。 （4） xml xml（extensible markup language，可扩展标记语言）是具有一种开放的、 可扩展的、可自描述的语言结构 27，它已经成为网上数据和文档传输的标准。它是 用来描述数据结构的一种语言，正如它的名字一样，它使对某些结构化数据的定 义更加容易，并且可以通过它和其它应用程序交换数据。 目前， xml 已经成为最普遍的数据操纵和数据传输的方式。 在基于 ajax 技术 的 b/s 中，大部分结构化的数据就是通过 xml 的来传输和交换的。但是并不是所 有的数据都适合以 xml 格式来传输，因为数据量大到一定程度的时候，将数据序 列化成 xml 以及解析这些 xml 将变得非常困难，需要消耗巨大的系统资源以及 时间。另外，有些信息根本没有必要序列化成 xml，比如返回一个删除成功的消 息。 第 2 章 技术介绍 -11- （5） json json (javascript object notation)和 xml 都可用于传输数据， ，不过二者各有 千秋。xml 比较适合于标记文档，而 json 更适于进行数据交换处理 28。 json 的对象 object 包含在一对中，如： members ；对象的属性 member 使用string : value成对的表示 29，属性与属性之间用逗号隔开，易于人的阅读和编 写。 json 本身就是 javascript 语言的一个子集，易于机器的解析和生成。 json 的原理是由服务器直接生成 javascript 语句， 客户端获取后直接用 eval() 方法来获取对象 30。与使用 xml 相比，可以省去解析 xml 的损失，同时节省了 解析的时间 31。 2.1.6 ajax 的优势 （1） 减轻服务器的负担 因为 ajax 的根本理念是“按需取数据” ，所以最大可能的减少了冗余请求和 响应对服务器造成的负担。 （2） 无刷新更新页面，减少用户实际和心理等待时间 更新页面中的部分内容即可，不需要刷新整个页面就能够与服务器进行通信。 （3） 更好的用户体验 堪与桌面应用程序相媲美的用户体验。 （4） 可以把以前的一些服务器负担的工作转嫁到客户端，利用客户端闲置 的处理能力来处理，减轻服务器和网络的负担，节约网络租用成本、节省 带宽 32。 （5） ajax 使 web 中的界面与应用分离（也可以说是数据与呈现分离） 。 ui 层与数据层相分离。 （6） 对于用户和企业来说是双赢的 对于用户来讲，因为页面与服务器直接的通讯可以使用异步操作，所以无需 打断用户的操作，用户像使用自己桌面上的应用程序一样对网络上的内容进行流 畅地操作，节省时间。 对于企业来讲，由于页面与服务器交互时，只需要页面的部分内容，因此减 沈阳理工大学硕士学位论文 -12- 少了页面与服务器的通讯量，提高了应用程序的效率，节省了带宽，同时因为用 户体验良好，所以增加了可以增加用户浏览网页的时间，尤其是商业网站，更是 无形中争取了更多的顾客。 2.2 asp.net ajax 2.2.1 asp.net ajax 简介 微软在 asp.net 的基础上，创建了支持 ajax 的 asp.net ajax，是 asp.net 的一种扩展技术 33。 与完全基于服务器的 web 应用程序相比，使用 asp.net 中的 ajax 功能 的应用程序具有很多优点： 增强的效率，因为网页的大部分处理工作是在浏览器中执行的； 熟悉的 ui 元素，如进度指示器、工具提示和弹出窗口； 页面局部更新，只刷新已发生更改的网页部分； 客户端与用于 forms 身份验证的 asp.net 应用程序服务、角色和用户配 置文件的集成； 自动生成的代理类，可简化从客户端脚本调用 web 服务方法的过程； 一个框架，可让程序员自定义服务器控件以包含客户端功能； 对大部分流行的和常用的浏览器的支持，其中包括 microsoft internet explorer、mozilla firefox 和 apple safari。 asp.net 中的 ajax 功能结构由两部分组成：客户端脚本库和服务器组件。 这两个组成部分集成在一起以提供可靠的开发框架。 2.2.2 asp.net ajax 客户端和服务器结构 图 2.3 展示了客户端脚本库和服务器组件中包含的功能。 从图 2.3 中可以看到，客户端包含了组件、网络以及核心服务，同时支持多个 浏览器；服务器包含了脚本支持、web 服务、应用程序服务功能，同时提供了 4 个服务器控件：scriptmanager、updatepanel、updateprogress 和 timer。 第 2 章 技术介绍 -13- 图 2.3 asp.net ajax 客户端和服务器端结构 34 2.2.3 asp.net ajax 服务器架构 支持 ajax 开发的服务器模块由管理应用程序的 ui 和流的 asp.net web 服务器控件和组件组成。这些服务器模块还管理序列化、验证、控件扩展性等等。 还有一些 asp.net web 服务使您能够允许访问用于 forms 身份验证、 角色和用 户配置文件的 asp.net 应用程序服务。 图 2.4 显示了 ajax 服务器结构， 该结构包含启用与客户端应用程序的通信的 元素。 图 2.4 asp.net ajax 服务器端架构 34 从图 2.4 可以看到，服务器结构的元素包括具有 http 处理程序和序列化类 沈阳理工大学硕士学位论文 -14- 的 web 服务通信层、自定义服务、页面方法以及应用程序服务。图中显示的各个 元素如下所示： （1） 自定义 web 服务 提供服务功能并将相应的响应返回给客户端。自定义 web 服务可以是 asp.net 或 wcf 服务。 web 服务通信层自动生成可从客户端脚本异步调用的客 户端脚本代理类。 （2） 页面方法 此组件使得 asp.net 页中的方法可以如同 web 服务方法一样被调用。 页面 方法必须在执行页面方法调用的页面中进行定义。 （3） 身份验证服务 身份验证服务生成身份验证代理类，该代理类使得用户可以通过客户端 javascript 进行登录或注销。 （4） 角色服务 角色服务生成角色代理类，该代理类使得客户端 javascript 可以访问当前经 过身份验证的用户的角色信息。 （5） 配置文件服务 配置文件服务生成配置文件代理类，该代理类使得客户端 javascript 可以获 取和设置与当前请求相关联的用户的配置文件属性。此应用程序服务始终可用， 因此不必将其实例化。 （6） json 序列化 使用服务器 json 序列化组件可以在常见 .net framework 类型与 json 格式之间进行可自定义的序列化和反序列。 （7） xml 序列化 web 服务通信层支持 xml 序列化，用于对 web 服务发出 soap 请求，并 用于从对 web 服务的 json 请求返回 xml 类型。 2.2.4 asp.net ajax 客户端架构 客户端结构包括用于组件支持、浏览器兼容性、网络和核心服务的库。 客户端结构的元素包括位于核心库中的 web 服务通信层以及下载的服务代 第 2 章 技术介绍 -15- 理类（在页面上使用） 。 图 2.5 asp.net ajax 客户端架构 34 图 2.5 中显示的各个元素如下所示： （1） 自定义服务代理类 这些类包含由服务器自动生成并下载到浏览器中的客户端脚本。代理类为页 面中使用的每个 wcf 或 asmx 服务提供一个对象。 （也就是说，代理类为页面 中 scriptmanager 控件的 servicereferences 元素中的每个项提供一个对象。 ） 在客 户端脚本中调用代理方法会创建一个对服务器上相应 web 服务方法的异步请求。 （2） 身份验证代理类 authenticationservice 代理类由服务器身份验证应用程序服务生成。该代理类 使得用户可以在浏览器中通过 javascript 进行登录或注销，而不必进行到服务器 的往返过程。 （3） 角色代理类 roleservice 代理类由服务器角色应用程序服务生成。使用该代理类可以通过 javascript 对用户进行分组并将每个组视为一个单元， 而不必进行到服务器的往返 过程。对于启用或拒绝对服务器上资源的访问，这可能十分有用。 （4） 配置文件代理类 profileservice 代理类由服务器配置文件应用程序服务生成。该代理类使得当 前用户的配置文件信息通过 javascript 对客户端可用，而不必进行到服务器的往 返过程。 沈阳理工大学硕士学位论文 -16- （5） 页面方法代理类 此代理类为客户端脚本提供脚本基础结构以调用 asp.net 页中的静态方法 （就好像这些方法是 web 服务方法一样） 。 （6） web 服务通信层 这是包含客户端脚本类型的库。这些类型使得浏览器（客户端）可以与服务 器上的服务进行通信。这些类型还使客户端应用程序避免了在客户端与服务器之 间建立和维护异步通信的复杂性。 它们封装提供异步功能的浏览器 xmlhttp 对 象，并使得客户端应用程序可以独立于浏览器。 （7） 可以通过属性来指定方法的序列化格式 默认序列化格式为 json，但是 web 服务和 asp.net 网页中的单个方法可 以返回其他格式（如 xml） 。 2.2.5 asp.net ajax 服务器和客户端间的通信 图 2.6 asp.net ajax 客户端和服务器的通信 34 在支持 ajax 的网页中， 浏览器向服务器发出对页面的初始请求， 然后向 web 服务发出对数据的后续异步请求。客户端通信元素采用代理类（从服务器下载） 和核心客户端脚本库的形式。服务器通信元素是处理程序和自定义服务。 第 2 章 技术介绍 -17- 图 2.6 显示了客户端与服务器之间的通信中涉及的元素。从图 2.6 可以看到， 客户端主要负责页面的呈现，而服务器主要负责对一些复杂任务的处理，二者之 间通过 web 服务通信层进行信息的交互。 2.3 组件的封装 2.3.1 组件定义 所谓“组件”是指这样一个二进制软件单元：它将被作者无法控制的其他应 用程序使用，但使用者不能对组件进行修改。也就是说，使用一个组件的应用程 序不能修改组件的源代码，但可以通过作者预留的某种途径对其进行扩展，以改 变组件的行为 35。 2.3.2 组件的基本思想 组件技术的基本思想是软件开发与设计不是从头做起，重复过去的工作，而 是挑选由开发商编制好的一系列易于理解和应用的组件。这些组件具有可靠、模 块化、可复用、可扩展等特点，然后用这些组件来组合新的应用软件。 组件技术的核心内容是组件模型，组件模型是对组件本质特征的抽象描述。 现有的组件模型一般认为组件由组件接口和组件内容两部分组成，组件接口是为 成功复用该软件实体需要而提供给外界的所有信息，包括组件向外提供和请求的 服务、组件的自述信息和定制信息、组件的初始化、实例化和永久化方法以及组 件对目标复用环境的依赖和组件组装信息等。组件内容就是用于直接复用的软件 实体，它可以具有源代码、二进制码、文档、分析设计模型和脚本等不同的物理 形态，并遵从一定的格式标准。 2.3.3 组件的优点 组件技术与传统的软件技术相比，具有以下显著优点： 适应网络环境下的生存，组成应用程序的组件可以分布在网络上的各台计 算机，充分发挥网络功能； 沈阳理工大学硕士学位论文 -18- 平台无关性； 可构架。非常适于应用程序的快速开发，所有的组件被封装到统一的组件 库中，开发人员从某个组件库中取出所需的组件并将其快速地组装到一块以构造 所需的应用程序 36； 具有最好的可升级特性，随着功能的提升，不在需要软件的重复删除和安 装操作，同一种软件版本间顺利实现平滑升级 37。 2.4 本章小结 本章主要介绍了本文中将用到的技术，包括 ajax 的定义、asp.net ajax 的定 义、asp.net ajax 的客户端、服务器架构以及客户端与服务器的通信方式，同时 阐明了组件的定义、组件的基本思想以及使用组件开发的优势。 第 3 章 概要设计 -19- 第 3 章 概要设计 3.1 总体设计 本文的系统体系结构如图 3.1 所示。 客户端浏览器 各组件 ajax 引擎 javascript html+css web或xml或 json服务器 数据库服务器 应用服务器 httprequest xml/json 服务器 图 3.1 系统体系结构图 根据开发人员提出的实际需求，利用 ajax 进行封装的组件可分为三类： 深层次树状导航； 级联显示； 过滤和调用数据进行处理。 本文依据需要，对各类进行细分，共封装了 6 个组件： 多选树组件； 单选树组件； 级联组件； 可查询的多级列表组件； 分页组件； 二次确认组件。 其中，多选树组件、单选树组件和可查询的多级列表组件属“深层次树状导 航”类，级联组件属“级联显示”类，分页组件及二次确认组件属“过滤和调用 数据进行处理”类。 组件模型如图 3.2 所示。 asp.net ajax 多选树组件二次确认组件分页组件 可查询的 多级列表组件 级联组件单选树组件 图 3.2 模块图 沈阳理工大学硕士学位论文 -20- 组件的功能及接口说明详见表 3.1。 表 3.1 组件功能及接口说明 组件名称 功能简述 接口说明 组件名称 功能简述 接口说明 多选树组件 对多级值任意级别值进行复选 输入 1. 表名 2. 主键名 3. 显示内容字段名 输出 1. 选中的键值 2. 选中的内容 单选树组件 对多级值任意级别值进行单选 输入 1. 表名 2. 主键名 3. 显示内容字段名 输出 1. 选中的键值 2. 选中的内容 级联组件 对多级值末级值进行单选 以多个 select 的方式动态显示 输入 1. 表名 2. 主键名 3. 显示内容字段名 输出 1. 选中的键值 2. 选中的内容 可 查 询 的 多 级列表组件 对多级值末级值进行单选和查询 输入 1. 表名 2. 主键名 3. 显示内容字段名 输出 1. 选中的键值 2. 选中的内容 分页组件 对数据源进行动态加载并按要求进行 分页 输入 1. 要进行分页的源（sql 语句） 2. 每页记录数 输出 每页应加载的源（ilist 或 datatable） 二次确认 对用户可能出现的误操作进行二次确 认 输入 提示内容 输出 用户确认结果（true/false） 第 3 章 概要设计 -21- 3.2 深层次树状类组件功能分析与设计 3.2.1 深层次树状组件功能分析 树型图可以很直观地显示按照树形结构进行组织的数据，如企业或公司的组 成结构、计算机中的文件系统(windows 中的资源管理器)等等。 在 web 开发过程中，经常遇见对不同级别层次的数据进行选择以方便查询的 需求。 针对以上需求，微软已提供了 treeview 控件，此控件在一定程度上解决了用 户的需求，但其弊端也非常明显：加载速度慢。 在(cpu)p4 1.4m (ram)256mb windows 2000 server 1024*768 ie6.0 环境进行 的测试结果是，控件加载的数据源级数超过 3 级，每级结点数超过 30 个，即结点 30*30*30 的展开速度就超过 1 分钟 38，但有研究表明，一个网页的加载速度超过 10 秒，就会使浏览者失去等待的信心，此部分潜在客户群会在这 10 秒流失。尤 其是商业网站中，这是致命的伤痛。所以提高页面加载速度是刻不容缓的大事。 3.2.2 多选树组件功能设计 本组件以树状显示数据库表中的各项值，支持选择多层次多级别内的任意多 个结点。组件在初始加载的时候，只加载根结点及第一级结点，随着用户的需求 对其它级别的结点进行加载。 组件功能设计包括： 支持按编码关系和按父子关系两种方式构造树型 各级别结点都可以被选中； 选中某结点的同时，当前结点的所有上一级结点都以将方框填充做有子结 点或更下一级结点选中标识； 如果其有子结点， 则其所有的已显示的子结点以 “” 做被选中标识；未显示的子结点不做标识，待显示时，同样，以“”做被选中 标识； 组件打开时，默认显示已选中结点，方便用户的查看； 显示文字和实际文字可以不同。 沈阳理工大学硕士学位论文 -22- 3.2.3 单选树组件功能设计 本组件以树状显示数据库表中的各项值，支持单项选择任意级别层次的结点。 组件在初始加载的时候，只加载根结点及第一级结点，随着用户的需求对其它级 别的结点进行加载。 组件功能设计包括： 支持按编码关系和按父子关系两种方式构造树型； 各级别结点均可被选中； 组件打开时，默认显示已选中结点，方便用户的查看； 显示文字和实际文字可以不同。 3.2.4 可查询的多级列表功能设计 本组件具有末级结点单项选择功能及对任意级别结点的模糊查询功能。 （1）单项选择功能 组件逐屏显示每一级的内容，用户根据需要逐级查找想要的内容。用户点击某 结点时，若其仍有下一级结点，则显示内容变为其下一级结点的内容；若其无下 一级结点，则在当前结点前的小方框内画“”以示当前结点已被选中。用户若 再选择了其它末级结点，则选中内容更改为新选中的结点；若用户仅点击的其它 的非末级结点，则选择结果不会更改。 在结点显示变化的时候，页面局部刷新，可以明显地看到变化，但又不会有闪 烁，给用户造成反感。 在选择过程中，若用户点击“上一级”按钮，则显示当前显示结点的上一级 所有结点。 （2）模糊查询功能 用户输入关键字并点击“查询”按钮，则组件进行模糊查询，列出搜索结果。 用户可在搜索结果中进行选择（注：搜索结果可以来自不同级别，只要结点值中 含有搜索的关键字则都进行显示） 。 本组件支持用户在选择的过程中，同时可以进行查询，精确定位，使用更加方 便，节省时间。 第 3 章 概要设计 -23- 3.3 级联显示类组件功能分析与设计 3.3.1 级联显示类组件功能分析 级联下拉菜单就是从一个下拉菜单中选中一项后， 相应的另一个下拉菜单的内 容会随之改变。级联的需求在实际的应用中是很多的，如总行和分行的级联、省 市区三级联动。 3.3.2 级联组件功能设计 实