上一节稍显唠叨，不知你烦了没有，也不知你看明白没有？其实XMLHttpRequest的用法就这么简单，如溪水般清澈透明，弄懂上节所介绍的知识对于初学者来说已经足够了，它也不会延伸出什么新花样来，毕竟XMLHttpRequest仅是一个数据传输工具，大部分的逻辑还需要前台或后台程序来处理。

现在，就开始我们的第一个Demo示例了，工作之前当然需要做些准备。例如，建立数据库（呵，不用怕，就是一个Access数据表），建立后台程序与数据库的连接，设计后台处理程序等。

2.2.1  建立留言板数据库

话有点大了，所谓留言版数据库实际上就是一个简单的数据表，请你在mysite站点（第1章已经讲解了）根目录下新建一个Database文件夹，用来存储数据（这是一个好习惯）。

然后在其中新建一个Access文件，命名为board.mdb。启动board.mdb数据库，新建一个message数据表，该表包含了4个字段（如图2-5所示）。

图 2-5

其中id字段是一个自动编号的数据类型，所谓自动编号，其本质上是一个长整型数值数据，不过它的值由Access系统自动递加。email字段是一个文本字段，字段大小可以设置50～100之间（随便），因为是练习使用，所以就不那么讲究了。

content字段应该设置为备注类型，所谓备注型数据本质上就是一个指针引用型数据。那什么又是指针引用型数据呢？（越绕越糊涂），说白了它就是一个无限量的仓库，可以存放任意大的数据（当然也是有极限的），然后在数据库中引用该仓库的地址即可（这就是所谓的指针引用），调用时根据这个指针搬运出来即可。如果使用Access存储不固定大小或大容量的数据都建议使用备注类型。

postdate字段为日期/时间类型数据。同时，建议你在对话框底部的属性面板中设置【默认值】为“Date()”。Date()是Access的默认函数，它可以获取当前系统的日期。使用Date()函数作为默认值后，你就不需要为该字段输入值了，系统自动使用现在日期填充。

2.2.2  建立站点与数据库连接

建立本地站点与数据库连接的具体方法如下：

 在Dreamweaver CS3中选择【窗口】|【数据库】菜单命令，打开【数据库】面板。然后利用该面板建立站点与数据库（即board.mdb）的连接。

 单击【数据库】面板中的加号按钮（），从弹出的下拉菜单中选择【自定义连接字符串】选项（如图2-6所示），打开【自定义连接字符串】对话框。

 在对话框中的【连接名称】文本框中输入一个识别名，该名称没有实在意义，仅作为在Dreamweaver CS3编辑环境中标识身份的作用，所以你可以随意设置。

图 2-6	图 2-7

 然后在【连接字符串】文本框中输入下面字符，这些字符的具体含义我们将在第8章中再为你详细讲解。

"Provider=Microsoft.Jet.OLEDB.4.0; Data Source=" & server.MapPath("Database/board.mdb")

 在【Dreamweaver应连接】单选按钮组中勾选【使用测试服务器上的驱动程序】选项，具体缘由是什么，也请你在第8章中寻找答案。

 输入完毕，你可以单击【测试】按钮测试是否连接成功。当然，现在肯定连接不成功（百分之九十九你会看到如图2-8所示的提示对话框）。不用担心，这是Adobe Dreamweaver CS3的错，不是你的错。单击【确定】按钮关闭【自定义连接字符串】对话框。

图 2-8

 关闭对话框后，这时你会发现站点根目录下自动多出了2个文件夹：_mmServerScripts和Connections。其中_mmServerScripts是一个隐藏文件夹，如果看不到，请显示隐藏文件即可，该文件夹是一个无用文件夹，犹如人的阑尾，但是此时在Dreamweaver CS3环境还有一点作用（下面再说）。Connections文件夹是一个数据库连接文件夹，里面保存着站点内已定义的连接文件，连接文件的名称与【数据库】面板中已定义的连接相对应（我们将在第8章还将详细讲解）。

 如果你复制Database文件夹以及其包含的数据库到_mmServerScripts文件夹中，然后再次打开【自定义连接字符串】对话框（方法是双击【数据库】面板中已定义的board数据连接），并单击【测试】按钮，则Dreamweaver CS3会提示连接成功（如图2-9所示），具体内因我们将在第8章中讲解。

图 2-9

2.2.3  设计前台表单

在Dreamweaver CS3中选择【文件】|【新建】菜单命令，打开【新建文档】对话框，从中选择一个模板页（如图2-10所示）。

图 2-10

然后保存模板网页为index.html，并在该模板页右侧栏目中设计一个简易的表单（如图2-11所示）。其中的表单域代码如下：

<form action="save.asp" method=post>

    <p>你的邮箱：<br>

    <input name=email /> <br>

    你的留言：<br>

    <textarea name=content rows=6 cols=25></textarea><br>

    <input type=submit value="提交"></p>

</form>

