AJAX许愿墙设计文档.docx
《AJAX许愿墙设计文档.docx》由会员分享，可在线阅读，更多相关《AJAX许愿墙设计文档.docx（11页珍藏版）》请在冰点文库上搜索。
AJAX许愿墙设计文档
AJAX许愿墙网站设计文档
第一部分项目概况
1.项目说明
项目名称：
AJAX许愿墙网站
客户：
2、项目背景
第二部分项目计划
1. 项目目标
（1）允许新用户注册，同时开设帐户。
（2）允许通过用户名查找用户信息
（3）允许用户将所许心愿传入数据库并显示
（4）允许用户间通过聊天室交流
（5）允许用户通过发帖寻求帮助或交流
2.项目范围
本软件适用于一般大众。
3.项目策略
通过可视化编程的JAVA程序和SQL数据库的方式进行实现。
通过增量开发的方法进行此项目的设计与开发。
使用套节字进行客户与服务端的通讯。
4．项目开发周期
第一周
需求分析及软件的初步设计（绘制初步的建模图）
第二周
决定每个功能所需的类及数据类型并根据相应功能设计出各类所用到的方法及数据类型
第三周
具体实现各个类中的各个方法，设计服务页面并对服务器连接进行测试
5.每项任务所需技能
服务器与客户端的连接：
熟悉http网络传输协议，熟悉各种封装的方法和数据流.
程序界面设计：
可视化编程及GUI组建
代码的实现：
javascript，jsp，数据库编程
6.所采用的工具
开发工具：
IntelliJIDEAMysqljavasdk
开发环境：
个人电脑+windowsxp
第三部分项目设计
1.需求分析
在这个信息时代，人与人的沟通变得更加重要，所以涌现出各种聊天软件，本软件时间了人与人的另一种沟通。
每人中都有一个愿望，我们希望通过本软件来记录用户心中美好的愿望。
2.软件主要功能
（1）允许新用户注册，同时开设帐户。
（2）允许通过用户名查找用户信息
（3）允许用户将所许心愿传入数据库并显示
（4）允许用户间通过聊天室交流
（5）允许用户通过发帖寻求帮助或交流
程序中要用到的类
客户端
.*
连接数据库所有组件
对象包
数组包
细节与构造
（一）注册表单验证
1问题陈述：
编写一个客户端将用户的注册信息发送个服务器
a.选择创建该程序所需要引用的类和方法
b.确定用户自定义的包、类、它们的目的及方法
c.确定用户定义类中的数据类型和变量
d．确定提交到服务器上的数据
e.确定何时提交数据
f.确定要处理的例外
g.确定例外的出错信息
用户输入信息后将焦点移出文本框触发onblur事件
调用
调用
验证密码输入是否一致
调用createXmlHttp函数创建XHR对象
将用户输入内容发送给服务器
服务器根据字段名称决定验证方式
判断是否与session中的验证码一致
在数据库中查找是否存在相同信息
返回验证信息
客户端调用showInfo函显示验证信息
密码验证
其他验证
验证码校验
其他验证
二自动登录系统技术要点
1在用户将焦点移出文本框调用自动登录函数
用户输入用户名和密码后，会触发onblur时间。
此时系统自动调用login函数执行自动登录过程，传出一个true或false的阐述，表示是否是自动登录。
此时用户未表示要进行登录，当身份验证失败后，如果用户进行的是自动登录，将不做任何提示。
如果用户是单击【登录】按钮明确登录时，将提示详细的失败信息。
2在session中设置登录状态
用户身份验证成功后，将会在session中保存用户key，使用固定字符串“-LOGIN-USER-”。
当用户单击【检查登录状态】按钮时，也判断session中是否存在以“-LOGIN-USER-”为key的Attribute。
存在表示已有用户登录，不存在则表示用户未登录。
3退出请求处理
用户登录后，页面将显示【退出】按钮。
用户单击【退出】按钮后，调用logout函数向服务器发送退出请求，服务器将session中保存的用户信息删除。
客户端接受到服务器响应将恢复显示登录窗口。
自动登录系统的设计流程图
提示用户登录成功显示【退出】按钮
用户单击【退出】按钮
调用showLogoutResult
函数提示退出成功
调用restoreLoginDiv函数恢复登录表单
三许愿墙系统的技术要点
1随机显示位置的实现方法
使用javascript中的随机函数生成两个整数，分别对愿望div的左边距和顶边距。
使用JavaScript中math对象的random（）方法可产生一个0~1之间的随机数，在最小值minVal和最大值maxVal之间生成随机数
FunctiongetRanNum（minVal,maxVal）{
Return（）*（maxVal~minVal））+minVal;
}
VarxMin=10;坐标最小值
Varxmax=300;坐标最大值
VaryMin=100;\\Y坐标最小值
Varymax=300;\\Y坐标最大值
FunctiongetRanX（）{
ReturngetRanNum（xMin,xMax）;
}
functiongetRanY（）{
ReturngetRanNum（yMin,yMax）;
}
2使用jQuery实现淡入效果
jQuery库中的fadeIn（）函数可以使页面元素时间淡入效果。
调用fadeIn（）函数时传入一个参数值，设定整个淡入过程所需的毫秒数。
3使用Internetface组件库的Draggable组件实现拖拽
4使用jQuery的遍历功能实现选色列表背景赋值
5使用jQuery库的Ajax操作向服务器发送请求
本系统与服务器的通信主要有两处，第一处是页面加载后，获取所有的愿望，使用$.getJSON（）方法。
第二处是用户添加新愿望时发送给服务器，获取保存时间，使用$.post（）方法。
用户操作界面的设计流程图
页面加载完毕后自动为选色表赋值背景色
使用$.getJSON（）函数向服务器获取所有愿望
遍历结果数组调用buildWish（）函数建立愿望节点
用户编写新愿望后单击【许愿】按钮
用户可通过鼠标拖动现有愿望
调用sandWish函数向服务器发送新愿望
单击现有愿望的“关闭”连接
获取响应后调用buildWish函数建立新愿望节点
调用hideWish函数隐藏单击的愿望
四寻找愿望纸条的技术要点
1监视用户的输入
当用户输入查询纸条的名称时，不需要点击任何按钮，系统直接显示出查询结果。
如果有一段时间内文本没有变化，表示用户输入结束。
此时向服务器发出请求，停止监视。
当用户再次修改文本框内容文字时，再次激活监视。
2获取查询结果
服务器接收到客户端发来的关键词后，从数据库中查询满足条件的愿望，直接根据查询结果生成HTML片段发送给客户端，客户端再将HTML片段写入页面即可。
用户操作界面的设计流程图
五无刷新留言板系统的技术要点
1提交留言的过程
页面使用了4个表单元素用于用户输入留言内容，两个文本框分别输入姓名和标题，一个文本区域用于输入回帖内容，一个提交按钮用于触发提交留言函数。
用户输入信息后，单击【提交】按钮触发submitPost函数。
函数首先获取4部分信息。
Username，post-title，post-contemt
Threadid
然后创建XMLHttpRequest对象，使用post方式发送请求。
2服务器保存留言数据
服务器文件接受到留言信息后，使用insert语句将内容存入数据库中。
每条留言的id使用auto-increment字段自动设定。
为了获取新的留言id，可以使用“selectlast-insert-id（）”语句。
它会返回最新创建的自增id值。
3在页面上动态创建留言
服务器将新的留言的id返回给客户端后，客户端就可以动态创建留言了，创建留言包括3布：
清空当前表单元素的信息，创建包含留言内容的新div，将新div追加到原有的主题div中
4提示用户当前页面的工作状态
提交过程中，为了让用户了解当前页面正在工作，设置了一个id值为statusDiv的div显示操作信息。
当提交过程开始时，显示“正在提交。
。
。
”。
提交过程结束后将statusDiv隐藏。
具体的调用函数名为displayStatus和hiddenStatus.
函数调用流程图
六在线帮助系统的技术要点
1基本原理
页面加载完毕后，通过XmlHttpRequest对象从服务器获取现有的咨询信息。
每条都带有一个编号，且编号是递增的。
获取信息后，将会在一个段在的等待后继续通过XmlHttpRequest对象向服务器发送请求，此时发送的请求会把前一次获取的咨询信息中的最大编号作为请求参数一起传给服务器，服务器只需返回大于该编号的新咨询信息即可。
2提交发言请求
用户提交咨询请求同样使用XMLHttpRequest对象，且服务器记录用户的咨询后，直接吧所有新的咨询信息返还给客户端，这样客户端就节省了一次信息刷新的调用。
为了不予定时刷新的函数冲突，提交咨询请求时将消除已有的刷新咨询计时器
VarnewMsgTimer.
clearInterval（newMsgTimer）;.
}
.
newMsgTimer=setTimeout（“getNewMessage（）;”,1000）.
}
3用户按回车建自动提交咨询信息
可以检测用户在咨询文本框的输入内容，当用户按回车键时自动提交咨询，检测用户输入的代码
//判断用户输入
FunctioncheckEnter（evt）{
Varcode=/;//兼容ie和firefox
//如果用户输入回车，调用sendMessage函数
If（code==13）{
sendMessage（）；
}
函数调用流程图
升级会员 