Ajax技术在用户信息管理系统中的应用与研究文档格式.docx

1、342 AJAX包含的关键技术 11343 利用AJAX技术的优势分析 11344 AJAX技术框架ExtJS 11第四章 方案设计及实现 1341 系统开发环境及配置 1342 功能详细设计 1343 登陆模块 14431 流程图 14432 数据结构 15433 页面请求 15434 代码举例 16435 界面描述 1844 模块功能详细设计 19441 流程图 19442 EXT表格控件grid 19443 EXT数据存储单元Record 20444 EXT表单控件form 21445 EXT中数据处理 23446 数据结构 26447 数据查询 27448 界面描述 29第五章 总结

2、3151 容错检测及测试 3152 存在的问题及未来的解决方案 33521 存在问题 33522 未来解决方案 3353 项目开发收获 33参考文献 36致谢 37附录 38 第一章 前 言11 课题背景 随着计算机技术、网络技术和数据库技术的飞速发展，全球进入了一个信息化社会的时代，这对我国的各中小企业的管理提出了严峻的挑战。产业信息化是信息社会的一个重要标志，将信息技术引入企业的生产管理各个方面，不但可以提高企业的现代化水平，而且能够提高企业的生产力和办事效率，从而为企业节省人力、物力，进而增强企业的竞争力。客户对于企业来说，其重要性是不言而喻的。随着企业的发展，业务范围的扩大，客户的数量

3、动态的变化着。对于企业而言，和客户之间建立稳固的业务关系是很重要的，因此，企业必须要有一种管理客户信息的有效方式。目前市面上已经有了客户关系管理系统即CRM（customer relationship management），可以帮助企业进行用户信息的管理。但是在国内的现状是已有的CRM功能不一，SAP、oracle等大公司的CRM系统基于国外的市场经验，不一定符合国内企业，国内的众多CRM软件商要么经验不足，要么软件开发能力不足，要么采用的技术比较落后不能与世界接轨，不能满足高速发展的网络信息技术的优势。清华同方计算机系统本部远程服务事业部经营的是“e达无忧服务”。“e达无忧服务”是利用互联

4、网技术远程为用户维护电脑设备的一种新的服务模式，属远程服务管理系统。只要用户可以上网，安装了无忧服务的客户端，就可以在电脑出现问题时随时与工程师取得联系，进行问题修复。由于面向所有使用电脑的用户，导致服务客户种类繁多，客户与公司之间的关系复杂，因此管理客户资料对于本公司来说是一件繁琐的工作。而且该项目刚刚上市一年多，在国内也是刚刚起步的新鲜电脑服务行业，它的服务流程也在逐步完善中。基于远程的服务模式，就使它和我们的传统的与用户面对面提供服务的模式不同，要求工程师通过远程与用户沟通后，迅速了解用户的服务信息。而用户的所有信息都是来自于网上，包括用户注册时的基本信息、历史服务维修信息等。用户的信息

5、很多，如何进行有效的管理，使工程师迅速查到有用信息，如何让业务部门方便快捷的统计出需要的信息就成了一个问题。因此，部门研发部就为此需要自己开发出一套业务操作支撑系统，我的课题用户信息管理就是此次开发项目的一部分。 12 研究意义及目的121研究目的客户是企业得以生存的关键，无忧服务是一种新型的服务，刚刚上市一年多，急需开拓市场、开发客源，培养客户的忠诚度，树立其在市场中的竞争力。因此通过一系列的管理模式建立与客户的友好关系迫在眉睫。通过建立对用户信息的管理，可以帮助企业更清楚的了解哪些功能性要求是用户所需求的，利于分析用户的消费趋势，帮助其开拓市场并在市场中站稳脚步。如果只是机械的统计每天的用

6、户量、用户基本信息，而没有对其进行有效的管理（存储、分析、分类等），企业所做的努力只会得到治标不治本的效果。借助用户信息管理系统对用户信息进行有效的管理，可以帮助部门解决上述问题，带来如下益处：1. 建立良好的品牌形象；2. 拉近与消费者的距离，建立双向的沟通渠道，掌握消费趋势；3. 提供消费咨询，生活提案等多元化服务，使消费生活丰富化，增加消费频率，并开发新客源；4. 掌握消费者动态，培养长期用户；5. 作为服务行业，通过用户信息的管理，可以公平公正的处理客户投诉问题，减少客户投诉量，增加用户满意度；6. 建立用户坚实的向心力和忠诚度。122研究意义用户信息管理系统关注的是市场与客户，现在的

