AJAX许愿墙设计文档.doc

AJAX许愿墙网站设计文档第一部分 项目概况1.项目说明项目名称：AJAX许愿墙网站客 户：2、项目背景第二部分 项目计划1. 项目目标（1）允许新用户注册，同时开设帐户。（2）允许通过用户名查找用户信息（3）允许用户将所许心愿传入数据库并显示（4）允许用户间通过聊天室交流（5）允许用户通过发帖寻求帮助或交流2. 项目范围本软件适用于一般大众。3. 项目策略通过可视化编程的JAVA程序和SQL数据库的方式进行实现。 通过增量开发的方法进行此项目的设计与开发。使用套节字进行客户与服务端的通讯。4项目开发周期第一周需求分析及软件的初步设计（绘制初步的建模图）第二周决定每个功能所需的类及数据类型并根据相应功能设计出各类所用到的方法及数据类型第三周具体实现各个类中的各个方法，设计服务页面并对服务器连接进行测试5. 每项任务所需技能服务器与客户端的连接：熟悉http网络传输协议，熟悉各种封装的方法和数据流.程序界面设计：可视化编程及GUI组建代码的实现：javascript，jsp，数据库编程6. 所采用的工具开发工具：IntelliJIDEA Mysql javasdk(jdk1.6)开发环境：个人电脑+windowsxp第三部分 项目设计1.需求分析在这个信息时代，人与人的沟通变得更加重要，所以涌现出各种聊天软件，本软件时间了人与人的另一种沟通。每人中都有一个愿望，我们希望通过本软件来记录用户心中美好的愿望。2.软件主要功能（1）允许新用户注册，同时开设帐户。（2）允许通过用户名查找用户信息（3）允许用户将所许心愿传入数据库并显示（4）允许用户间通过聊天室交流（5）允许用户通过发帖寻求帮助或交流程序中要用到的类客户端Java.sql.*连接数据库所有组件Org.json.simple.jsonobjectJson对象包Org.json.simple.jsonarrayJson数组包细节与构造(一) 注册表单验证1问题陈述： 编写一个客户端将用户的注册信息发送个服务器a.选择创建该程序所需要引用的类和方法b.确定用户自定义的包、类、它们的目的及方法c.确定用户定义类中的数据类型和变量d确定提交到服务器上的数据e.确定何时提交数据f.确定要处理的例外g.确定例外的出错信息用户输入信息后将焦点移出文本框触发onblur事件调用 checker.checkpasswordd调用Checker.checkNode验证密码输入是否一致调用createXmlHttp函数创建XHR对象将用户输入内容发送给服务器服务器根据字段名称决定验证方式判断是否与session中的验证码一致在数据库中查找是否存在相同信息 返回验证信息客户端调用showInfo函显示验证信息密码验证其他验证验证码校验其他验证二自动登录系统技术要点1 在用户将焦点移出文本框调用自动登录函数用户输入用户名和密码后，会触发onblur时间。此时系统自动调用login函数执行自动登录过程，传出一个true或false的阐述，表示是否是自动登录。此时用户未表示要进行登录，当身份验证失败后，如果用户进行的是自动登录，将不做任何提示。如果用户是单击【登录】按钮明确登录时，将提示详细的失败信息。2在session中设置登录状态用户身份验证成功后，将会在session中保存用户key，使用固定字符串“-LOGIN-USER-”。当用户单击【检查登录状态】按钮时，也判断session中是否存在以“-LOGIN-USER-”为key的Attribute。存在表示已有用户登录，不存在则表示用户未登录。3退出请求处理用户登录后，页面将显示【退出】按钮。用户单击【退出】按钮后，调用logout函数向服务器发送退出请求，服务器将session中保存的用户信息删除。客户端接受到服务器响应将恢复显示登录窗口。自动登录系统的设计流程图用户单击【登录】按钮调用checkState函数发送请求用户输入用户名密码服务器接受请求返回检查结果系统自动调用login函数执行登录过程调用showCheckResult函数提示用户检查结果从服务器获取登录结果登录成功是否自动登录是否调用clearLofinValue清空用户输入信息显示错误信息提示用户登录成功显示【退出】按钮用户单击【退出】按钮调用showLogoutResult函数提示退出成功调用restoreLoginDiv函数恢复登录表单三许愿墙系统的技术要点1随机显示位置的实现方法使用javascript中的随机函数生成两个整数，分别对愿望div的左边距和顶边距。使用JavaScript中math对象的random()方法可产生一个01之间的随机数，在最小值minVal和最大值maxVal之间生成随机数通过获取随机数的函数Function getRanNum(minVal,maxVal) Return Math.round(Math.random()*(maxValminVal)+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()方法。用户操作界面的设计流程图页面加载完毕后自动为选色表赋值背景色使用$.getJSON()函数向服务器获取所有愿望遍历结果数组调用buildWish()函数建立愿望节点用户编写新愿望后单击【许愿】按钮用户可通过鼠标拖动现有愿望调用sandWish函数向服务器发送新愿望单击现有愿望的“关闭”连接获取响应后调用buildWish函数建立新愿望节点调用hideWish函数隐藏单击的愿望四寻找愿望纸条的技术要点1监视用户的输入当用户输入查询纸条的名称时，不需要点击任何按钮，系统直接显示出查询结果。如果有一段时间内文本没有变化，表示用户输入结束。此时向服务器发出请求，停止监视。当用户再次修改文本框内容文字时，再次激活监视。2获取查询结果服务器接收到客户端发来的关键词后，从数据库中查询满足条件的愿望，直接根据查询结果生成HTML片段发送给客户端，客户端再将HTML片段写入页面即可。用户操作界面的设计流程图页面加载完毕调用readKey函数监视用户输入用户信息有变化是否计数器重置为1计数器增加1否计数器已累加到3？是调用search函数向服务器发送检索请求调用createXmlHttp函数创建XHR对象将用户输入的关键词发送给服务器调用showSearchResult函数显示检索结果用户继续输入新内容调用resetReading函数重新激活监控否五无刷新留言板系统的技术要点1提交留言的过程页面使用了4个表单元素用于用户输入留言内容，两个文本框分别输入姓名和标题，一个文本区域用于输入回帖内容，一个提交按钮用于触发提交留言函数。用户输入信息后，单击【提交】按钮触发submitPost函数。函数首先获取4部分信息。Username，post-title，post-contemtThreadid然后创建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.函数调用流程图用户单击【提交】按钮调用submitPost函数调用checkForm函数验证表单信息表单验证通过？用户学未完成的内容否调用displayStatus函数显示“正在提交。”。调用createXmlHttp函数创建XHR对象是将留言内容发送给服务器调用createNewPost函数创建新的回帖调用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()；函数调用流程图用户输入用户名，调用login函数登录咨询系统checkEnter函数响应用户输入回车键调用sendMessage函数向服务器提交信息调用getNewMessage函数获取最新咨询调用createXmlHttp函数创建XmlHttpRequest对象调用createXmlHttp函数创建XMLHttpRequest对象向服务器发送请求传入lastId向服务发送用户咨询信息服务器查询编号大于lastId的最新咨询返回 客户端调用writeNewMessage函数将最新的咨询信息写入页面并更新lastId