1.2 配置开发环境

本书主要讲述如何利用Dreamweaver CS3（以下简称Dreamweaver或DW）创建基于Spry框架的Ajax网页，所用的服务器端技术为ASP。要在Dreamweaver中创建Ajax网页，首先需要配置服务器端环境，然后在Dreamweaver中定义一个ASP动态站点，最后在该站点中创建一个Ajax网页，用于实现表单验证。

1.2.1 配置服务器端环境

如前所述，Ajax技术兼容所有的标准型的服务器和服务端语言。在本书中选择ASP作为服务器端语言。ASP是Microsoft公司开发的用来代替CGI程序的一种服务器端技术，可以用来创建和运行动态网页或Web应用程序。为了开发和运行ASP动态网站，需要在Windows平台上安装IIS（Internet信息服务）。IIS提供了强大的Internet和Intranet服务功能，IIS服务器既是Web服务器，同时也是ASP应用程序服务器。下面介绍在不同版本的Windows平台上如何安装和配置IIS。

1.在Windows XP中配置IIS

在Windows XP Professional中，可以安装IIS 5.1，并允许设置个人Web服务器、开发企业Intranet和Web应用程序。默认情况下，在该版本的Windows中未安装IIS。若要在这个操作系统平台上开发Ajax应用并选择ASP作为服务器端技术，则必须安装IIS 5.1。下面介绍在Windows XP Professional中安装配置IIS 5.1的过程。

1 在控制面板窗口中，双击【添加或删除程序】项。

2 当出现【添加或删除程序】窗口时，单击左侧的【添加/删除Windows组件】按钮，如图1-3所示。

3 当出现【Windows组件向导】对话框时，在【组件】列表框中选取【Internet信息服务（IIS）】组件左边的复选框，然后单击【下一步】按钮，如图1-4所示。

图1-3 选择“添加/删除Windows组件”

图1-4 选择安装Internet信息服务组件

4 在组件向导提示下完成IIS的安装和配置，然后单击【完成】按钮。

完成IIS组件的安装后，可以在IE浏览器的地址栏输入“http://localhost”，如果此时可以看到如图1-5所示的画面，则说明服务器配置正确。

Web服务器将列出下列文件作为网站的默认网页：default.htm、default.asp、index.htm和iisstart.asp。安装IIS后，只有iisstart.asp。若要将文档添加到默认网站中，可将文件保存在Windows所在分区的\inetpub\wwwroot\文件夹中。

图1-5 Windows XP中的IIS测试页

若要将文档保存到其他文件夹中，则必须把该文件夹设置为虚拟目录，操作方法如下。

1 在Windows资源管理器中，用鼠标右键单击该文件夹并选择【共享和安全】命令。

2 当出现【<文件夹名>-属性】（这里为ajax属性）对话框时，选择【Web共享】选项卡，然后单击【共享文件夹】选项，如图1-6所示。

3 在【编辑别名】对话框中，对虚拟目录进行以下设置，如图1-7所示。

● 在【别名】框中指定此虚拟目录的别名，可与物理目录相同或不相同。

● 设置访问权限，通常应选取【读取】复选框。

● 设置应用程序权限，通常应选取【脚本】复选框。

图1-6 设置文件夹的Web共享属性

图1-7 设置虚拟目录的属性

完成上述设置后，单击【确定】按钮。

当把某个物理目录映射为Web网站中的虚拟目录后，即可把要发布的网页保存在该目录中。假如默认网站有一个别名为ajax的虚拟目录，并且已把网页test.html保存在相应的物理目录中，则可以通过http://localhost/ajax/test.html来访问该页。

2.在Windows Server 2003中配置IIS

如果希望在Windows Server 2003平台上开发Ajax应用并选择ASP作为服务器端技术，则需要安装IIS 6.0作为Web服务器兼应用程序服务器。

在Windows Server 2003中安装IIS 6.0的操作步骤如下。

1 在控制面板窗口中，双击【添加或删除程序】项。

2 当出现【添加或删除程序】窗口时，单击【添加/删除Windows组件】按钮，如图1-8所示。

图1-8 选择添加/删除Windows组件