7、客户有了比以往更多的对产品和服务进行选择和比较的机会与权利，客户的需求越来越个性化。所以用户信息管理的作用主要在与客户直接接触的部门，它主要针对的是企业的市场、销售、服务部门，包括管理整个客户生命周期的各个阶段，为企业提供了对客户及所购产品的统计、跟踪和服务等信息化手段和功能。用户信息管理系统的具体目标可归结为“提高客户满意度、降低客户流失率。通过用户信息管理系统，企业可以集成柜台、电话、Emajl、短信等多种渠道，将客户在接触、采购、送递及服务方面的信息在各个部门之间共享，并以此为基础，对客户进行分析，把客户的需求进行归纳，把客户的群体进行分类，从而采取个性化的服务，以从长期的发展中获得价值

8、。用户信息管理价值突出体现在：通过对用户信息资源的整合，在企业内部达到资源共享，从而为客户提供更快速周到的优质服务，吸引和保持更多的客户；通过对业务流程的重新设计，更有效地管理客户关系，降低企业成本。用户信息管理的核心是客户的资源价值管理：通过满足客户的个性需求，提高客户的忠诚度和保有率，从而全面提升企业的盈利能力和竞争力；根据对客户特征、购买行为和价值取向的深入分析，为企业的决策提供科学、量化的指导，使企业在市场上保持稳定持续的发展能力。113 论文结构本文在第一章前言中首先介绍了论文的项目背景，分析了做用业务操作支撑的原因，重点是用户信息管理及其的意义和目的。第二章介绍了此次开发课题的需求

9、分析以及总体的概要设计。第三章就业务操作支撑系统中的用户管理模块涉及的相关技术进行了简要介绍，重点对于使用的Ajax技术及其框架ExtJS进行了详细介绍，并阐述了采用此技术进行开发的原因。为下一章节的设计实现讲解奠定了基础。第四章对用户信息管理模块的详细设计进行了介绍。首先结合代码举例讲解了管理员登陆功能的设计及实现。最后对于基本模块（用户消费基本信息和服务单明细）的实现则以用户消费基本信息为例，结合代码讲解了其设计实现过程。第五章对此次项目的容错检测进行了展示，从进展进度和研究成果方面对论文进行了总结。第二章 需求分析及概要设计 211 业务需求分析“无忧服务”是利用互联网技术远程为您维护电

10、脑。无论您在任何时间、任何地点遇到电脑系统故障或软件应用问题，都无需担忧，马上寻求“无忧服务”。 无忧服务的远程工程师就会通过互联网瞬时“送”到您的身边，他们会以最专业的技术，最优质的服务，在第一时间解决您的电脑问题。经过和业务部门进行沟通，得到了业务部门的需求：用户账号管理功能：要求其可以对于企业用户（大客户）的基本信息，如企业名称、企业联系人、企业描述等信息进行查询对于其他类型的用户基本信息（用户姓名、联系方式、email等）同样可以进行查询。客户满意度：要求其显示所有投诉的案例的关联信息，如服务日期，服务工程师，客户投诉意见等，并可以对于投诉案例进行处理等。对于用户每次服务完成后的满意度

11、调查可以查询用户给出的评价、意见和建议等。以上两个功能还可以针对服务工程师、时间段来进行查询，利于对工程师进行绩效管理。客户消费：对于客户消费的通体情况进行统计，如用户登陆次数、消费次数、及服务卡的基本信息等进行查询。客户统计：要求对于用户注册用户数、远程服务量、用户登陆量进行统计，并可以按照时间段、服务卡类型、账号段、用户组别等来进行查询。服务明细：对于用户与工程师的服务信息进行跟踪记录，可以根据服务工程师、用户账号、时间段、服务单状态等条件进行查询。服务卡：对于部门开出的账户进行查看和根据开账号时间等条件进行查询，利于部门统计账号信息。212 概要设计通过分析业务部门需求，并考虑研发部门实

