34.2.4　整合应用

本章前面已经介绍，Ajax是一个整合的技术。在上一节，已经介绍了如何使用JavaScript和PHP（客户端和服务器端编程）发送HTTP请求并获取响应。没有介绍的部分是关于页面的显示：使用XHTML和CSS产生用户所见到的结果。

程序清单34-3给出了ajaxServerTime.html的代码，该文件包含了样式单以及能够调用远程PHP脚本并获取服务器响应的JavaScript脚本。

程序清单34-3　ajaxServerTime.html的代码

＜!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"＞

＜html xmlns="http://www.w3.org/1999/xhtml"xml:lang="en"dir="ltr"lang="en"＞

＜head＞

＜style＞

body{

background:#fff;

font-family:Verdana,sans-serif;

font-size:12pt;

font-weight:normal;

}

.displaybox{

width:300px;

height:50px;

background-color:#ffffff;

border:2px solid#000000;

line-height:2.5em;

margin-top:25px;

font-size:12pt;

font-weight:bold;

}

＜/style＞

＜script src="ajax_functions.js"type="text/javascript"＞＜/script＞

＜script type="text/javascript"＞

var myReq=getXMLHTTPRequest();

＜/script＞

＜/head＞

＜body＞

＜div align="center"＞

＜h1＞Ajax Demonstration＜/h1＞

＜p align="center"＞Place your mouse over the box below

to get the current server time.＜br/＞

The page will not refresh;only the contents of the box

will change.＜/p＞

＜div id="showtime"class="displaybox"

onmouseover="javascript:getServerTime();"＞＜/div＞

＜/div＞

＜/body＞

＜/html＞

以上代码以XHTML声明为开始，后面跟着＜html＞和＜head＞标记。在文档的head区域，插入了以＜style＞＜/style＞封闭的样式单定义。这里只定义了两项：boday标记内所有内容的格式以及使用displaybox类的元素格式。Displaybox类定义为300像素宽，50像素高的白色背景矩形，并且带有黑色边框。此外，该矩形内所有内容将是12 pt的粗体字。

定义样式单内容后，在head元素中给出指向JavaScript函数库的链接。

＜script src="ajax_functions.js"type="text/javascript"＞＜/script＞

如下所示代码创建了一个新XMLHTTPRequest对象并赋值给myReq变量：

＜script type="text/javascript"＞

var myReq=getXMLHTTPRequest();

＜/script＞

这样就结束了head元素的定义，开始定义body元素。在body元素内，只是给出了XHTML内容。在一个对齐属性为居中的div元素中，可以找到该页面的标题文本（"Ajax Demonstration"）以及指导用户将鼠标移至文本框来获得服务器当前时间的信息。

在div元素中的showtime属性是真正定义了脚本应该执行的动作，具体的是，onmouseover事件处理器。

＜div id="showtime"class="displaybox"

onmouseover="javascript:getServerTime();"＞＜/div＞

onmouseover事件处理器的使用意味着，当用户鼠标进入名为showtime的div元素，调用getServerTime()函数。调用该函数将初始化发送给服务器的请求，服务器响应以及出现在div元素中的结果文本。

注意　JavaScript函数可以通过多种方法调用，例如，通过表单按钮的onclick事件。

图34-1、图34-2以及图34-3所示的是脚本实际执行时这些事件的调用顺序。ajaxServerTime.html页面的内容不会重新载入，只有showtime这个div元素中的内容将重新载入。

图　34-1　最初载入ajaxServerTime.html页面所显示的指示信息以及空白文本框

图　34-2　用户鼠标移过该区域将开始请求；图中所示图标表示对象正在载入

图　34-3　服务器端的结果显示在名为showtime的div元素中；再次将鼠标移过该区域将产生脚本的再次调用