3 在【Windows组件向导】对话框中，单击【组件】列表框中的【应用程序服务器】复选框，并单击【详细信息】按钮，如图1-9所示。

4 此时将弹出【应用程序服务器】对话框，在【应用程序服务器的子组件】列表框中选取【Internet信息服务（IIS）】项左边的复选框，然后单击【确定】按钮，如图1-10所示。

5 返回【Windows组件向导】对话框后，单击【下一步】按钮。

6 在组件向导提示下完成IIS的安装，然后单击【完成】按钮。默认情况下，安装IIS组件后ASP服务仍然被禁用。接下来，还必须启用ASP服务。

图1-9 设置应用程序服务器的详细信息

图1-10 选择安装Internet信息服务组件

7 选择【控制面板】→【管理工具】→【Internet信息服务（IIS）管理器】命令。

8 在【Internet信息服务（IIS）管理器】窗口的左窗格中，展开本地计算机目录树，并单击【Web服务扩展】项；在右窗格中，单击窗口底部的【扩展】选项卡，在【Web服务扩展】下单击【Active Server Pages】，然后单击【允许】按钮，以启用ASP Web扩展服务，如图1-11所示。

至此，IIS安装配置完毕。为了测试IIS的Web服务配置是否正确，可在IE浏览器的地址栏中输入“http://localhost”，此时若能看到如图1-12所示的画面，则说明Web服务器配置成功。

图1-11 启用ASP服务

图1-12 在Windows Server 2003中测试IIS Web服务

在Windows Server 2003操作系统中，创建虚拟目录的方法与Windows XP中类似。若要测试IIS服务器上的ASP语言引擎是否配置正确，可用记事本程序创建一个ASP测试页，其内容为：

        <% Response.Write Now %>

图1-13 在Windows Server 2003中测试ASP引擎

将文件保存在一个别名为ajax的虚拟目录中，文件名为test.asp。在IE浏览器的地址栏中输入“http://localhost/ajax/test.asp”，此时若能看到类似图1-13所示的画面，则说明ASP语言引擎配置成功。

3.在Windows Vista中配置IIS

在Windows Vista操作系统中，可以安装IIS 7.0作为Web服务器兼应用程序服务器。安装和配置IIS 7.0的操作步骤如下。

1 单击【开始】按钮，选择【控制面板】命令。

2 在【控制面板】窗口中，双击【程序和功能】项，如图1-14所示。

图1-14 在控制面板中选择“程序和功能”项

3 在【程序和功能】窗口中，单击任务窗格中的【打开或关闭Windows功能】链接，如图1-15所示。

图1-15 单击“打开或关闭Windows功能链接”

4 在【Windows功能】对话框中，依次展开【Internet信息服务】、【万维网服务】和【应用程序开发功能】，并选取【ASP】复选框，然后单击【确定】按钮，如图1-16所示。

完成Internet服务安装后，可在IE浏览器的地址栏中输入“http://localhost”，此时若能看到如图1-17所示的画面，则说明Web服务配置正确。

图1-16 安装Internet服务和ASP开发功能

图1-17 在Windows Vista中测试IIS 7的Web服务

若要对IIS 7服务器上的ASP应用程序开发功能进行配置，可执行以下操作。

1 在控制面板窗口中，双击【管理工具】项，然后双击【Internet信息服务（IIS）管理器】项，如图1-18所示。

图1-18 选择Internet信息服务管理器

2 在【Internet信息服务（IIS）管理器】窗口中，依次展开本地计算机和网站，并单击【Default Web Site】项；在中间窗格中选择【功能视图】，然后在IIS之下双击【ASP】项，如图1-19所示。

图1-19 双击“ASP项”

3 在ASP应用程序属性页中，对相关属性进行设置，如图1-20所示。

图1-20 设置ASP应用程序属性

4 若要在网站中创建Web应用程序，可用鼠标右键单击目录树中的【Default Web Site】，并从弹出菜单中选择【添加应用程序】命令，如图1-21所示。

5 在【添加应用程序】对话框中，对Web应用程序的别名和物理路径进行设置，然后单击【确定】按钮，如图1-22所示。

图1-21 在网站中添加Web应用程序

图1-22 设置Web应用程序的别名和物理路径

