1、第7章完善的Ajax应用程序 Ajax留言本 上一章向读者详细介绍了构建Ajax应用程序的核心 XMLHttpRequest对象的相关属性和方法 并介绍了如何搭建一个基本的Ajax应用程序开发框架 在第一章中已经向读者展示过了一个简单的Ajax程序 HelloWorld 在本章中 笔者将和读者一起利用这个Ajax开发框架来搭建一个更加完善的Ajax应用程序 Ajax留言本 7 1留言本的需求 在开始开发留言本前 需要先确定留言本的需求 留言本与传统的留言本需求基本一致 所不同的只是采用Ajax交互方式来代替传统交互方式 在访客打开留言本时 显示所有的历史留言记录 留言本提供表单让访客可以添加新
2、的留言 由于采用Ajax技术 前台页面不需要是一个动态页面 只使用一个静态的HTML页面就可以了 历史留言信息不需要预先加载 而是在访客打开页面后再去读取并无刷新地显示在页面上 访客添加新留言时 采用Ajax提交到后台的程序处理 并在提交成功后无刷新地将新留言显示在页面上的留言列表中 7 2留言本的基本设计 在确认留言本的需求后 现在来做一些基本的设计 包括留言本的系统环境 基本数据模型和操作 数据库设计 前后台功能模块的划分以及文件结构和文件清单 7 2 1系统环境 留言本系统在如下环境下进行搭建 Web服务器 Apache2 2 4 服务端语言 PHP5 2 3 数据库 Mysql5 0
3、7 2 2留言的数据和操作 首先 需要确认留言所包含的数据和针对需要对留言进行的操作 一条常规留言的数据应该包含留言人的名字 name 留言内容 message 和留言时间 postdate 系统可以读取所有留言以及插入一条新的留言 7 2 3数据库设计 在确定Message所包含的数据后 现在来对系统的数据库进行设计 数据库命名为guestbook 其中包含一个表message 设计如图所示 7 2 4后台功能模块 后台的功能模块需要包含以下几个部分 数据库操作模块 留言本逻辑处理模块 接口模块 提供给前台脚本调用并输出信息 各模块之间的依赖关系如图所示 7 2 5前台脚本功能模块 然后需要
4、确定一下前台脚本所需要具备的功能 按照功能需要 前台脚本应该包含以下主要功能模块 基本Ajax功能模块 读取留言功能模块 发送留言功能模块 显示留言基本模块 然后进一步分析 前台脚本还应该包含下列辅助模块 留言数据特殊字符过滤模块 各模块之间的依赖关系如图所示 7 2 6系统文件结构和文件清单 在文件结构上 用文件夹ajaxGuestBook作为根目录 其下包含script php css三个子目录 分别放置所需要的JavaScript文件 PHP文件和CSS样式表文件 根目录下详细的文件清单为 1 文件夹css style css 样式表文件2 文件夹script ajaxRequest j
5、s 基本Ajax功能模块 guestbook js 留言本相关功能模块 3 文件夹php db class php 数据库操作模块 message class php 留言逻辑处理模块 service php 接口模块 4 index html 留言本前台页面 7 3留言本的实现 在做完留言本的系统设计后 现在开始进行具体的代码实现 首先根据数据库设计来创建数据库 然后对留言本的前台界面进行设计和制作 接着完成后台和前台的各个功能模块 最后再将这些模块和页面整合在一起 7 3 1创建数据库 根据上一节中的数据库设计 需要创建一个名为guestbook的数据库 这个数据库只有一个表message
6、 message表包含4个字段 主键id 留言人name 留言内容message和留言时间postdate 可以使用以下SQL代码进行数据库的创建工作 7 3 2完成前台界面 index html 创建好数据库后 现在来搭建留言本的前台界面 前台界面由页面index html和样式表文件style css组成 7 3 3完成前台界面 样式表 样式表文件style css如图所示 7 3 4完成后台功能模块 数据库操作模块 搭建好前台界面后 现在开始完成后台的各个功能模块 7 3 5完成后台功能模块 留言本逻辑处理模块 留言本逻辑处理模块主要提供留言对象的创建 留言的读取以及插入新留言的功能 这
7、个模块依赖于数据库操作模块实现 将这个模块的代码放入一个单独的PHP文件 并命名为message class php 7 3 6完成后台功能模块 接口模块 接口模块相应前台脚本程序的请求 并按照请求进行读取留言或插入新留言的操作 其依赖于留言本逻辑处理模块 将其代码单独放置在一个PHP文件中 并命名为service php 7 3 7完成前台功能模块 基本Ajax功能模块 基本Ajax功能模块采用上一章向读者介绍的Ajax基本开发框架来完成 将框架的代码单独放入一个JavaScript文件 并命名为ajaxRequest js 7 3 8完成前台功能模块 读取和发送留言 其他模块包括 读取留言
8、模块 发送留言模块 显示留言模块以及留言数据过滤模块 由于这些模块本身与留言本页面耦合度较高 而且每个模块的代码都不多 所以将他们集中放置到一个JavaScript文件中 并命名为 guestbook js 7 3 9整合留言本程序 完成所有的功能模块后 现在对留言本程序进行整合 主要的工作就是将JavaScript代码引入到前台的页面中去 7 4留言本的功能测试 做完程序的整合后 就可以开始进行留言本的功能测试 以检测其功能是否符合之前所提出来的需求 7 5小结 本章笔者带领读者一起创建了一个更为复杂和完善的Ajax应用程序 Ajax留言本 从留言本的需求确认 到系统设计 到代码实现和测试 使读者比较完整的经历了一个Ajax应用程序的开发流程 本章中所创建的留言本相对来说仍然是非常简单的Ajax应用程序 但是比较完整的体现了Ajax应用程序的特点 希望读者能够认真学习这个实例