12、际开发实现功能的难度，最终确立了业务操作支撑系统实现的功能，主要分成了客户管理、工程师管理、服务卡管理，维修服务管理和系统管理等模块（参见图2-1，业务操作支撑系统模块分配）。客户管理，就是我所研究的用户信息管理，它又细分为客户账号管理、客户满意度、客户消费、客户统计、服务明细和服务卡等小模块（参加图2-2，用户信息管理模块分配）。图2-1业务操作支撑系统模块分配图图2-2用户信息管理模块分配图整个开发项目利于Ajax技术进行，基于EXT+spring架构，结合Java语言进行开发。开发平台选择eclipse3.2，web服务器使用tomcat，数据库使用Oracle。第三章 核心技术介绍31

13、 Spring架构311 Spring开发平台Spring是一个优秀的J2EE框架, 它提供了一种轻量级的控制反转（inversion of control，IoC）容器, 由该容器来创建（JavaBean）应用组件和管理组件之间的关系, 而非传统的通过硬编码的方式将各组件藕合在一起, 大大降低了各组件的藕合性。除了核心的IoC容器, sping的数据访问对象（data access object, DAO）模块提供了数据访问的支持, 对象关系映射（object/relation mapping， ORM）模块提供了对hibernate的支持, 面向方面编程（aspect oriented p

14、rogramming,AOP）模块提供了面向方面编程的支持。2312 DAO数据访问对象DAO模式是标准的J2EE设计模式之一，开发人员使用数据访问对象（DAO）设计模式把底层的数据访问逻辑和高层的商务逻辑分开。实现DAO模式能够更加专注于编写数据访问代码。DAO的设计采用了J2EE核心设计模式中描述的DAO设计模式，将数据库操作单独提取出来成为独立的一层，从信息系统的角度来讲可以把它作为数据库服务层，所有的数据库操作都要通过它来实现。本项目中DAO的创建采用了另一个设计模式：工厂模式。这个工厂比较特殊，通过传入DAO实现类的信息，得到的不是这个类本身而是它的一个代理，这样做有两个好处：1，方

15、便以后很好的控制DAO的生成。假设有另一个优秀的团队采用更好的技术编写了更好的DAO实现，只需要在工厂作一下修改即可。而采用spring的反转注入（IoC），甚至工厂类本身的代码都不需要修改，因为一切配置都放到了xml配置文件中，系统升级所要做的就是修改一下配置文件。2，通过DAO得到的是一个代理，这就意味着所有的操作都要通过这个代理进行，因此我们可以利用这个代理实现程序的“拦截”，从而在真正调用系统功能前做一些手脚，比如写一个log，判断用户的权限如果用户没有相关权限则不调用该函数等，而商业逻辑代码本身对此一无所知。事实上，这是spring的AOP技术的一个实现。32 开发环境321 Ecl

16、ipse开发平台Eclipse 是一个开放源代码的、基于 Java 的可扩展开发平台。就其本身而言，它只是一个框架和一组服务，用于通过插件组件构建开发环境。幸运的是，Eclipse 附带了一个标准的插件集，包括 Java 开发工具（Java Development Tools，JDT）。Eclipse 还包括插件开发环境（Plug-in Development Environment，PDE），这个组件主要针对希望扩展 Eclipse 的软件开发人员，因为它允许他们构建与 Eclipse 环境无缝集成的工具。由于 Eclipse 中的每样东西都是插件，对于给 Eclipse 提供插件，以及给用

17、户提供一致和统一的集成开发环境而言，所有工具开发人员都具有同等的发挥场所。单纯的一个eclipse是不可以和tomcat集成使用的，它需要使用相关的插件才能够用来开发tomcat Web应用。MyEclipse是Eclipse的插件，也是一款功能强大的J2EE集成开发环境，安装上这个插件后基本上就不用再安装其他插件了。3MyEclipse企业级工作平台（MyEclipse Enterprise Workbench ，简称MyEclipse）是对Eclipse IDE的扩展，利用它我们可以在数据库和J2EE的开发、发布，以及应用程序服务器的整合方面极大的提高工作效率。它是功能丰富的J2EE集成开

18、发环境，包括了完备的编码、调试、测试和发布功能，完整支持HTML、Struts、 JSF、 CSS、 Javascript、 SQL、Hibernate等。322 Tomcat 应用服务器Tomcat是一个免费的开源的Serlvet容器，也可以说tomcat是一个JSP和Servlet的运行平台。它有以下几个主要特点：1、 部署简单在Tomcat中，应用程序的部署很简单，你只需将你的WAR放到Tomcat的Webapps三目录下，Tomcat会自动检测到这个文件，并将其解压。2、易于操作基于tomcat的开发其实主要是JSP和Servlet的开发，开发JSP和servlet非常简单，可以用普通