1.2.2 定义Dreamweaver站点

网站是一组具有共享属性（如相关主题、类似的设计或共同目的）的链接文档和资源。在Dreamweaver CS3中，术语“站点”指属于某个网站的文档的本地或远程存储位置，表示网站中所有文件和资源的集合。Dreamweaver CS3是创建和管理站点的工具，使用它不仅可以创建单独的文档，还可以创建完整的网站。设计者可以在计算机上创建网页，跟踪和维护链接，管理网页和各种共享资源文件并将其上传到Web服务器，也可以随时在保存文件后传输更新的文件来对站点进行维护。

1.Dreamweaver站点组成

Dreamweaver站点由三个部分组成，具体取决于开发环境和所开发的网站类型。

（1）本地根文件夹：可以位于本地计算机或网络服务器上，用于存储正在处理的文件，此文件夹也称为本地站点。如果要定义一个Dreamweaver站点，则至少要设置一个本地根文件夹。

（2）远程文件夹：位于运行Web服务器的计算机上，存储用于测试、生产和协作等用途的文件，此文件夹也称为远程站点。如果已经申请了域名并且在Internet上拥有空间，则需要设置远程文件夹。利用Dreamweaver站点管理功能可以在本地硬盘与Web服务器之间传输文件。

（3）测试服务器文件夹：Dreamweaver在其中处理动态网页的文件夹。如果要运行动态网页并连接到数据库，则需要设置测试服务器文件夹。如果Dreamweaver和服务器软件运行在同一台本地计算机上，也可以把本地根文件夹和测试服务器文件夹设置为同一个文件夹。

2.定义Dreamweaver站点

若要定义一个Dreamweaver站点，可执行以下操作。

1 在本地硬盘上创建文件夹并在其中创建一些子文件夹，用于存储站点中的网页和其他资源文件（如图像文件、Flash动画等）。若要运行动态网页，则必须安装和配置服务器，并在网站中创建虚拟目录。

2 启动Dreamweaver并执行下列操作之一：

● 在欢迎屏幕上单击【Dreamweaver站点】。

● 选择【站点】→【新建站点】命令。

3 当出现站点定义对话框时，选择【基本】选项卡，并指定站点的名称和HTTP地址（URL），然后单击【下一步】按钮，如图1-23所示。

4 如果打算使用服务器技术，可以在如图1-24 所示界面中选取【是，我想使用服务器技术】，并在下面的列表框中选择一种服务器技术，然后单击【下一步】按钮。

目前Dreamweaver支持的服务器技术包括：ASP JavaScript，ASP VBScript，ASP.NET C#，ASP.NET VB，ColdFusion，JSP，PHP MySQL。在本书中选择ASP JavaScript作为服务器技术。

图1-23 设置站点的名称和HTTP地址

图1-24 选择要使用的服务器技术

在如图1-25所示的画面中，设置站点文件的存储位置。选择【在本地进行编辑和测试（我的测试服务器是这台计算机）】单选按钮，并在【您将把文件存储在计算机上的什么位置】文本框中输入IIS服务器的网站根目录或某个虚拟目录的路径，或者通过单击文件夹图标来选择此路径，然后单击【下一步】按钮。根据需要，也可以选择另外两个单选按钮。

6 在如图1-26所示的画面中，输入站点根文件夹的URL，并单击【测试URL】按钮；当看到“URL前缀测试已成功”信息时，单击【确定】按钮以关闭弹出的对话框，然后单击【下一步】按钮。

7 在如图1-27所示的画面中，选择下列选项之一：

● 如果编辑完一个文件后，要把该文件复制到另一台计算机，可选择【是的，我要使用远程服务器】单选按钮。

● 如果不使用远程服务器，可选择【否】单选按钮。

完成设置后，单击【下一步】按钮。

图1-25 设置站点文件的存储位置

图1-26 设置站点根文件夹的URL

8 如果在上一步选择了使用远程服务器，则需要对连接远程服务器的方式（如本地/网络、FTP）、远程文件夹，以及文件的存回和取出等选项进行设置；如果选择不使用远程服务器，则会列出站点的汇总信息，单击【完成】按钮即可完成站点定义，如图1-28所示。