图 2-11

2.2.4  编写后台接收和处理数据程序

当用户在客户端留言并把表单数据提交给服务器之后，服务器需要接收这些数据，并把这些数据保存到数据库中，以方便存储和调用。因此，本节将介绍如何编写后台程序来接收客户端提交的数据，并如何保存这些数据到数据库中。具体操作步骤如下：

 在站点根目录下新建save.asp文件，然后选择【窗口】|【服务器行为】菜单命令，打开【服务器行为】面板。单击【服务器行为】面板中的加号按钮（），从弹出的下拉菜单中选择【命令】选项（如图2-12所示）。

图 2-12

 打开【命令】对话框，然后按如图2­-13所示进行设置（有点复杂，输入时要小心哟）。这里先简单解释一下，在第16章中还将详细讲解。

 在【连接】文本框中选择上面定义好的数据库连接，它告诉Dreamweaver CS3要操作的数据库对象；在【类型】下拉列表中选择“插入”选项，因为我们希望用一个命令把用户的留言插入到数据库中；在【SQL】文本区域输入插入数据的字符串命令，请你先按如下代码输入（详细讲解请参阅第9章内容）。SQL字符串对于大小写不敏感，如果觉得输入麻烦，可以结合对话框底部的【数据库项】辅助输入。请注意，'varContent'和'varEmail"是两个变量，该变量用来获取用户提交的表单值，输入时一定要加单引号。另外，变量所接收的表单值应该与上面的字段名相对应，否则Dreamweaver CS3就会张冠李戴的把获取的数据保存到错误字段中。

INSERT INTO message (content, email)

VALUES ('varContent','varEmail" )

 然后在【变量】列表框中定义两个变量（说明如表2-3所示）。这两个变量用来获取用户提交的表单值。具体为什么这么设置，我们也先暂时保密（详细讲解请参阅第16.1.5节内容）。

表2-2

变量名称	类型	大小	运行值
varContent	LongVarWChar	1073741823	Request.Form("content")
varEmail	VarWChar	50	Request.Form("email")

图 2-13

 单击【确定】按钮关闭【命令】对话框，请你切换到【代码】视图，在代码顶部查找一下是否包含如下代码块：

<%

Dim Command1__@@varName@@

Command1__@@varName@@ = "@@defaultValue@@"

If (@@runtimeValue@@ <> "") Then

  Command1__@@varName@@ = @@runtimeValue@@

End If

%>

 如果有，请你删除这些代码，这是Dreamweaver CS3的一个疏忽，或许是Adobe公司的工作人员一时大意而留下的一个低级错误。如果没有，说明你的Dreamweaver CS3升级到最新版本，且Adobe已经发现了这个Bug，没准某位产品质检人员还被炒了鱿鱼呢。呵，不管这么多，先继续我们的学习。

 最后，还请你在页面中加入一个返回的链接，否则当用户提交留言后，面对的是一个空白的页面而不知如何进行操作：

数据保存完毕，请<a href="index.html" target="_blank">返回</a>留言板！

2.2.5  编写读取数据库中数据并响应给客户端的后台程序

把用户提交的留言保存到数据库中，当然还需要从数据库中读取用户留言作为响应返回给客户端显示。具体实现步骤如下：

 新建并打开list.asp文件。然后选择【窗口】|【绑定】菜单命令，打开【绑定】面板。单击【绑定】面板中的加号按钮（），从弹出的下拉菜单中选择【记录集】选项（如图2-14所示）。

图 2-14

 打开【记录集】对话框，然后按如图2­-15所示进行设置（也很复杂哟，不过要比【命令】对话框好设置多了）。简单解释如下（详细讲解请参阅第9章内容）：

在【名称】文本框中随意输入一个记录集的名字；在【连接】下拉列表中选择要查询的数据库；在【表格】下拉列表框中选择要查询的数据表，这里选择message；然后在【排序】下拉列表框中选择postdate字段作为排序的根据，并以降序进行排序。这样用户最新发布的留言就会被排列在上面，以便能够及时阅读。

图 2-15

 切换到【代码】视图，在<html>标签上面输入下面代码（要保证在上面插入的定义记录集代码段下面）：

<%

if not rs.eof then

           while not rs.eof

               result=result & "<dl><dt>"&rs("email")&"（"&rs("postdate")&"）</dt><dd>"&rs("content")&"</dd></dl>"

               rs.movenext

           wend

else

           result="<h3>数据库中没有留言!</h3>"

end if

Response.AddHeader "Content-Type","text/html; charset=gb2312"

Response.Write(result)

%>

简单解释如下：首先用if条件语句判断记录集中是否包含有记录，如果有则使用while循环语句把记录集中的所有数据读取出来并保存到变量result中，最后调用Response.Write方法把数据响应给客户端。请注意，在输出信息前，要使用Response.AddHeader方法设置输出信息的字符编码，更详细的讲解请你参阅第9章内容。