19、的文本编辑器或者IDE，然后将其打包成WAR即可。3、 集成方便Tomcat可以与其他一些软件集成起来实现更多的功能，如JBOSS、eclipse、WebSphere application studio、JBuilder等IDE软件。这些IDE软件在开发中能够自由的配置指向tomcat的安装路径，可以随意选择tomcat的不同安装版本，在开发环境中即可嵌入tomcat运行环境，进行集成调试。Eclipse使用tomcat进行开发为当前许多的开发人员所应用，本课题的开发环境也是选用的eclipse开发平台。4、与Apache完美结合Tomcat也具有传统的Web服务器的功能：处理Html页面。

20、但是与Apache相比，它的处理静态Html的能力就不如Apache。我们可以将Tomcat和Apache集成到一块，让Apache处理静态Html，而Tomcat处理JSP和Servlet。这种集成只需要修改一下Apache和Tomcat的配置文件即可。4Tomcat是目前非常流行的Web服务器软件，不仅仅因为其免费，轻量级、功能强大，更因为其开放性，越来越收到人们的重视。323 Oracle数据库Oracle数据库系统是世界上最早商品化的关系型数据库管理系统，是数据库专业厂商Oracle公司的核心产品。Oracle 是以高级结构化查询语言（SQL）为基础的大型关系数据库，通俗地讲它是用方便

21、逻辑管理的语言操纵大量有规律数据的集合。是目前最流行的客户/服务器（CLIENT/SERVER）体系结构的数据库之一也是目前应用最广泛、功能最强大、可用性最高的数据库系统。Oracle10g数据库提供了许多新的工具，它们帮助DBA更高效地工作。Oracle10g提供了第一个完整集成的软件基础架构来实现网格计算。它还具有可传输的表空间、回滚监视、闪回版本查询等特性。533 前台页面技术 331 JSP技术JSP技术是在传统的网页HTML文件（*.htm,*.html）中插入Java程序段（Scriptlet）和JSP标记（tag），从而形成JSP文件（*.jsp）。JSP技术使用Java编程语言

22、编写类XML的tags和scriptlets，来封装产生动态网页的处理逻辑。网页还能通过tags和scriptlets访问存在于服务端的资源的应用逻辑。JSP将网页逻辑与网页设计和显示分离，支持可重用的基于组件的设计，使基于Web的应用程序的开发变得迅速和容易。此次毕设设计过程中，在用户登陆和注销涉的实现中使用了该技术。332 HTML技术HTML（HyperTextMark-upLanguage）即超文本标记语言或超文本链接标示语言，是WWW的描述语言。设计HTML语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体，人们不用考虑具体信息

23、是在当前电脑上还是在网络的其它电脑上。我们只需使用鼠标在某一文档中点取一个图标，Internet就会马上转到与此图标相关的内容上去，而这些信息可能存放在网络的另一台电脑中。 HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字、图形、动画、声音、表格、链接等。HTML的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。6333 CSSCSS是Cascading Style Sheets（层叠样式表）的简称。 CSS语言是一种标记语言，它不需要编译，可以直接由浏览器执行（属于浏览器解释型语言）。 在标准网页设计中C

24、SS负责网页内容（XHTML）的表现。 CSS文件也可以说是一个文本文件，它包含了一些CSS标记，CSS文件必须使用css为文件名后缀，可以通过简单的更改CSS文件，改变网页的整体表现形式,可以减少我们的工作量，所以她是每一个网页设计人员的必修课，CSS是由W3C的CSS工作组产生和维护的。34 AJAX341 AJAX与传统Web应用比较目前，开发Web的主要技术有JSP、ASP、PHP等，这些技术主要是基于传统的动态页面技术。传统的Web应用采用同步交互过程（见图2-1），这种情况下，用户首先向Http服务器发出一个请求。反过来，服务器执行某些任务。再向发出请求的用户返回页面。这是一种不连