使用【文件】面板可以管理文件并在本地计算机和远程服务器之间传输文件。当在本地站点和远程站点之间传输文件时，会在这两种站点之间维持平行的文件和文件夹结构。如果站点中不存在相应的文件夹，则Dreamweaver将创建这些文件夹。也可以在本地和远程站点之间同步文件，Dreamweaver会根据需要在两个方向上复制文件，并且在适当的情况下删除不需要的文件。

使用【文件】面板可以执行以下任务：访问站点、服务器和本地驱动器；查看文件和文件夹；管理文件和文件夹；使用站点的可视化地图。

图1-27 设置是否使用远程服务器

图1-28 完成Dreamweaver站点定义

此时，新建的站点出现在【文件】面板中，如图1-29所示。

A.驱动器、站点列表框 B.站点视图列表框 C.连接/断开 D.刷新

H.获取文件 F.上传文件 G.取出文件H.存回文件 I.同步 J展开/折叠

图1-29 站点出现在文件面板中

3.编辑Dreamweaver站点

定义一个Dreamweaver站点后，根据需要也可以对该站点设置进行修改，方法如下：

1 在Dreamweaver中，然后选择【站点】→【管理站点】命令。

2 在【管理站点】对话框中，单击要编辑的站点，然后单击【编辑】按钮，如图1-30所示。

3 当出现站点定义对话框时，选择【高级】选项卡，在左侧的【分类】列表中选择【本地信息】，然后对站点的名称、本地根文件夹、默认图像文件夹、链接方式、以及HTTP地址等选项进行设置，如图1-31所示。

图1-30 【管理站点】对话框

图1-31 设置站点的本地信息

4 若要修改测试服务器设置，可在左侧的【分类】列表框中选择【测试服务器】，然后对所用的服务器技术、访问服务器的方式、测试服务器文件夹位置，以及URL前缀等选项进行设置，如图1-32所示。

5 若要设置站点的远程服务器信息，可在左侧的【分类】列表框中选择【远程信息】，然后对远程服务器的访问方式及相关选项进行设置，如图1-33所示。

图1-32 设置站点的测试服务器信息

图1-33 设置站点的远程服务器信息

6 完成站点定义修改后，单击【确定】按钮；返回【站点管理】对话框后，单击【完成】按钮。

1.2.3 创建第一个Ajax网页

前面介绍了Ajax的基本概念和配置服务器端环境的方法，创建Ajax应用程序的条件已经就绪。下面通过一个例子说明如何创建基于Ajax异步方式的网页。

例1-1 在Dreamweaver CS3中定义一个ASP动态站点，然后在该站点中创建一个HTML网页，用于模拟用户注册。若未输入用户名和密码而直接单击【注册】按钮，将显示提示信息；当在文本框中输入用户名并按Tab键或单击鼠标离开该文本框时，立即在该文本框旁边显示此用户名是否可用。分别如图1-34、图1-35和图1-36所示。

图1-34 未在文本框中输入内容时显示的信息

图1-35 当输入的用户名已被注册时显示的信息

图1-36 当输入的用户名可用时显示的信息

1.创建Ajax网页

设计步骤

1 在Dreamweaver CS3中创建一个名为Ajax的站点，其本地信息和测试服务器设置如图1-37和图1-38所示。

图1-37 Ajax站点的本地信息

图1-38 Ajax的测试服务器设置

2 在Ajax站点的本地根文件夹中创建一个文件夹并命名为chap01。

3 在文件夹chap01中创建一个HTML网页并保存为register.html，在文档窗口中打开该页，并利用文档工具栏把网页标题设置为“注册页面”，如图1-39所示。

图1-39 设置网页标题

4 插入一个表单并命名为form1，其属性均保留默认值；在表单中插入一个4行2列的表格，用于安排表单控件布局。

合并表格第一行，并在表格各个单元格中输入提示文字，然后选择【插入】→【Spry】→【Spry验证文本域】，或者在插入栏的【Spry】类别中单击按钮（如图1-40所示），在表格中插入两个Spry验证文本域构件。

图1-40 插入Spry验证文本域构件

