第7章 完善的Ajax应用程序：.pptVIP

第7章 完善的Ajax应用程序：Ajax留言本 上一章向读者详细介绍了构建Ajax应用程序的核心：XMLHttpRequest对象的相关属性和方法，并介绍了如何搭建一个基本的Ajax应用程序开发框架。在第一章中已经向读者展示过了一个简单的Ajax程序：Hello World!。在本章中，笔者将和读者一起利用这个Ajax开发框架来搭建一个更加完善的Ajax应用程序：Ajax留言本。 7.1 留言本的需求 在开始开发留言本前，需要先确定留言本的需求。留言本与传统的留言本需求基本一致，所不同的只是采用Ajax交互方式来代替传统交互方式。 在访客打开留言本时，显示所有的历史留言记录。留言本提供表单让访客可以添加新的留言。由于采用Ajax技术，前台页面不需要是一个动态页面，只使用一个静态的HTML页面就可以了。历史留言信息不需要预先加载，而是在访客打开页面后再去读取并无刷新地显示在页面上。访客添加新留言时，采用Ajax提交到后台的程序处理，并在提交成功后无刷新地将新留言显示在页面上的留言列表中。 7.2 留言本的基本设计 在确认留言本的需求后，现在来做一些基本的设计。包括留言本的系统环境、基本数据模型和操作、数据库设计、前后台功能模块的划分以及文件结构和文件清单。 7.2.1 系统环境 留言本系统在如下环境下进行搭建： Web服务器：Apache2.2.4。 服务端语言：PHP5.2.3。 数据库：Mysql5.0。 7.2.2 留言的数据和操作 首先，需要确认留言所包含的数据和针对需要对留言进行的操作。一条常规留言的数据应该包含留言人的名字（name）、留言内容（message）和留言时间（postdate），系统可以读取所有留言以及插入一条新的留言。 7.2.3 数据库设计 在确定Message所包含的数据后，现在来对系统的数据库进行设计。数据库命名为guestbook，其中包含一个表message，设计如图所示。 7.2.4 后台功能模块 后台的功能模块需要包含以下几个部分： 数据库操作模块。 留言本逻辑处理模块。 接口模块，提供给前台脚本调用并输出信息。 各模块之间的依赖关系如图所示。 7.2.5 前台脚本功能模块 然后需要确定一下前台脚本所需要具备的功能。按照功能需要，前台脚本应该包含以下主要功能模块： 基本Ajax功能模块。 读取留言功能模块。 发送留言功能模块。 显示留言基本模块。 然后进一步分析，前台脚本还应该包含下列辅助模块： 留言数据特殊字符过滤模块。 各模块之间的依赖关系如图所示。 7.2.6 系统文件结构和文件清单 在文件结构上，用文件夹ajaxGuestBook作为根目录，其下包含script、php、css三个子目录，分别放置所需要的JavaScript文件、PHP文件和CSS样式表文件。根目录下详细的文件清单为： 1.文件夹css： style.css：样式表文件 2.文件夹script： ajaxRequest.js：基本Ajax功能模块。 guestbook.js：留言本相关功能模块。 3.文件夹php： db.class.php：数据库操作模块。 message.class.php：留言逻辑处理模块。 service.php：接口模块。 4.index.html：留言本前台页面。 7.3 留言本的实现 在做完留言本的系统设计后，现在开始进行具体的代码实现。首先根据数据库设计来创建数据库，然后对留言本的前台界面进行设计和制作，接着完成后台和前台的各个功能模块，最后再将这些模块和页面整合在一起。 7.3.1 创建数据库 根据上一节中的数据库设计，需要创建一个名为guestbook的数据库。这个数据库只有一个表message。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 完成后台功能模块：留言本逻辑处理模块 留言本逻辑处理模块主要提供留言对象的创建、留言的读取以及插入新留言的功能。这个模块依赖于数据库操作模块实现。将这个模块的代码放入一个单独的PHP文件，并命名为message.class.php 。 7.3.6 完成后台功能模块：接口模块 接口模块相应前台脚本程序的请求，并按照请求进行读取留言或插入新留言的操作，其依赖于