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

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

《AJAX简单的交互系统论文模板.docx》由会员分享，可在线阅读，更多相关《AJAX简单的交互系统论文模板.docx（30页珍藏版）》请在冰豆网上搜索。

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

河南理工大学结课作品

课程名称：

___Ajax____

内容名称：

___跆拳道交流系统_

学院：

_____软件学院_________

专业班级：

__计算机应用09-2_____

******____________

学号：

************___________

学生自我评价

经过对Ajax的学习，不仅锻炼了我的逻辑思维能力，经过这次为期三周的实训，锻炼了动手操作能力，强化了思维创新能力，相信为以后的工作之路留下更加踏实的学习态度和严谨的工作态度。

评阅意见：

（评阅成绩：

_________________）

评定教师签名：

日期：

1.需求分析

1.1系统功能需求

跆拳道交流系统是一个意在为广大跆拳道爱好者提供一个交流平台，其后台运行主要以AJAX实现；

功能主要包括用户对各个模块的需求.

主要实现的后台功能

跆拳道会员登录：

浏览信息，

帐号管理功能：

查看帐号信息，修改帐户信息。

1.2系统软硬件需求

本程序开发所用的是Myeclipse7.0应用开发软件+Mysql6.0数据库所开发完成,所以如需要对程序和里面的核心代码进行修改或者重建需要使用7.0以及以上版本的开发软件对其进行在开发和使调,否则将产生不可预知的错误，或者调试不能通过而导致出错和一系列错误.

2.概要设计

2.1系统概述

本系统是实时在线的跆拳道交流系统，因此应该构建在internet网络上，通过上网的方式随时使用。

我们在这里使用myeclipse开发互联网程序来实现功能是比较方便的，同时可以利用AJAX技术来编写本系统。

2.2系统总体结构图

跆拳道交流系统，需要建立一套数据库系统，以及后台可简单操作的系统来进行对各种信息的操作。

从实际用途的角度出发，系统的总体功能进行大致的规划后台管理，

2.3系统结构设计

跆拳道发布系统是一个基于B/S架构的系统。

系统的用户在客户端通过IE浏览器来访问广告发布系统。

为了保证系统的安全性和稳定性，

2.4登录设计

用户在使用登录模块的过程中，需要根据身份来进行登录，系统将通过选择进行处理，然后进入到相应的界面中去。

会员进入后可以进行添加删除等一系列的操作，也可以发布广告、修改个人信息。

如果发现无正确的用户信息，系统将会给出提示，并且重新返回登录页面，如下图2.6。

图2.6登录模块示意图

2.5注册设计

用户在使用注册模块的过程中，需要注册自己的个人信息，系统将其注册的信息储存到数据库中，然后进入到相应的界面中去。

称为会员后，可以进入主页进行各种信息修改以及阅读网站信息。

2.6留言板设计

用户在使用留言板模块的过程中，需要根据身份来进行登录，系统将通过选择进行处理，然后进入到相应的界面中去。

然后进入留言板模块，进行留言

2.7站内公告

管理员在使用留言板模块的过程中，需要根据身份来进行登录，系统将通过选择进行处理，然后进入到相应的界面中去。

然后进入公告模块，进行在本网站进行各种公告。

3．详细设计

3.1系统模块构成

1）会员注册新会员填写表单，包括会员名、E-mail地址等信息。

如果输入的会员名已经被其他用户注册使用，系统提示新用户更改自己的会员名。

2）会员登录输入会员名、密码。

如果用户输入的会员或密码有错误，系统将显示错误信息。

3）留言板输入昵称，性别以后，然后可以输入你现在的心情，

你还可以选择自己的头像作为自己留言时的头像，可以发表你自己想说的话

4）退出登录成功登录的用户可以使用该模块退出登录。

3.2数据库设计

系统采用加载纯java数据库驱动程序的方式访问数据库。

使用SQLServer2005建立一个数据库Friend，该库有一个member表。

会员的注册信息存入member表中，member表的主键是logname，各个字段值的说明如下：

logname：

存储会员登录名字。

password：

存储会员登录密码。

phone:

存储会员的电话。

email:

存储会员的email地址。

member表的相信结构设计如图：

3.3系统管理

本系统使用的web服务目录是ch2，ch2是在tomcat安装目录的webapps目录下建立的web服务目录。

现在需要在当前web服务目录下建立如下的目录结构：

Ch2\WEB-INF\classes

然后根据servlet的包名，在classes下再建立相应的子目录，比如Servlet类的包名为myservlet.control,那么在classes下建立子目录\myservlet\control;如果Javabean类的包名为mybean,data,那么在classes下建立子目录\mybean\data.为了让Tomcat服务器启用上述目录，必须重新启动Tomcat服务器。

本系统用的AJAX交互页面全部保存在Web服务目录ch2中。

2.Javabean与servlet管理

本系统的Javabean类的包名均为mybean.data，Servlet类的包名均为myservlet.control。

由于Servlet类中要使用Javabean,所以为了能顺利地编译Servlet类，首先将Javabean类和Servlet类分别保存到D:

\myservlet\control\mybean\data和D:

\myservlet\control目录中。

分别进入上述目录，编译Javabean类和Servlet类，然后将编译通过的Javabean类和Servlet类的字节码件分别复制到ch10\WEB-INF\classes\mybean\data和ch10\WEB-INF\classes\myservlet\control目录中。

3.配置文件管理

