AJAX简单的交互系统论文模板.docx

1、AJAX简单的交互系统论文模板河南理工大学结课作品课程名称：_ Ajax_ 内容名称：_跆拳道交流系统_学 院：_软件学院_专业班级：_计算机应用09-2_ * * *_ 学 号：*_学生自我评价 经过对Ajax的学习，不仅锻炼了我的逻辑思维能力，经过这次为期三周的实训，锻炼了动手操作能力，强化了思维创新能力，相信为以后的工作之路留下更加踏实的学习态度和严谨的工作态度。评阅意见：（评阅成绩：_）评定教师签名： 日期： 1. 需求分析1.1 系统功能需求跆拳道交流系统是一个意在为广大跆拳道爱好者提供一个交流平台，其后台运行主要以AJAX实现；功能主要包括用户对各个模块的需求 . 主要实现的后台功

2、能跆拳道会员登录：浏览信息，帐号管理功能：查看帐号信息，修改帐户信息。1.2 系统软硬件需求 本程序开发所用的是Myeclipse 7.0 应用开发软件+Mysql6.0数据库所开发完成,所以如需要对程序和里面的核心代码进行修改或者重建需要使用7.0以及以上版本的开发软件对其进行在开发和使调,否则将产生不可预知的错误，或者调试不能通过而导致出错和一系列错误.2. 概要设计2.1 系统概述本系统是实时在线的跆拳道交流系统，因此应该构建在internet网络上，通过上网的方式随时使用。我们在这里使用myeclipse开发互联网程序来实现功能是比较方便的，同时可以利用AJAX技术来编写本系统。2.2

3、 系统总体结构图跆拳道交流系统，需要建立一套数据库系统，以及后台可简单操作的系统来进行对各种信息的操作。从实际用途的角度出发，系统的总体功能进行大致的规划后台管理，2.3 系统结构设计跆拳道发布系统是一个基于B/S架构的系统。系统的用户在客户端通过IE浏览器来访问广告发布系统。为了保证系统的安全性和稳定性，2.4登录设计用户在使用登录模块的过程中，需要根据身份来进行登录，系统将通过选择进行处理，然后进入到相应的界面中去。会员进入后可以进行添加删除等一系列的操作，也可以发布广告、修改个人信息。如果发现无正确的用户信息，系统将会给出提示，并且重新返回登录页面，如下图 2.6。图2.6 登录模块示意

4、图2.5 注册设计用户在使用注册模块的过程中，需要注册自己的个人信息，系统将其注册的信息储存到数据库中，然后进入到相应的界面中去。称为会员后，可以进入主页进行各种信息修改以及阅读网站信息。2.6 留言板设计用户在使用留言板模块的过程中，需要根据身份来进行登录，系统将通过选择进行处理，然后进入到相应的界面中去。然后进入留言板模块，进行留言2.7 站内公告管理员在使用留言板模块的过程中，需要根据身份来进行登录，系统将通过选择进行处理，然后进入到相应的界面中去。然后进入公告模块，进行在本网站进行各种公告。 3详细设计3.1系统模块构成1)会员注册 新会员填写表单，包括会员名、E-mail地址等信息。

5、如果输入的会员名已经被其他用户注册使用，系统提示新用户更改自己的会员名。2)会员登录 输入会员名、密码。如果用户输入的会员或密码有错误，系统将显示错误信息。3)留言板 输入昵称，性别以后，然后可以输入你现在的心情，你还可以选择自己的头像作为自己留言时的头像，可以发表你自己想说的话4)退出登录 成功登录的用户可以使用该模块退出登录。3.2数据库设计系统采用加载纯java数据库驱动程序的方式访问数据库。使用SQL Server 2005建立一个数据库Friend，该库有一个member表。会员的注册信息存入member表中，member表的主键是logname，各个字段值的说明如下：logname

6、：存储会员登录名字。password：存储会员登录密码。phone:存储会员的电话。email:存储会员的email地址。member表的相信结构设计如图：3.3系统管理本系统使用的web服务目录是ch2，ch2是在tomcat安装目录的webapps目录下建立的web服务目录。现在需要在当前web服务目录下建立如下的目录结构：Ch2WEB-INFclasses然后根据servlet的包名，在classes下再建立相应的子目录，比如Servlet类的包名为myservlet.control,那么在classes下建立子目录myservletcontrol;如果Javabean类的包名为mybe

7、an,data,那么在classes下建立子目录mybeandata.为了让Tomcat服务器启用上述目录，必须重新启动Tomcat服务器。本系统用的AJAX交互页面全部保存在Web服务目录ch2中。2.Javabean与servlet管理本系统的Javabean类的包名均为mybean.data，Servlet类的包名均为myservlet.control。由于Servlet类中要使用Javabean,所以为了能顺利地编译Servlet类，首先将Javabean类和Servlet类分别保存到D:myservletcontrolmybeandata和D:myservletcontrol目录中。

8、分别进入上述目录，编译Javabean类和Servlet类，然后将编译通过的Javabean类和Servlet类的字节码件分别复制到ch10WEB-INFclassesmybeandata和ch10WEB-INFclassesmyservletcontrol目录中。3.配置文件管理本系统的Servlet类的包名为myservlet.control,需要配置Web服务目录的web.xml文件。将下面的web.xml文件保存到 E:apache-tomcat-5.5.20webappsch12WEB-INF中。web.xmlweb-app id=WebApp_ID version=2.4 xmln

