基于Spring的软件测试专业网站表现层设计论文

PAGEPAGE毕业设计（论文）设计（论文）题目：基于Spring的软件测试专业网站表现层设计与实现 学生姓名：学生学号： 专业班级： 指导老师： 系主任（院长）： 年5月27日毕业设计（论文）第42页基于Spring的软件测试专业网站表现层设计与实现摘要随着软件产业的发展，软件测试的重要性愈发突出，本课题就是要建立一个专业的软件测试网站供高校同学学习和交流。本人承担的是网站的表现层的设计和实现，主要使用了Ajax技术。目前，Ajax成为web技术领域的研究热点，越来越多的网站采用Ajax技术，并带来了良好的反响，如Google。Ajax技术引入了异步调用，弥补BS系统用户体验方面的缺陷。对比Applet,Flash等传统的web技术，Ajax不需要专门的软件支持即可以在大多数流行浏览器中直接使用。Ajax通过XMLHttpRequest对象来发送异步请求的，用户不需要等待页面刷新。Ajax涉及到的关键技术包括Javascript、XMLHttpRequest、DOM、XML。其中，使用XHTML和CSS标准化呈现，使用DOM实现动态显示和交互，使用XML和XSTL进行数据交换与处理，使用XMLHttpRequest对象进行异步数据读取，使用JavaScript绑定和处理所有数据。本课题主要关于在J2EE平台上整合Ajax应用，使用了不刷新、可动态配置的Tab页、数据联动等Ajax技术。关键词：Ajax，软件测试，XMLHttpRequst，Javascript，DOM，数据联动，Tab页TheDesignandImplementationofSoftwareTestingWebsitePerformanceLayerBasedontheSpringTechnologyAbstractWiththedevelopmentofthesoftwareindustry,theimportanceofsoftwaretestingisbecomingprominent,Thetaskistoestablishaprofessionalsoftwaretestingsiteforcollegestudentstostudyandexchange.IamresponsiblefortheperformancelevelsforthedesignandrealizationofthemainuseofAjaxtechnology.Currently,Ajaxwebtechnologyasaresearchfocus,agrowingnumberofwebsitesusingAjaxtechnology,andgenerateagoodresponse,suchasGoogle.Ajaxtechnologyintroducestheasynchronouscall,tomakeupforthedefectsoftheBSsystemsinuser’sexperience.ComparedwiththetraditionalAppletandFlashwebtechnology,Ajaxdonotneedspecialsoftwaretosupport,itcanruninthemostpopularbrowsersdirectly.AjaxthroughtheXMLHttpRequestobjecttosendasynchronousrequests.Usersdonotneedtowaitforpagesupdating.AjaxrelatestothekeytechnologiesincludingJavascript,XMLHttpRequest,DOMandXML.Amongthem,XHTMLandCSSareusedtoshowinstandardization,theuseofDOMdisplayandinteractiondynamically,XSTLandXMLareusedtoexchangeandprocessdata,ToperformaasynchronousdatareadingthroughXMLHttpRequestobject,JavaScriptbundledwiththeuseandprocessThetopicisontheJ2EEplatformapplicationintegratedwithAjax,mainlyusetheAjaxtechnologysuchasNoRefreshing,DynamicAllocationoftheTabpages,DataLinkageassoon.Keywords:Ajax,SoftwareTesting,XMLHttpRequst,Javascript,DOM,DataLinkage,TabPages目录1.绪论 11.1课题背景及来源 11.2课题研究的意义 11.3论文结构 22.软件测试网站系统说明 32.1软件测试网站系统需求 32.2软件测试网站系统设计 32.2.1系统概述 32.2.2学生端 42.2.3管理员端 53.相关技术介绍 73.1Ajax定义 73.1.1传统Web界面的问题 73.1.2什么是Ajax 73.2AjaxWeb应用模型 83.3JavaScript 123.4XMLHTTPRequest对象 133.4.1创建XMLHTTPRequest对象 143.4.2XMLHTTPRequest对象的方法 153.3.3XMLHTTPRequest对象的属性 173.3.4使用XMLHTTPRequest进行交互的示例 173.5DOM 183.5.1DOM简介 183.5.2XMLDOM 193.5.3使用DOM动态编辑页面 203.6用CSS定义应用的外观 213.7jQueryTab插件 224.软件测试网站开发与实现 234.1开发环境及工具 234.2系统实现 234.2.1软件测试网站流程图 234.2.2软件测试网站界面实现 244.2.3登录的Ajax实现 324.2.4Tab页的动态加载 344.2.5数据联动 37总结 39致谢 40参考文献 411.绪论1.1课题背景及来源作为国家首批35所示范性软件学院之一的湖南大学软件学院一直以市场需求为导向，培养具有国际竞争能力的多层次实用型软件人才为目标。在多年从事软件测试研究成果的基础上，结合工程项目实际情况和软件企业实际需要，于2004年9月开始在软件学院软件工程本科生及硕士研究生中开设软件测试课程。同时，湖南大学软件学院的几位老师编写了《软件测试技术与管理》教材。该教材于2006年被国家教育部评为“国家十一五规划教材”。为了配合该教材的发行及教学，提供一个专业的软件测试技术网站，供高校同学们学习和交流，这是本项目的初衷。1.2课题研究的意义随着软件市场的成熟，人们对软件作用期望值也越来越高，软件的质量、性能、可靠性等方面也正逐渐成为人们关注的焦点。目前，中国软件产业在产品功能和性能测试领域都存在着严重不足，中国软件企业已开始认识到，软件测试的广度和深度决定了中国软件企业的前途命运。近期的数据显示，软件测试工程师已经成为2006年最紧缺的人才之一，该类职位的需求主要集中在沿海发达城市，其中北京和上海的需求量分别占去了33%和29%；而从企业分布来看，民企需求量最大，占了19%，外商独资欧美类企业需求排列第二，占了15%。目前，国内软件测试人才紧缺的现状已经凸现出来。在网站的构思和设计过程中，我们了解到目前全国只有北京和上海建有专业的软件测试网站，这些网站的出现给当地的软件测试人员提供了一个很好的交流平台，对测试技术的发展和提高起到了一定作用。在长沙，甚至整个中南地区都没有这样的网站，这在一定程度上限制了该地区软件行业中测试人员的交往，因此在长沙建设专业的软件测试技术网站是很有意义的，不仅为测试人员提供网上交流平台，还可以定期举行活动，让大家面对面交流，共同提高软件测试技术。在本毕业设计项目开发过程中，通过完整地实施软件开发流程，将软件工程思想彻底融入项目研发工作中，达到了理论与实践相结合的目标，具有很重要的意义。本课题是对网站表现层进行设计和实现，主要使用的是Ajax技术，详尽的介绍将在第二部分加以说明。1.3论文结构绪论部分概要介绍了本毕业设计课题的背景来源以及研究的意义。第二部分介绍了系统的概况，并说明了系统的需求，通过对系统进行详细分析，介绍了系统的设计方案和实现内容。第三部分介绍开发本课题所涉及到的基本理论知识。第四部分是论文的重点，从第二部分的需求和设计出发，以第三部分介绍到的基本知识为基础，介绍了系统的具体实现，并给出给出了相关界面的图片和部分功能的实现过程。第五部分进行归纳和总结。2.软件测试网站系统说明2.1软件测试网站系统需求1．软件测试课程教学资源和信息发布；2．学生作业提交和答疑及教师解答；3．软件企业测试人员信息交流，活动组织；4．软件测试服务，包括咨询，培训等；5．具备灵活的配置的功能，以满足信息类型的扩展和变化。栏目应该能够在后台管理中灵活调整，包括：(1)多层次栏目结构支持；(2)栏目的新增、编辑、删除、移动功能；(3)栏目编辑应该能够设定栏目的标题，设定栏目内容的类型；(4)栏目信息能够以多种形式展现，如图片新闻列表等。2.2软件测试网站系统设计2.2.1系统概述本课题主要是关于软件测试网站的表现层的设计和实现，主要使用Ajax技术完成。本系统分为学生和管理员两大部分，主要有新闻管理，作业管理，用户管理，答疑等模块。其中本网站的首页使用AjaxTab效果来显示多个栏目，这些栏目可以动态配置，具体实现会在第四部分详细介绍。用户可以从首页登录，登录成功后，如果是学生，则进入学生后台页面；如果是管理员，则进入管理员的后台页面。软件测试网站软件测试网站学生部分管理员部分图2-1系统两大部分示意图答疑解惑答疑解惑新闻管理作业管理用户管理软件测试网站图2-2软件测试网站模块示意图2.2.2学生端当学生用户成功登录后，会进入到学生端的管理页面。学生主要有查看和修改个人信息，查看和提交作业，查看问题和提出问题，密码管理，登录控制这些功能。学生端学生端查看/修改个人信息查看/提交作业查看/提出问题密码管理登录控制图2-3学生端功能示意图整个学生端管理页面拟采用框架实现，左边的框架列出学生的所有功能，当学生点击某功能时，会在右边的框架中显示出对应于此功能的操作页面。(1)查看/修改个人信息：用户登陆后，可以点击查看个人信息查看自己的个人资料，如发现不符的地方，可以点击修改个人信息修改个人资料。(2)查看/提交作业：用户登陆后，点击查看作业，可以看到作业列表，点击其中一个就会进入该作业的详细信息，会看到作业的名称，作业的介绍，作业状态。如果未交，则可以点击下载链接下载该作业，如果已交，则可下载已交的作业文件。下方的上传按钮可以上传作业，如果多次上传作业，则以最后一次提交的作业为准。(3)查看/提出问题：用户登录后，点击查看问题，出现问题列表，点击其中一个，可以看到问题的相关回复。点击提出问题，用户可以提出问题，管理员负责对问题的解答。(4)密码管理：用户可以修改自己的密码。(5)登录控制：用户可以退出登录或进入网站首页。2.2.3管理员端当管理员用户成功登录后，会进入到管理员端的管理页面。管理员主要有查看用户信息/添加/删除用户，查看/发布/删除新闻，发布/查看/删除作业，查看/删除问题，登录控制这些功能。管理员端管理员端查看用户信息/添加/删除用户查看/发布/删除新闻发布/查看/删除作业查看/删除问题登录控制图2-4管理员端功能示意图整个管理员端管理页面拟采用框架实现，左边的框架列出管理员的所有功能，当管理员点击某功能时，会在右边的框架中显示出对应于此功能的操作页面。(1)查看用户信息/添加/删除用户：管理员点击查看用户信息，在输入框中输入用户ID就会看到该用户的详细信息。点击添加用户，输入用户的各项信息后点击添加就可以添加一个用户，删除用户时只需输入用户ID并点击删除就可完成用户的删除。(2)查看/发布/删除新闻：用户点击查看新闻，在下拉框中选择新闻类别，就会该类别所有新闻的列表，点击其中一个，就会进入该新闻的详细信息的页面。点击发布新闻，输入相关信息后，点击发布，就可以添加一条新闻，你可以在网站首页的相应新闻类别中看到该新闻。点击删除新闻，在这里拟采用数据联动技术，当用户选择一个新闻类别，该类别的新闻自动加载到新闻标题下拉框，当用户选择一个新闻标题，在下面显示出该新闻的内容，用户点击删除按钮就可删除该条新闻。(3)发布/查看/删除作业：用户点击查看作业，出现作业列表，点击其中一个，进入该作业详细信息页面。点击发布作业，输入作业的相关信息后，点击上传作业，将作业文件上传，就可添加一个作业。单击删除作业，输入作业名称，点击删除就可删除该作业。(4)查看/删除问题：用户点击查看问题，出现问题列表，点击任意一个，进入问题回复页面，可以看到关于该问题的相关回复，在快速回复中输入想要回复的内容，点击回复，便可完成对该问题的回复。点击删除问题，输入问题名称，点击删除，便可删除该问题。(5)登录控制：用户可以退出登录或进入网站首页。3.相关技术介绍3.1Ajax定义3.1.1传统Web界面的问题目前编写应用程序有两种基本的选择:桌面应用程序和Web应用程序，两者是类似的。桌面应用程序通常以CD为介质(有时候可从网站下载)并完全安装到客户的计算机上。桌面应用程序可以使用互联网下载更新，但运行这些应用程序的代码在桌面计算机上。Web应用程序运行在某处的Web服务器上，要通过Web浏览器访问这种应用程序。比这些应用程序的运行代码放在何处更重要的是，应用程序如何运转以及如何与其进行交互。桌面应用程序一般很快(就在本地的计算机上运行，不用等待互联网连接)，具有漂亮的用户界面(通常和操作系统有关)和非凡的动态性。可以单击、选择、输入、打开菜单和子菜单、到处巡游，基本上不需要等待。另一方面，Web应用程序是最新的潮流，它们提供了在桌面上不能实现的服务(比如A和eBay)。但是，伴随着Web的强大而出现的是等待，等待服务器响应、等待屏幕刷新、等待请求返回和生成新的页面。Ajax(AsynchronousJavaScriptandXML)尝试建立桌面应用程序的功能和交互，是与不断更新的Web应用程序之间的桥梁。可以使用像桌面应用程序中常见的动态用户界面和漂亮的控件。3.1.2什么是Ajax要找出谁首先发明了Ajax，总免不了一场争论，不过有一点是可以确定的，2005年2月，AdaptivePath的JesseJamesGarrett最早创造了这个词。在他的文章Ajax：ANewApproachtoWebApplications中，Garrett讨论了如何消除胖客户应用和瘦客户应用之间的界限。在Garrett的总结中，Ajax包括以下5个部分[1];[2];[3]：(1)基于标准的表示技术，使用XHTML和CSS；(2)动态显示与交互技术，使用DOM（文档对象模型）；(3)数据互换与操作技术，使用XML和XSLT；(4)异步数据获取技术，使用XmlHttpRequest；(5)使用javascript将以上的一切结合在一起。下图展示了Ajax四个对象的结合[2]：图3-1Ajax的四个组成部分虽然Ajax所需的基础架构己经出现了一段时间，但直到最近异步请求的真正威力才得到利用。能够拥有一个响应极其灵敏的Web站点，让最终用户拥有更好的界面体验。通常，在J2EE中，开发人员过于关注服务和持久性层的开发，以至于用户界面的可用性已经落后。在一个典型的J2EE开发周期中，常常会忽略用户的体验，因为已经在服务端花费太多的时间，Backpack,GoogleSuggest,GoogleMaps站点证明，这些理由是不成立的。所有这些Web站点都显示Web应用程序不必完全依赖于从服务器重新载入页面来向用户呈现更改。简而言之，在涉及到用户界面的响应灵敏度时，基准设得更高了。3.2AjaxWeb应用模型Ajax不是一种技术，它由几种蓬勃发展的技术以新的强大方式组合而成。它包含基于XHTML和CSS标准的表示;使用DocumentObjectModel进行动态显示和交互;使用XMLHttpRequest与服务器进行异步通信;使用JavaScript绑定一切。Ajax用来描述一组技术，它使浏览器可以为用户提供更为自然的浏览体验。在Ajax之前，Web站点强制用户进入提勿等待/重新显示范例，用户的动作总是与服务器的“思考时间”同步。Ajax提供与服务器异步通信的能力，从而使用户从请求/响应的循环中解脱出来。借助于Ajax，可以在用户单击按钮时，使用JavaScript和DHTML立即更新UI，并向服务器发出异步请求，以执行更新或查询数据库。当请求返回时，就可以使用JavaScript和CSS来相应地更新UI，而不是刷新整个页面。最重要的是，用户甚至不知道浏览器正在与服务器通信:Web站点看起来是即时响应的。那么Ajax技术与传统Web应用程序有什么区别呢？下面我将详细说明[3]。图3-2传统Web应用程序模型图3-3传统Web应用程序的同步模型上面的两幅图展示了传统Web应用程序的模型，从图中可以看出传统Web应用程序，用户体验是割裂的，整个流程是点击等待看到新的页面再点击再等待，也就是我们通常所说的同步(synchronous)。图3-4AjaxWeb应用程序模型图3-5AjaxWeb应用程序的异步模型上面的两幅图是采用Ajax技术的Web应用程序模型[3]，从中可以看出Ajax带来的改变主要是异步，大部分的计算工作，在用户不觉察的情况下，交由服务器完成，没有空白的屏幕，没有令人心烦的旋转地球，没有虚假的下载百分比进度条。用户可以不必在黑夜与白天之间穿行，只需要安心的坐在浏览器前。AJAX与传统模式的不同，它通过在用户和服务器之间引入一个AJAX引擎，消除了Web的“开始一停止一开始一停止”的交互过程，使它响应更灵敏。在会话的开始，浏览器加载了一个AJAX引擎，这是采用Javascript编写的程序，通常在一个隐藏frame中。这个引擎负责绘制用户界面以及与服务器端通讯。通过这个引擎，AJAX允许用异步的方式实现用户与程序的交互，从而当浏览器向服务器发送数据请求时，不用等待服务器的通讯反应，所以用户不用打开一个空白窗口，看到等待光标不断的转，等待服务器完成后再响应。使用AJAX，可以为ISP、开发人员、终端用户带来可见的便捷:(1)无刷新更新页面，减少用户心理和实际的等待时间。特别的，当要读取大量的数据的时候，不用像ReIoad那样出现白屏的情况，AJAX使用XMLHTTPRequest对象发送请求并得到服务器响应，在不重新载入整个页面的情况下用Javascript操作OOM最终更新页面。所以在读取数据的过程中，用户所面对的不是白屏，是原来的页面内容(也可以加一个Loading的提示框让用户知道处于读取数据过程)，只有当数据接收完毕之后才更新相应部分的内容。这种更新是瞬间的，用户几乎感觉不到，带来了更好的用户体验。(2)减轻服务器的负担。AJAX的原则是“按需取数据”，可以最大程度的减少冗余请求和响应对服务器造成的负担。同时，AJAX可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。(3)具有良好的集成性，可以调用外部数据，同时，基于标准化的并被广泛支持的技术，AJAX不需要下载插件或者小程序就能支持丰富的用户交互功能。(4)程序框架清晰，进一步促进页面呈现和数据的分离。下面再来介绍Ajax的各个组成部分。3.3JavaScriptJavaScript是一种基于对象(Object)和事件驱动(EventDriven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java脚本语言（Java小程序）一起实现在一个Web页面中链接多个对象，与Web客户交互作用。从而可以开发客户端的应用程序等。它是通过嵌入或调入在标准的HTML语言中实现的。它的出现弥补了HTML语言的缺陷，它是Java与HTML折衷的选择，具有以下几个基本特点[17]：(1)是一种脚本编写语言JavaScript是一种脚本语言，它采用小程序段的方式实现编程。像其它脚本语言一样,JavaScript同样已是一种解释性语言,它提供了一个易的开发过程。

它的基本结构形式与C、C++、VB、Delphi十分类似。但它不像这些语言一样，需要先编译，而是在程序运行过程中被逐行地解释。它与HTML标识结合在一起，从而方便用户的使用操作。

(2)基于对象的语言

JavaScript是一种基于对象的语言，同时以可以看作一种面向对象的。这意味着它能运用自己已经创建的对象。因此，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用。

(3)简单性

JavaScript的简单性主要体现在：首先它是一种基于Java基本语句和控制流之上的简单而紧凑的设计,从而对于学习Java是一种非常好的过渡。其次它的变量类型是采用弱类型，并未使用严格的数据类型。

(4)安全性

JavaScript是一种安全性语言，它不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失。

(5)动态性

JavaScript是动态的，它可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的反映响应，是采用以事件驱动的方式进行的。所谓事件驱动，就是指在主页(HomePage)中执行了某种操作所产生的动作，就称为“事件”(Event)。比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后，可能会引起相应的事件响应。

(6)跨平台性

JavaScript是依赖于浏览器本身，与操作环境无关，只要能运行浏览器的计算机，并支持JavaScript的浏览器就可正确执行。从而实现了“编写一次,走遍天下”的梦想。

实际上JavaScript最杰出之处在于可以用很小的程序做大量的事。无须有高性能的电脑，软件仅需一个字处理软件和一个浏览器，无须WEB服务器通道，通过自己的电脑即可完成所有的事情。综上所述JavaScript是一种新的描述语言，它可以被嵌入到HTML的文件之中。JavaScript语言可以做到回应使用者的需求事件(如：form的输入)，而不用任何的网路来回传输资料，所以当一位使用者输入一项资料时，它不用经过传给伺服端(server)处理，再传回来的过程，而直接可以被客户端(client)的应用程式所处理。在项目中使用JavaScript代码与服务器进行交互。3.4XMLHTTPRequest对象XMLHTTPRequest对象可以说是Ajax中最关键的组成部分，它是AjaxWeb应用程序能够区别于传统Web应用程序之所在，它实现了Ajax的异步特性。在本项目中，凡是涉及到与服务器进行交互的地方，几乎都使用到了该对象。XmlHttpRequest对象最初是在IE5中以ActiveX组件的形式出现的。直到最近，Mozilla1.0和Safari1.2把它采用为事实上的标准。注意XmlHttpRequest并不是W3C标准，所以在不同的浏览器上的表现也有所区别，不过大多数的方法和属性都得到了广泛的支持。目前。FireFox，safari，opera和IE都以类似的方式实现了XmlHttpRequest对象的行为。3.4.1创建XMLHTTPRequest对象在使用XMLHTTPRequest对象发送请求和处理响应之前，必须先用JavaScript创建一个XMLHTTPRequest对象。由于XMLHTTPRequest不是一个W3C标准，所以可以采用多种方法使用JavaScript来创建XMLHTTPRequest对象的实例。IE把XMLHTTPRequest实现为一个Activex对象，其他浏览器（如Firerox、Safari和Opera）把它实现为一个本地Javascript对象。由于存在这些差别，Javascript代码中必须包含有关的逻辑，从而使用Activex技术或者使用本地Javascript对象技术来创建XMLHTTPRequest的一个实例。很多人可能还记得从前的那段日子，那时不同浏览器上的Javascript实现简直千差万别，听了上面这段话之后．这些人可能又会不寒而栗。幸运的是，在这里为了明确该如何创建XMLHTTPRequest对象的实例．并不需要那么详细地编写代码来区别浏览器类型。你要做的只是检查浏览器是否提供对Activex对象的支持。如果浏览器支持Activex对象．就可以使用Activex来创建XMLHTTPRequest对象。否则，就要使用本地Javascript对象技术来创建。下面是一段创建针对不同浏览器的XMLHTTPRequest对象的Javascript代码[1]。//声明一个XMLHTTPRequest对象varxmlHttp;//创建一个XMLHTTPRequest对象的函数functioncreateXMLHttpRequest(){if(window.ActiveXObject){//创建针对IE的XMLHTTPRequest对象xmlHttp=newActiveXObject("Microsoft.XMLHTTP");}elseif(window.XMLHttpRequest){//创建针对非IE的XMLHTTPRequest对象xmlHttp=newXMLHttpRequest();}}上面的这段代码展示了如何创建一个可用于多个浏览器的XMLHTTPRequest对象的Javascript代码。我已对面代码加入了注释，可以很清楚的看出XMLHTTPRequest对象是如何被创建的。可以看到，创建XMLHTTPRequest对象相当容易。首先，要创建一个全局作用域变量xmlHttp来保存这个对象的引用。createXMLHttpRequest方法完成创建XMLHTTPRequest实例的具体工作。这个方法中只有简单的分支逻辑(选择逻辑)来确定如何创建对象。对window.ActivexObject的调用会返回一个对象，也可能返回null，if语句会把调用返同的结果看作是true或false(如果返回对象则为true，返回null则为false)，以此指示浏览器是否支持Activex控件，相应地得知浏览器是不是IE。如果确实是，则通过实例化ActivexObject的一个新实例来创建XMLHTTPRequest对象．并传入一个串指示要创建何种类型的Activex对象。在!这个例子中．为构造函数提供的字符串是Microsoft。XMLHTTP，这说明你想创建XMLHTTPRequest的一个实例。如果window.ActiveXObject调用失败(返同null)，Javascript就会转到else语句分支，确定浏览器是否把XMLHTTPRequest实现为一个本地Javascript对象，如果存在window.XMLHTTPRequest，就会创建XMLHTTPRequest的一个实例。由于Javascript具有动态类型特性，而且XMLHTTPRequest在不同浏览器上的实现是兼容的，所以可以用同样的方式访问XMLHTTPRequest实例的属性和方法．而不论这个空例创建的方法是什么。这就大大简化了开发过程。而且在Javascript中也不必编写特定于浏览器的逻辑。3.4.2XMLHTTPRequest对象的方法XMLHTTPRequest对象有一些典型的方法供我们使用，下图是XMLHTTPRequest的标准操作[3];[5];[6];[7]。图3-6XMLHTTPRequest的标准操作下面来更详细地讨论这些方法：voidopen(Stringmethod,Stringurl,booleanasynch,Stringusername,Stringpassword)：这个方法会建立对服务器的调用。这是初始化一个请求的纯脚本方法。它有两个必要的参数，还有3个可选参数。要提供调用的特定方法(GET、POST或Put)。还要提供所调用资源的URL。另外还可传传递个Boolean值，指示这个调用是异步的还是同步的。默认值为true，表示请求本质上是异步的。如果这个参数为false．处理就会等特。直到从服务器返回响应为止。由于异步调用是使用Ajax的主要优势之一，所以倘若将这个参数设置为false．从某种程度上讲与使用XMLHTTPRequest对象的初衷不太相符。不过，前面己经说过，在某些情况下这个参数设置为false也是有用的，比如在持久存储面面之前可以先验证用户的输入。最后两个参数不说自明，允许你指定一个特定的用户名和密码。voidsend(conent)：这个方法具件向服务器发求，如果请求声明为异步的，这个方法就会立即返回，否则它会等待直到接收到响应为止。可选参数可以是DOM对象的实例、输入流，或者串。传入这个方法的内容会作为请求体的一部分发送。voidsetRequestHeader(stringheader，stringvalue)：这个方法为HTTP请求中一个给定的首部设置值。它育两个参数，第一个串表示要设置的苜部，第二个串表示要在首部中放置的值。需要说明，这个方法必须在调用open()后才能调用。在所有这些方法中．最有可能用到的就是open()和send()。XMLHTTPRequest对象还有许多属性，在设计Ajax交互时这些属性非常有用。vodabort()：顾名思义。这个方法就是要停止请求。StringgetAllResponseHeaders()：这个方法的核心功能对Web应用开发人员应该很熟悉了，它返回一个串，其中包含HTTP请求的所有响应首部，首部包括Content–length、Date和URI。

StringgetResponseHeader(stringheader)：这个方法与getAllResponseHeaders()是对应的．不过它有一个参数表示你希望得到的指定首部值，并且把这个值作为串返回。3.3.3XMLHTTPRequest对象的属性XMLHTTPRequest对象除了一些典型的方法以外，还有一些属性，下图就是XMLHTTPRequest的属性[3]。图3-7XMLHTTPRequest的标准属性从上面的图中可以很清楚的看出XMLHTTPRequest的各个属性的含义。3.3.4使用XMLHTTPRequest进行交互的示例下面的一张图描述了XMLHTTPRequest如何接受请求和处理响应的[2]：图3-8标准Ajax交互模型从上图中，可以看到Ajax交互的整个流程[12];[13]：客户端触发了一个Ajax事件；创建了一个XMLHTTPRequest对象实例；向服务器发送请求；服务器访问数据库；请求返回浏览器；XMLHTTPRequest调用回调函数callback()。以上就是使用XMLHTTPRequest进行异步访问的整个流程。3.5DOM3.5.1DOM简介DOM的全称是DocumentObjectModel，也即文档对象模型，是一个W3C规约，可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。DOM是表示和处理一个XML或HTML的常用方法。DOM实际上是以面向对象方式描述的对象模型，可以把DOM认为是页面上数据和结构的一个树形表示。下面是一个HTML文档的DOM树示例[3]：图3-9DOM眼中的HTML文档作为W3C的标准接口规范，目前，DOM由三部分组成，包括：核心（core）、HTML和XML。核心部分是结构化文档比较底层对象的集合，这一部分所定义的对象已经完全可以表达出任何HTML和XML文档中的数据了。HTML接口和XML接口两部分则是专为操作具体的HTML文档和XML文档所提供的高级接口，使对这两类文件的操作更加方便。

目前，DOM有两个版本，一个是由W3C于1998年8月18日通过的DOMLevel1，另一个则是正在制定过程中的DOMLevel2，W3C已于2000年3月7日通过了DOMLevel2的候选推荐版本。3.5.2XMLDOMDOM接口提供了一种通过分层对象模型来访问XML文档信息的方式，这些分层对象模型依据XML的文档结构形成了一棵节点树。无论XML文档中所描述的是什么类型的信息，即便是制表数据、项目列表或一个文档，利用DOM所生成的模型都是节点树的形式。也就是说，DOM强制使用树模型来访问XML文档中的信息。由于XML本质上就是一种分层结构，所以这种描述方法是相当有效的。

对于XML应用开发来说，DOM就是一个对象化的XML数据接口，一个与语言无关、与平台无关的标准接口规范。它定义了HTML文档和XML文档的逻辑结构，给出了一种访问和处理HTML文档和XML文档的方法。利用DOM，程序开发人员可以动态地创建文档，遍历文档结构，添加、修改、删除文档内容，改变文档的显示方式等等。可以这样说，文档代表的是数据，而DOM则代表了如何去处理这些数据。无论是在浏览器里还是在浏览器外，无论是在服务器上还是在客户端，只要有用到XML的地方，就会碰到对DOM的应用。本项目中也经常使用DOM处理XML。使用DOM处理XML有一些相应的属性和方法，下表就给出了这些属性和方法的名称和描述[1]。表3-1DOM处理XML的属性属性名描述childNodes返回当请元素所有则元素色数组firstChild返回当前元素的第一个下级子元素lastChild返回当前元素的最后一个子元素nextSibling返回紧跟在当前元素后面的元素nodeValue制定表示元素值的读/写属性parentNode返回元素的父节点previousSibling返回紧邻当前元素之前的元素表3-2DOM处理XML的方法方法名描述getElementById(id)(document)获取有指定惟一ID属性值文档中的元素getElementsByTagName(name)返回当前元素中有指定标记名的子元素的数组hasChildNodes()返回一个布尔值，指定元素是否有子元素getAttribute(name)返回元素的属性值，属性由name指定3.5.3使用DOM动态编辑页面使用DOM动态编辑页面也就是说使用DOM来改变HTML文档的结构。HTMLDOM是HTMLDocumentObjectModel(文档对象模型)的缩写，HTMLDOM则是专门适用与HTML/XHTML的文档对象模型。熟悉软件开发的人员可以将HTMLDOM理解为网页的API。它将网页中的各个元素都看作一个个对象，从而使网页中的元素也可以被计算机语言获取或者编辑。例如Javascript就可以利用HTMLDOM动态的修改网页。同样，使用HTMLDOM也有相对应的属性和方法，下表就是这些属性和方法的名称和描述[1]。属性/方法描述document.createElement(tagName)创建由tagName指定的元素。Document.createTextNode(text)创建一个包含静态文本的节点。<element>.appendChild(childNode)将指定的节点增加到当前元素的子节点列表(作为一个新的子节点)<element>.getAttribute(name)获取元素中name属性的值<element>.setAttribute(name,value)设置元素中name属性的值<element>.insertBefore(newNode,targetNode)将newNode节点作为当前元素的子节点插到targetNode元素前面。<element>.removeAttribute(name)从元素中删除属性name<element>.removeChild(childNode)从元素中删除子元素childNode<element>.replaceChild(newNode,oldNode)将oldNode节点替换为newNode节点<element>.hasChildnodes()返回一个布尔值，指示元素是否有子元素表3-3DOM动态编辑页面的方法和属性总之，使用DOM可以方便的操作XML文档和改变文档的结构，它是Ajax的重要组成部分之一，没有DOM，Ajax中最有意思的那部分也许就不会出现。3.6用CSS定义应用的外观CSS是Web设计沿用已久的部分，无论是在传统的Web应用还是在Ajax应用中，CSS都是一种频繁使用的技术。样式表提供了集中定义各种视觉样式的方法，并且可以非常方使地设置在页而的元索上，样式表可以定义一些明显的样式元素．例如颇色、边框、背景图片、透明度和大小等。此外，样式表还可以定义元素相互之间的布局以及简单的用户交互功能，仅仅通过样式表就可以实现眩目的视觉效果。在传统的Web应用中．样式表提供了一种很有用的方法，可以在某个地方定义在很多页面中重用的样式。在Ajax应用中。我们不再将应用思考为快速切换的一系列页面，但是样式表仍然是很有帮助的。它可以用最少的代码动态地为元素设置预先定义的外观。CSS样式为一个文档定义显示规则，通常放在一个单独的文件中，由应用这些样式的Web页面来引用。当然，也可以在Web页面中定义样式规则，这通常是种很糟糕的做法。由于CSS并不是Ajax的特点，这里就不详细介绍了。3.7jQueryTab插件jQuery由JohnResig创建于2006年初，对于任何使用JavaScript代码的程序员来说，它是一个非常有用的JavaScript库。jQuery是一个快速,简练的的JavaScript工具箱它能够让你以简单的方式来操作HTML元素,处理事件,实现特效并为Web页面添加Ajax交互。jQuery设计用于改变你编写JavaScript的方式。在本项目中主要使用到了jQueryTab插件实现AjaxTab页面的效果。jQueryTab插件提供了多种Tab方式，其中包括AjaxTab，本项目采用了AjaxTab这一样式，效果如下图所示：图3-10AjaxTab效果另外在本项目中实现了Tab页的名称和链接的动态配置，这一部分将在第四部分进行详细介绍。4.软件测试网站开发与实现4.1开发环境及工具操作系统：MicrosoftWindowsXPProfessionalEdition。开发平台：Myeclipse5.0，Dreamweaver8.0，Tomcat5.0，SQLServer2000。开发语言：Java，Javascript。辅助开发工具：MicrosoftOffice2003，IE7.0。4.2系统实现4.2.1软件测试网站流程图第四部分主要介绍软件测试网站的具体实现。首先，会介绍整个网站的使用流程；然后介绍相应的界面；最后，我会介绍部分功能的具体实现过程，由于网站的很多地方都使用到了Ajax技术，在本文中以登录，Tab页的动态加载，数据联动为例说明Ajax在软件测试网站中的应用。图4-1软件测试网站流程图上图就是软件测试网站的流程图，通过这张图可以清楚的了解网站的使用流程和功能，下面来介绍网站的界面实现和部分功能实现。4.2.2软件测试网站界面实现网站首页本网站首页效果如下图所示：图4-2网站首页界面可以看到网站首页使用到了Tab技术，下图是点击一个Tab的效果。图4-3Tab效果当用户名或密码错误时，页面不刷新，动态在下面给出提示。图4-4登录提示界面学生界面学生登录成功后，学生主界面如下：图4-5学生主界面修改个人信息时，如修改成功则会在下面动态给出提示，页面不需要刷新。图4-6修改个人信息界面修改完个人信息，可以点击查看个人信息。图4-7查看个人界面学生点击查看作业是，会显示作业列表图4-8查看作业信息界面点击一个作业，进入该作业的详细信息页面，在这里可以提交作业和下载作业图4-9作业详细信息界面点击查看问题，会出现问题列表，点击问题，就会进入问题相关回复页面图4-10查看问题信息界面图4-11问题详细信息界面3.管理员端界面管理员登录成功后，主界面如下：图4-12管理员端主界面删除新闻的界面如下图所示(使用了数据联动技术)：图4-13删除新闻界面查看用户信息界面：图4-14查看用户信息界面发布作业界面：图4-15发布作业界面图4-16发布作业界面（上传作业文件）回复问题界面：图4-17回复问题界面4.2.3登录的Ajax实现本系统使用Ajax技术来实现用户的登录，不需要刷新页面，下面介绍具体的实现过程。1.创建XMLHTTPRequest对象varxmlHttp;functioncreateXMLHttpRequest(){if(window.ActiveXObject){xmlHttp=newActiveXObject("Microsoft.XMLHTTP");}elseif(window.XMLHttpRequest){xmlHttp=newXMLHttpRequest();}}上面的这段代码创建了一个针对于不同浏览器的XMLHTTPRequest对象，由于在第三部分已经介绍过了，因此就不详细解释了。2.创建查询字符串当创建了一个XMLHTTPRequest对象后，需要为其open()方法指定一个URL，使用createQueryString()方法创建查询字符串，代码如下：functioncreateQueryString(){varusername=document.getElementById("username").value;varpassword=document.getElementById("password").value;varqueryString="username="+username+"&password="+password;returnqueryString;}其中document.getElementById("username").value得到的是表单中名为username的文本框中输入的值，document.getElementById("password").value得到的是表单中名为password的文本框中输入的值。我们知道URL后面是可以带参数的，所以我们可以把表单中的数据作为参数加在URL后面。varqueryString="username="+username+"&password="+password创建了一个这样的URL参数字符串。3.发出请求创建了URL之后，我们就可以使用XMLHTTPRequest发出一个到服务器的请求,代码如下：functiondoRequestUsingGET(){createXMLHttpRequest();varqueryString="login.do?";queryString=queryString+createQueryString()+"&timeStamp="+newDate().getTime();xmlHttp.onreadystatechange=handleStateChange;xmlHttp.open("GET",queryString,true);xmlHttp.send(null);}这里首先生成了一个完整的带参数的URL字符串，其中login.do是后台中处理请求的函数。使用onreadystatechange属性指定了一个当readystate属性变化时要调用的函数，然后使用open()方法发起一个到服务器的连接，由于这里使用的是GET方法，所以send()方法的参数是null。4.分析服务器响应当服务器响应返回时，需要对服务器返回的数据进行分析，代码如下：functionhandleStateChange(){if(xmlHttp.readyState==4){if(xmlHttp.status==200){parseResults();}}}functionparseResults(){varresponseDiv=document.getElementById("serverResponse");if(responseDiv.hasChildNodes()){responseDiv.removeChild(responseDiv.childNodes[0]);}varres=xmlHttp.responseText;if(res.toString().search("success")!=-1){window.location.href="student/index.html";}if(res.toString().search("teacher")!=-1){window.location.href="manage/index.html";}varresponseText=document.createTextNode(xmlHttp.responseText);responseDiv.appendChild(responseText);}Readystate的值为4说明已经得到服务器的响应，就调用parseResults()函数。在parseResults()函数中，对服务器返回的数据进行分析，xmlHttp.responseText是服务器返回的数据，如果返回的值是success，则浏览器定向到学生端的首页面，如果返回的值是teacher，则浏览器定向到管理员端的首页面，否则使用DOM创建一个TextNode，其值为服务器返回的值，然后将其加到名为serverResponse的div中。这样整个登录部分就完成了，这段代码在登录按钮的onclick事件中调用。4.2.4Tab页的动态加载本网站的首页使用jQueryTab插件实现了AjaxTab效果，jQuery已经定义好了Tab的CSS样式，下面介绍如何实现Tab页的动态加载即Tab页的动态配置。主要代码如下：functionstart(){createXMLHttpRequest();xmlHttp.onreadystatechange=handleStateChangetab;xmlHttp.open("GET","tab.xml",true);xmlHttp.send(null);}functionhandleStateChangetab(){varxmlDoc=xmlHttp.responseXML;if(xmlHttp.readyState==4){if(xmlHttp.status==200){ varxml=xmlDoc.getElementsByTagName("t"); for(vari=0;i<xml.length;i++){ varli=document.createElement("li"); vardiv=document.createElement("div"); vara=document.createElement("a");varspan=document.createElement("span");vartext=xml[i].childNodes[0].childNodes[0].nodeValue;varhref=xml[i].childNodes[1].childNodes[0].nodeValue;div.setAttribute("align","center"); a.setAttribute("href",href); li.appendChild(div); div.appendChild(a); a.appendChild(span); span.appendChild(document.createTextNode(text)); vartab=document.getElementById("tab"); tab.appendChild(li);} }}}上面的代码就是本系统中实现Tab页的动态加载的主要代码，由于创建XMLHTTPRequest对象的方法在前面已经介绍过了，这里就不再将其列出，下面就这段代码进行分析：1.发出请求在start()函数中，xmlHttp.onreadystatechange=handleStateChangetab规定了当readystate值发生变化时所需调用的函数。xmlHttp.open("GET","tab.xml",true)打开了一个到服务器的连接，使用GET方法访问tab.xml文件。2．分析服务器返回的XMLvarxmlDoc=xmlHttp.responseXML得到服务器返回的XML数据，下面的代码就是对返回的XML进行分析。tab.xml文件的内容如下所示：<?xmlversion="1.0"encoding="gb2312"?><tab><t><title>最新公告</title><link>news/new1.jsp</link></t><t><title>最新动态</title><link>news/new2.jsp</link></t><t><title>测试工具</title><link>news/new4.jsp</link></t><t><title>测试教程</title><link>news/new3.jsp</link></t><t><title>招聘信息</title><link>news/new5.jsp</link></t></tab>varxml=xmlDoc.getElementsByTagName("t")得到tab.xml中标记为t的元素的数组，可以使用length属性得到数组的长度，在tab.xml中有5个t标记，所以数组的长度为5，然后，使用for循环创建5个Tab页。varli=document.createElement("li")，vardiv=document.createElement("div")，vara=document.createElement("a")和varspan=document.createElement("span")使用DOM创建了li、div、a和span四个html元素。vartext=xml[i].childNodes[0].childNodes[0].nodeValue和varhref=xml[i].childNodes[1].childNodes[0].nodeValue从tab.xml中分别找到<title>和<link>元素的值。div.setAttribute("align","center")和a.setAttribute("href",href)分别设置了div的align属性的值为center和a的href属性的值为href的值。li.appendChild(div);div.appendChild(a);a.appendChild(span);span.appendChild(document.createTextNode(text));vartab=document.getElementById("tab");tab.appendChild(li);使用DOM将各html元素加入到页面中ID为tab的元素的子元素中。这样，Tab页面的动态加载就完成了，在body元素的onload事件中调用这个函数就可以实现tab页面的动态加载了，并且通过修改tab.xml中的内容就可以完成tab页的增加，修改和删除。4.2.5数据联动下面来介绍数据联动的实现，数据联动是指，当用户选择下拉框的一个选项，另外一个下拉框根据上一个下拉框中选择的选项动态的更新下拉框的选项。在本系统的新闻管理中用到了数据联动，当用户选择一个新闻类别，新闻标题下拉框动态的加载此类别中的所有新闻标题。下面具体地介绍一下实现过程。在body的onload事件中调用startRequest()函数，会发送open("GET","GetNewsType",true)这样的一个请求，GetNewsType会以XML格式输出所有新闻类别。handleStateChange()函数分析返回的XML并得到新闻类别的值，然后将它们填充到新闻类别下拉框中。完成新闻类别下拉框的填充后，会发送open("POST","GetNewsBySelect",true)这样的请求，URL参数使用send()方法传送(xmlHttp.send(queryString))。GetNewsBySelect以XML格式输出某新闻类别下的所有新闻标题，使用handleStateChange1()函数分析返回的XML并得到新闻标题的值，然后将它们填充到新闻标题下拉框中。完成新闻标题下拉框的填充后，会发送open("POST","GetNewsContentById",true)这样的请求，GetNewsContentById以Text的方式返回新闻内容。handleStateChange2()函数得到返回的Text并将其显示在相应的位置。最后，在新闻标题和新闻类别下拉框的onchange事件中分别调用doRequest()方法和doRequestUsingPOST()方法就可以实现数据联动了。总结本课题讨论了软件测试网站表现层的设计与实现。目前，软件测试人才缺乏，而市场需求较大，建立软件测试网站可以促进高校同学交流，