本系统的Servlet类的包名为myservlet.control,需要配置Web服务目录的web.xml文件。

将下面的web.xml文件保存到E:

\apache-tomcat-5.5.20\webapps\ch12\WEB-INF中。

web.xml

xmlversion="1.0"encoding="UTF-8"?

>

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

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会员注册

当新会员注册时，该模块要求用户必须输入会员名、密码信息，否则不允许注册。

用户的注册信息被存入数据库的member表中。

该模块的模型Javabean描述用户的注册信息。

该模块试图部分由两个JSP页面构成，一个JSP页面负责提交用户的注册信息到控制器，另一个JSP页面负责显示注册是否成功的信息。

该模块的控制器servlet负责将视图提交的信息写入数据库的member表中，并负责更新视图。

1.模型（Javabean）

下列Javabean用来描述用户注册信息。

Register.java

packagemybean.data;

publicclassRegister{

Stringlogname="",password="",advertiseTitle="",email="",phone="",message="";

StringbackNews;

publicStringgetLogname（）{

returnlogname;}

publicvoidsetLogname（Stringname）{

this.logname=name;}

publicStringgetPassword（）{

returnpassword;}

publicvoidsetPassword（Stringpw）{

this.password=pw;}

publicStringgetEmail（）{

returnemail;}

publicvoidsetEmail（Stringem）{

this.email=em;}

publicStringgetPhone（）{

returnphone;}

publicvoidsetPhone（Stringph）{

this.phone=ph;}

publicStringgetBackNews（）{

returnbackNews;}

publicvoidsetBackNews（Strings）{

this.backNews=s;}}

2.视图（JSP页面）

本模块视图有两个JSP页面。

Register.jsp和showRegisterMess.jsp。

Register.jsp页面负责提供输入注册信息界面，showRegisterMess.jsp负责显示注册反馈信息，比如注册是否成功等。

主要代码如下：

register.jsp

3.

4.

5.

6.

--

7.body{

8.background-image:

url（image/214e84fc66b888c8fd037f6c[1].jpg）;

9.}

10.-->

11.

12.

13.

14.varxmlHttp=false;

15.functioncreateXMLHttpRequest（）

16.{

17.if（window.ActiveXObject）//在IE浏览器中创建XMLHttpRequest对象

18.{

19.try{

20.xmlHttp=newActiveXObject（"Msxml2.XMLHTTP"）;

21.}

22.catch（e）{

23.try{

24.xmlHttp=newActiveXObject（"Microsoft.XMLHTTP"）;

25.}

26.catch（ee）{

27.xmlHttp=false;

28.}

29.}

30.}

31.elseif（window.XMLHttpRequest）//在非IE浏览器中创建XMLHttpRequest对象

32.{

33.try{

34.xmlHttp=newXMLHttpRequest（）;

35.}

36.catch（e）{

37.xmlHttp=false;

38.}

39.}

40.}

41.functioncheckName（）

42.{

43.createXMLHttpRequest（）;//调用创建XMLHttpRequest对象的方法

44.xmlHttp.onreadystatechange=callback;//设置回调函数

45.varnameStr=form1.name.value;

46.varurl="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.functioncallback（）

51.{

52.if（xmlHttp.readyState==4）

53.{

54.if（xmlHttp.status==200）

55.{

56.varstr=xmlHttp.responseText;

57.varnameText=document.getElementById（"nameText"）;

58.if（str.length==2）

59.{

60.varmessage="*用户名已经存在，请另选一个注册！

";

61.nameText.innerHTML=message;

62.}else{

63.varmessage="OK";

64.nameText.innerHTML=message;

65.}

66.

67.}

68.}

69.}

70.}

71.functioncheckPass1（）

72.{

73.varpass1=form1.pass1.value;

74.varpass1Text=document.getElementById（"pass1Text"）;

75.if（pass1.length>15||pass1.length<8）

76.{

77.varmessage="*密码长度不合法";

78.pass1Text.innerHTML=message;

79.}else

80.{

81.varmessage="OK";

82.pass1Text.innerHTML=message;

83.}

84.}

85.

86.functioncheckPass2（）

87.{

88.varpass2Text=document.getElementById（"pass2Text"）;

89.if（form1.pass1.value!

=form1.pass2.value）

90.{

91.varmessage="*两次输入的密码不一致";

92.pass2Text.innerHTML=message;

93.}else

94.{

95.varmessage="OK";

96.pass2Text.innerHTML=message;

97.}

98.}

99.functioncheckEmail（）

100.{

101.varemailText=document.getElementById（"emailText"）;

102.　varpattern=/^（[a-zA-Z0-9_-]）+@（[a-zA-Z0-9_-]）+（.[a-zA-Z0-9_-]）+/;

103.　if（!

pattern.test（form1.email.value））

104.{

105.varmessage="格式不正确，请检查！

";

106.emailText.innerHTML=message;

107.}else

108.{

109.varmessage="OK";

110.emailText.innerHTML=message;

111.}

112.}

113.functioncheckPhone（）

114.{

115.varphone=form2.phone.value;

116.varphoneText=document.getElementById（"phoneText"）;

117.if（phone.length!

==11）

118.{

119.varmessage="*电话长度不合法";

120.phoneText.innerHTML=message;

121.}else

122.{

123.varmessage="OK";

124.phoneText.innerHTML=message;

125.}

126.}

127.

128.

129.

130.

131.

132.

用户注册

133.

134.

135.用户名：

136.

137.请认真填写，此项不能为空