25、贯的用户体验，服务器在处理请求的时候，用户多数时间处于等待的状态，屏幕内容也是一片空白。7与传统的Web开发不同，Ajax 的核心是Ajax 引擎，它是一种支持异步请求的技术。Ajax 引擎使得客户端程序可以使用JavaScript 向服务器提出请求并处理响应，而不需要离开当前的页面。当用户需要获取信息的时候，由Ajax 提交一个客户端的请求到服务器，而用户可以继续停留在当前页面处理其他事务。服务器接收到客户端的请求并处理之后，将数据发回客户端进行显示。在整个服务器客户端的交互过程中，用户并没有离开当前页面，也没有感觉到页面的刷新（实际上页面中有部分内容已经被刷新），网络传输的数据只是被刷新的

26、那一部分数据，无论是对服务器而言还是对网络而言，其压力已大大降低。对于用户本身而言，几乎感觉不到后台的传输、处理过程，从而获得了最新的信息，这就是俗称的“用户零响应体验”。图3-1AJAX应用与传统的Web应用的区别主要在3个地方：（1）、不刷新整个页面，在页面内与服务器通信；（2）、使用异步方式与服务器通信，无需打断用户操作，具有更迅速的响应能力；（3）、应用仅由少量页面组成。大部分交互在页面内完成，不需要切换整个页面。由此可见，AJAX使得Web应用更加动态，带来了更高的智能。AJAX是符合真正的Web标准的开发方式并且提供了表现能力丰富的AJAX UI组件，极大地改善了Web应用的可用性

27、和用户的交互体验，使得B/S方式的Web开发焕发了新的活力。342 AJAX包含的关键技术AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。实际上，它并不是一种技术，而是由几种技术以新的方式组合而成。（1）、用XHTML和CSS标准化呈现页面；（2）、使用DOM 实现动态显示和交互；（3）、使用XMLHttpRequest进行异步数据读取；（4）、使用JavaScript绑定和处理所有数据。客户端向服务器发出一个HTTP请求时，先将所需要的参数整合成一个XML 文件，再将这个XML文件

28、发送到服务器端，服务器对该XML文件进行解析，取出所需的参数，将参数传递给后台页面处理程序，运行业务逻辑，读取数据库等，然后将执行结果也以XML数据格式返回到客户端，同时，还可以返回一份以XSL排版样式的文档，转换显示工作由客户端浏览器的JavaScript和DOM 控制来完成。所以说，在Ajax 中采用的是一系列已有的甚至是老旧的技术，把它们重新锻造、延伸，超越其原有的概念，以便可以应付客户端程序所要面对的复杂情况。Ajax 的工作原理相当于在用户和服务器之间加了一个中间层，来处理客户端的请求，使得用户操作与服务器响应异步化。343 利用AJAX技术的优势分析1、减轻服务器的负担。因为AJA

29、X的根本理念是“按需取数据”，所以最大可能在减少了冗余请求和响影对服务器造成的负担；2、无刷新更新页面，减少用户实际和心理等待时间，提供更好的用户体验；3、也可以把以前的一些服务器负担的工作转嫁到客户端，利于客户端闲置的处理能力来处理，减轻服务器和带宽的负担，节约空间和带宽租用成本；4、AJAX可以调用外部数据；5、基于标准化的并被广泛支持和技术，并且不需要插件或下载小程序。总之，使用Ajax的最大优点，就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。344 AJAX技术框架ExtJS与所有优秀技术一样，Ajax已经

30、催生出大量框架。框架实质上就是一组组件，供程序员选用，用于完成需要的程序功能。也就是说使用别人预定义好的功能模块。一个框架就是一个可以重用的设计组件，其规定了应用的体系结构，阐明了整个设计、协作组件之间的依赖关系、责任分配和控制流程。因此通过使用已有的框架，可以减少写Ajax的工作量、避免很多繁琐的操作。要强调一点，Ajax还很新，而且还在发展，框架领域也同样如此。几乎每天都有新来者。有些框架基于客户端，有些基于服务器端；有些专门为特定语言设计，另外一些则与语言无关。其中绝大多数都有开源实现，但也有少数是专用的。考虑纯JavaScripty库，目前主要使用的是Dojo和ExtJS。结合功能需求，部门研发人员采用了ExtJS框架进行开发。ExtJS是一种JavaScript开发框架,这种强大的JavaScript库提供了可重用的对象和部件, 简化了Ajax开发和丰富了客户端界面效果,通过使用该框架可以使Web层的开发使用到面向对象的特性,比如可复用性和可继承性等。该框架的核心思想是通过JavaScript来动态创建页面的标记元素,从而使得页面更灵活。而且该框架完全基于纯HTML/CSS+J