AJAX简单的交互系统论文模板Word文档格式.docx
- 文档编号:19683199
- 上传时间:2023-01-08
- 格式:DOCX
- 页数:30
- 大小:221.48KB
AJAX简单的交互系统论文模板Word文档格式.docx
《AJAX简单的交互系统论文模板Word文档格式.docx》由会员分享,可在线阅读,更多相关《AJAX简单的交互系统论文模板Word文档格式.docx(30页珍藏版)》请在冰豆网上搜索。
如果发现无正确的用户信息,系统将会给出提示,并且重新返回登录页面,如下图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"
>
web-appid="
WebApp_ID"
version="
2.4"
xmlns="
xmlns:
xsi="
http:
//www.w3.org/2001/XMLSchema-instance"
xsi:
schemaLocation="
<
display-name>
Advertisement<
/display-name>
servlet>
servlet-name>
register<
/servlet-name>
servlet-class>
myservlet.control.HandleRegister<
/servlet-class>
/servlet>
servlet-mapping>
url-pattern>
/helpRegister<
/url-pattern>
/servlet-mapping>
login<
myservlet.control.HandleLogin<
/helpLogin<
modifyPassword<
myservlet.control.HandlePassword<
/helpModifyPassword<
getOldMess<
myservlet.control.GetOldMess<
/helpGetOldMess<
modifyOldMess<
myservlet.control.HandleModifyMess<
/helpModifyMess<
exit<
myservlet.control.HandleExit<
/helpExitLogin<
welcome-file-list>
<
welcome-file>
index.html<
/welcome-file>
index.htm<
index.jsp<
default.html<
default.htm<
default.jsp<
/welcome-file-list>
/web-app>
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.<
head>
4.<
title>
用户注册<
/title>
5.<
styletype="
text/css"
6.<
!
--
7.body{
8.background-image:
url(image/214e84fc66b888c8fd037f6c[1].jpg);
9.}
10.-->
11.<
/style>
12.<
/head>
13.<
scripttype="
text/javascript"
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="
fontcolor=\"
red\"
b>
*用户名已经存在,请另选一个注册!
/b>
/font>
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="
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="
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="
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="
124.phoneText.innerHTML=message;
125.}
126.}
127.<
/script>
128.
129.<
body>
br>
130.<
divalign="
center"
131.<
formname="
form1"
method="
action="
showRegisterMess.jsp"
132.<
p>
strong>
/strong>
/p>
133.<
tablewidth="
546"
border="
1"
cellpadding="
2"
cellspacing="
height="
218"
134.<
tr>
135.<
td>
用户名:
/td>
136.<
inputname="
name"
type="
text"
size="
20"
onchange="
checkName()"
137.<
divid="
请认真填写,此项不能为空<
/div>
138.<
/tr>
139.<
140.<
性别:
141.<
请选择性别<
142.<
sexText"
inputtype="
radio"
name="
sex"
value="
男"
男
143.<
女"
女
144.<
145.<
146.<
147.<
密码:
148.<
pass1"
password"
checkPass1()"
149.<
请牢记密码,勿为生日、电话号码等。
此项不能为空。
tdvalign="
top"
150.<
151.<
152.<
重复密码:
153.<
pass2"
checkPass2()"
154.
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- AJAX 简单 交互 系统 论文 模板