《软件开发架构平台技术》实验指导书

1《软件开发架构平台技术》课程实验指导书编写宋铁中南大学软件学院2013年8月实验一用AJAX改进用户体验一、实验目的熟悉AJAX相关技术，掌握异步交互的通信方式，熟练使用JavaScript以及CSS等客户端技术，熟练掌握XMLHttpRequest对象的使用，掌握用AJAX技术改善Web应用的用户体验。二、实验内容AJAX开发。在JSP/Servlet实现的JPetStore项目基础上，在表单验证、表单输入、订单更新等环节增加AJAX技术，改善项目的用户体验。任务一：账号管理模块。在新建账号和修改账号信息页面上用AJAX技术进行表单验证。任务二：查询商品模块。在主页面右上角的查询商品功能中添加自动补全功能。任务三：商品展示模块。在首页展示商品的图片上添加AJAX效果，即当鼠标移到某个商品图片上时，用悬浮窗展示该类型商品的信息。三、实验要求1.熟练使用JavaScript+CSS进行客户端编程；2.熟练XMLHttpRequest对象与服务器异步交互；3.熟练使用AJAX技术改善Web应用的用户体验。四、实验步骤1.将之前用JSP/Servlet完成的JPetStore项目部署并配置运行；2.用AJAX改善登录的用户体验。五、实验报告要求1.简要列举项目应用了AJAX技术的功能模块以及有无使用框架。2.说明应用AJAX技术的理由、具体实现方法和核心源代码。3.应用了AJAX技术之后的效果截图4.打包提交所有源代码。5.每个小组提交一份实验报告，在报告末尾列举小组成员分工。2附录（JPetStore相关说明）：1.JPetStore功能需求说明宠物店（PetStore）是迄今为止最著名的一个学习JavaWeb编程和应用开发的经典入门案例。宠物店软件有多个版本，包括原来Sun的JavaPetStore、iBATISJPetStore（ClintonBegin）和SpringJPetStore（JuergenHoeller）等等。JPetStore项目需求流程示意图为：每一个模块的具体功能描述可以参看所下载源代码中的help.html文件。本实验中使用的JPetStore版本是其网上商店部分，不包括后台管理部分。所以其用户用例图为：32.JPetStore的数据库设计JPetStore中主要包含3种实体：产品Product、帐户Account和定单Order。产品相关的表有category、product、item、inventory、supplier。用户相关表有的account、signon、profile。和定单相关的表有orders、orderstatus、lineitem。表之间的关系如下图所示：4