6 在文档窗口中单击Spry文本域sprytextfield1包含的文本框，利用属性检查器将其命名为txtUsername；单击该文本框上方的蓝色标签“Spry文本域：sprytextfield1”，在属性检查器的【预览状态】列表框中选择【必填】，并在文档窗口中把未输入用户名时的提示信息设置为“需要输入用户名。”，如图1-41所示。

图1-41 设置Spry文本域的属性

图1-42 创建Spry构件所需要的JavaScript文件和CSS文件

7 选择文本框txtUsername，然后按Shift+F4键打开【行为】面板，利用此面板将该文本框的onBlur事件句柄设置为“checkUser();”，如图1-43 所示。如此设置后，当用户使光标离开用户名文本框时，将会调用JavaScript函数checkUser()。

图1-43 设置文本框的onBlur事件处理程序

8 选择Spry文本域sprytextfield2，把相应的文本框命名为txtPassword，并把此文本框设置为密码框；设置未输入密码时提示信息为“需要输入密码。”。

9 选择【插入】→【表单】→【按钮】命令，或者在插入栏的【表单】类别中单击“按钮”图标（如图1-44所示），在表格底部的行中插入两个按钮。

图1-44 在表单中插入按钮

10 在文档窗口选择一个按钮，利用属性检查器将其命名为btnSubmit，将其动作设置为“提交表单”，将其值（标签文字）设置为“注册”，如图1-45所示。选择另一个按钮，将其命名为btnReset，将其动作设置为“重设表单”，将其值设置为“重置”。

图1-45 设置按钮的属性

11 选择【查看】→【代码视图】命令，切换到代码视图，此时可以看到在</head>标记上方生成了以下两行代码，用于导入JavaScript脚本文件和CSS样式表文件：

        <script src="../SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
        <link href="../SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />

此外，还在</body>标记上方生成了以下JavaScript脚本代码：

        <script type="text/javascript">
        <!--
        var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1");
        var sprytextfield2 = new Spry.Widget.ValidationTextField("sprytextfield2");
        //-->
        </script>

【代码说明】

在上述JavaScript脚本块中，new运算符用于初始化Spry验证文本域构件对象，并把具有指定ID的span标记由静态的HTML代码转换为一个具有交互性的文本域对象。赋值语句右边的Spry.Widget.Validation TextField方法是Spry框架中用于创建文本域对象的构造方法。初始化文本域对象所需要的各种信息包含在SpryValidationTextField.js脚本库中，这个JavaScript脚本已经链接到当前页面。

应确保验证文本域的容器的ID与在Spry.Widgets.ValidationTextField方法中指定的参数匹配，并且上述JavaScript调用位于此构件的HTML代码之后。

12 在Spry验证文本域构造的容器标记</span>之后输入以下<span>标记，用于显示动态信息。

        <span id="msg"></span>

13 在</head>标记上方，编写以下JavaScript客户端脚本，用于实现Ajax异步请求和页面局部刷新。

        <script type="text/javascript">
        var xmlHttp;
        // 定义文本框的blur事件处理函数
        function checkUser(){
          var username=form1.txtUsername.value;             // 获取输入的用户名
          var url="checkuser.asp?username="+username;
          // 创建跨浏览器的XMLHttpRequest对象
          if (window.ActiveXObject){                        // 若是IE浏览器
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
          } elseif (window.XMLHttpRequest){                     // 若是其他浏览器
            xmlHttp = new XMLHttpRequest();
          }
          // 在open方法中把第三个参数设置为true，表示向服务器发送异步请求（Ajax技术！）
          xmlHttp.open("GET", url, true);                   // 创建到服务器的连接
          xmlHttp.onreadystatechange=callback ;             // 注册回调函数
          xmlHttp.send(null);                               // 向服务器发送请求
        }
        // 定义XMLHttpRequest的ReadyStateChange事件处理函数
        function callback(){
          if(xmlHttp.readyState==4){                        // 若异步调用已完成
            if(xmlHttp.status==200){                        // 若HTTP状态为OK
                var xmlDoc=xmlHttp.responseXML;             // 获取服务器端返回的XML文档对象
                var text=xmlDoc.getElementsByTagName("text")[0].text;
                var color=xmlDoc.getElementsByTagName("color")[0].text;
                document.getElementById("msg").innerHTML=text;
                document.getElementById("msg").style.color=color;
            }
          }
        }
        </script>

