AJAX许愿墙设计文档
AJAX许愿墙网站设计文档
第一部分项目概况
1.项目说明
项目名称：AJAX许愿墙网站
客户：
2、项目背景
第二部分项目计划
1.项目目标
（1）允许新用户注册，同时开设帐户。
（2）允许通过用户名查找用户信息
（3）允许用户将所许心愿传入数据库并显示
（4）允许用户间通过聊天室交流
（5）允许用户通过发帖寻求帮助或交流
2. 项目范围
本软件适用于一般大众。
3. 项目策略
通过可视化编程的JAVA程序和SQL数据库的方式进行实现。
通过增量开发的方法进行此项目的设计与开发。
使用套节字进行客户与服务端的通讯。
5. 每项任务所需技能
服务器与客户端的连接：熟悉http网络传输协议，熟悉各种封装的方法和数据流. 程序界面设计：可视化编程及GUI组建
代码的实现：javascript，jsp，数据库编程
6. 所采用的工具
开发工具：IntelliJIDEA Mysql javasdk(jdk1.6)
开发环境：个人电脑+windowsxp
第三部分项目设计
1.需求分析
在这个信息时代，人与人的沟通变得更加重要，所以涌现出各种聊天软件，本软件时间了人与人的另一种沟通。每人中都有一个愿望，我们希望通过本软件来记录用户心中美好的愿望。
2.软件主要功能
（1）允许新用户注册，同时开设帐户。
（2）允许通过用户名查找用户信息
（3）允许用户将所许心愿传入数据库并显示
（4）允许用户间通过聊天室交流
（5）允许用户通过发帖寻求帮助或交流
程序中要用到的类
细节与构造
(一)注册表单验证
1问题陈述：
编写一个客户端将用户的注册信息发送个服务器
a.选择创建该程序所需要引用的类和方法
b.确定用户自定义的包、类、它们的目的及方法
c.确定用户定义类中的数据类型和变量
d．确定提交到服务器上的数据
e.确定何时提交数据
f.确定要处理的例外
g.确定例外的出错信息
二自动登录系统技术要点
1 在用户将焦点移出文本框调用自动登录函数
用户输入用户名和密码后，会触发onblur时间。此时系统自动调用login函数执行自动登录
过程，传出一个true或false的阐述，表示是否是自动登录。此时用户未表示要进行登录，当身份验证失败后，如果用户进行的是自动登录，将不做任何提示。如果用户是单击【登录】按钮明确登录时，将提示详细的失败信息。
2在session中设置登录状态
用户身份验证成功后，将会在session中保存用户key，使用固定字符串“-LOGIN-USER-”。当用户单击【检查登录状态】按钮时，也判断session中是否存在以“-LOGIN-USER-”为key的Attribute。存在表示已有用户登录，不存在则表示用户未登录。
3退出请求处理
用户登录后，页面将显示【退出】按钮。用户单击【退出】按钮后，调用logout函数向服务器发送退出请求，服务器将session中保存的用户信息删除。客户端接受到服务器响应将恢复显示登录窗口。
自动登录系统的设计流程图
三许愿墙系统的技术要点
1随机显示位置的实现方法
使用javascript中的随机函数生成两个整数，分别对愿望div的左边距和顶边距。使用JavaScript中math对象的random()方法可产生一个0~1之间的随机数，在最小值minVal和最大值maxVal之间生成随机数
\\通过获取随机数的函数
Function getRanNum(minVal,maxVal){
Return Math.round(Math.random()*(maxVal~minVal))+minVal;
}
Var xMin = 10; \\X坐标最小值
Var xmax = 300; \\X坐标最大值
Var yMin = 100; \\Y坐标最小值
Var ymax = 300; \\Y坐标最大值
\\获取随机横坐标
Function getRanX(){
Return getRanNum(xMin,xMax);
}
\\获取随机纵坐标
function getRanY(){
Return getRanNum(yMin,yMax);
}
2使用jQuery实现淡入效果
jQuery库中的fadeIn（）函数可以使页面元素时间淡入效果。调用fadeIn（）函数时传入一个参数值，设定整个淡入过程所需的毫秒数。
3使用Internetface组件库的Draggable组件实现拖拽
4使用jQuery的遍历功能实现选色列表背景赋值
5使用jQuery库的Ajax操作向服务器发送请求
本系统与服务器的通信主要有两处，第一处是页面加载后，获取所有的愿望，使用$.getJSON()方法。第二处是用户添加新愿望时发送给服务器，获取保存时间，使用$.post()方法。
用户操作界面的设计流程图
四寻找愿望纸条的技术要点
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对象，且服务器记录用户的咨询后，直接吧所有新的咨询信息返还给客户端，这样客户端就节省了一次信息刷新的调用。为了不予定时刷新的函数冲突，提交咨询请求时将消除已有的刷新咨询计时器
Var newMsgTimer //用于保存刷新咨询计时器
//用户提出新咨询
Function sendMessage(){
...
clearInterval(newMsgTimer); //清空获取新咨询计时器
...
}
//将服务器返回的最新咨询信息写入页面
Function writeNewMessage(newMsg){
...
newMsgTimer = setTimeout(“getNewMessage();”,1000) //1秒后获取新咨询信息
...
}
3用户按回车建自动提交咨询信息
可以检测用户在咨询文本框的输入内容，当用户按回车键时自动提交咨询，检测用户输入的代码
//判断用户输入
Function checkEnter(evt){
Var code = evt.keyCode//evt.which; //兼容ie和firefox
//如果用户输入回车，调用sendMessage函数
If(code == 13){
sendMessage()；
}
函数调用流程图