9、s= xmlns:xsi=http:/www.w3.org/2001/XMLSchema-instance xsi:schemaLocation= Advertisement register myservlet.control.HandleRegister register /helpRegister login myservlet.control.HandleLogin login /helpLogin modifyPassword myservlet.control.HandlePassword modifyPassword /helpModifyPassword getOldMess

10、myservlet.control.GetOldMess getOldMess /helpGetOldMess modifyOldMess myservlet.control.HandleModifyMess modifyOldMess /helpModifyMess exit myservlet.control.HandleExit exit /helpExitLogin index.html index.htm index.jsp default.html default.htm default.jsp 3.3.1会员注册 当新会员注册时，该模块要求用户必须输入会员名、密码信息，否则不允许

11、注册。用户的注册信息被存入数据库的member表中。 该模块的模型Javabean描述用户的注册信息。该模块试图部分由两个JSP页面构成，一个JSP页面负责提交用户的注册信息到控制器，另一个JSP页面负责显示注册是否成功的信息。该模块的控制器servlet负责将视图提交的信息写入数据库的member表中，并负责更新视图。1.模型（Javabean）下列Javabean用来描述用户注册信息。Register.javapackage mybean.data;public class Register String logname=,password=,advertiseTitle=,email=,

12、phone=,message=; String backNews; public String getLogname() return logname; public void setLogname(String name) this.logname = name; public String getPassword() return password; public void setPassword(String pw) this.password = pw; public String getEmail() return email; public void setEmail(String

13、 em) this.email = em; public String getPhone() return phone; public void setPhone(String ph) this.phone = ph; public String getBackNews() return backNews; public void setBackNews(String s) this.backNews = s;2.视图（JSP页面）本模块视图有两个JSP页面。Register.jsp和showRegisterMess.jsp。Register.jsp页面负责提供输入注册信息界面，showReg

14、isterMess.jsp负责显示注册反馈信息，比如注册是否成功等。主要代码如下：register.jsp3.4. 用户注册5. 6. 11. 12. 13.14.var xmlHttp=false;15.function createXMLHttpRequest() 16.17. if (window.ActiveXObject) /在IE浏览器中创建XMLHttpRequest对象18. 19. try20. xmlHttp=new ActiveXObject(Msxml2.XMLHTTP);21. 22. catch(e)23. try24. xmlHttp = new ActiveXO

15、bject(Microsoft.XMLHTTP);25. 26. catch(ee)27. xmlHttp=false;28. 29. 30. 31. else if (window.XMLHttpRequest) /在非IE浏览器中创建XMLHttpRequest对象32. 33. try34. xmlHttp = new XMLHttpRequest();35. 36. catch(e)37. xmlHttp=false;38. 39. 40.41.function checkName()42.43. createXMLHttpRequest(); /调用创建XMLHttpRequest对

16、象的方法44. xmlHttp.onreadystatechange=callback; /设置回调函数45. var nameStr=form1.name.value;46. var url=servlet/CheckName?name=+nameStr;47. xmlHttp.open(post,url); /向服务器端发送请求48. xmlHttp.setRequestHeader(Content-Type,application/x-www-form-urlencoded;charset=gb2312);49. xmlHttp.send(null); 50. function call

17、back()51. 52. if(xmlHttp.readyState=4)53. 54. if(xmlHttp.status=200)55. 56. var str = xmlHttp.responseText;57. var nameText=document.getElementById(nameText);58. if(str.length=2)59. 60. var message=*用户名已经存在，请另选一个注册！;61. nameText.innerHTML=message;62. else63. var message=OK;64. nameText.innerHTML=mes

18、sage;65. 66. 67. 68. 69. 70. 71.function checkPass1()72.73. var pass1=form1.pass1.value;74. var pass1Text=document.getElementById(pass1Text);75. if(pass1.length15|pass1.length8)76. 77. var message=*密码长度不合法;78. pass1Text.innerHTML=message;79. else80. 81. var message=OK;82. pass1Text.innerHTML=message

19、;83. 84.85.86.function checkPass2()87.88. var pass2Text=document.getElementById(pass2Text);89. if(form1.pass1.value!=form1.pass2.value)90. 91. var message=*两次输入的密码不一致;92. pass2Text.innerHTML=message;93. else94. 95. var message=OK;96. pass2Text.innerHTML=message;97. 98.99.function checkEmail()100.101

20、. var emailText=document.getElementById(emailText);102.var pattern = /(a-zA-Z0-9_-)+(a-zA-Z0-9_-)+(.a-zA-Z0-9_-)+/; 103.if(!pattern.test(form1.email.value)104. 105. var message=格式不正确，请检查！;106. emailText.innerHTML=message; 107. else108. 109. var message=OK;110. emailText.innerHTML=message;111. 112.11

21、3.function checkPhone()114.115. var phone=form2.phone.value;116. var phoneText=document.getElementById(phoneText);117. if(phone.length!=11)118. 119. var message=*电话长度不合法;120. phoneText.innerHTML=message;121. else122. 123. var message=OK;124. phoneText.innerHTML=message;125. 126.127.128.129. 130. 131. 132. 用户注册133. 134. 135. 用 户 名：136. 137. 请认真填写，此项不能为空138. 139. 140. 性别：141. 请选择性别142. 男143. 女144. 145. 146. 147. 密码：148. 149. 请牢记密码，勿为生日、电话号码等。此项不能为空。150. 151. 152. 重复密码：153. 154.