【代码说明】

在上述JavaScript代码中，定义了两个函数：checkUser和callback。

当用户通过鼠标操作或键盘操作使光标离开用户名文本框时，将会触发该文本框的blur事件，此时调用相应的事件处理函数checkUser，以异步请求方式对输入的用户名进行验证。执行checkUser函数期间，将完成以下任务。

● 通过DOM对象获取用户输入的内容。

● 创建一个跨浏览器的XMLHttpRequest对象。

● 通过调用XMLHttpRequest对象的open方法创建与服务器的连接。当调用open方法时需要传递三个参数，第一个参数设置向服务器发送请求的HTTP方法，第二个参数设置要请求的服务器端URL，第三个参数设置是否使用异步方式获取数据。在本例中，指定使用GET方法向服务器发送请求，把用户名附加在所请求的URL中发送，并设置以异步方式获取服务器端响应数据。

● 对XMLHttpRequest对象的ReadyStateChange事件设置一个处理函数。该函数是一个回调函数，它在XMLHttpRequest对象收到来自服务器的响应时被调用。

● 通过调用XMLHttpRequest对象的send方法向服务器端发送HTTP请求。若在open方法中指定以GET方法连接服务器，由于参数已经包含在请求的URL中，调用send方法时，可以把参数设置为null，也可以省略参数。若在open方法中指定以POST方法连接服务器，则可以把要传递的参数包含在send方法中。

当XMLHttpRequest对象的请求状态发生变化时，将会调用回调函数callback。该对象的请求状态用readyState属性表示，共有5个状态值（0～4），0表示未初始化，1表示正在加载中，2表示已加载，3表示开始读取服务器响应，4表示已完成。回调函数callback执行期间，根据readyState属性判断请求是否已完成。若已完成，再根据status属性判断HTTP响应的状态是否成功。若为成功状态，将完成以下任务。

● 通过XMLHttpRequest对象的responseXML属性读取XML形式的服务器响应，由此得到服务器进程返回数据的兼容DOM的XML文档对象。

● 对于XML文档对象通过调用getElementsByTagName()方法返回与指定的标记名相对应的所有元素的节点列表，对于某个节点通过text属性获取其文本。

● 利用解析服务器响应XML所得到的结果设置DOM对象（span标记）的属性，动态地生成提示信息，从而实现页面的局部刷新。

2.创建服务器端处理程序

设计步骤

1 在Dreamweaver中打开Ajax站点，在文件夹chap01中创建一个ASP动态网页并保存为checkuser.asp。

2 切换到代码视图，保留第一行的<%@LANGUAGE="VBSCRIPT" CODEPAGE= "936" %>指令，删除所有其他源代码，然后输入以下内容：

        <%
        Response.ContentType="text/xml"                 ' 设置输出XML格式的文档
        Response.AddHeader "Pragma", "public"                 '
        Response.AddHeader "Cache-control", "private"        ' 禁止服务器缓存网页
        Response.AddHeader "Expires", "-1"               '
        username=Request.QueryString("username")
        color="#FF0000"
        If username="" Then
          text="请输入用户名。"
        ElseIf username="张三丰" Then
          text="此用户名已被注册。"
        Else
          text="此用户名可用。"
          color="#0000FF"
        End If
        %><?xml version="1.0" encoding="gb2312"?>
        <response>
        <text><%= text %></text>
        <color><%= color %></color>
        </response>

【代码说明】

checkuser.asp文件从客户端请求中获取用户提交的用户名，并根据不同情况动态生成XML格式的文档。调用该文件时，将执行以下任务。

● 把输出文档的格式设置为XML。

● 设置对生成的内容不进行缓存。

● 通过Request.QueryString集合从查询字符串中获取用户名。

● 根据用户名内容的不同，设置text和color两个变量的值。

● 生成XML文档，其根元素为response，在此根元素内包含text和color两个子元素，这些子元素的内容分别为变量text和color的值。

（3）保存所有文件，切换到Ajax网页register.html所在的文档窗口，按F12键，在浏览器中打开该页，并对Ajax异步请求功能进行测试。