就本文而言，这意味着您的 Web 页面上的 JavaScript 不能调用 newInstance.com 上的代码，原因是您的页面没有在我的 Web 服务器上使用服务。您需要根据自己的具体设置调整本文中所提及的 URL。您可能还会想要简化服务器端脚本（在后续几个章节中会详细介绍）以便在没有对数据库的访问权限的时候，不会用到该数据库。
title：图像的标题，比如 “Sunrise Over the Bay”。该数据显示为用于每个图像的 Web 页右端最大的标题。
date：也很容易，是图像拍摄的日期（顺便说一句，该日期并不一定是图像存储在数据库中的日期）。
description：与图像相关的较长描述，我们要为每个图像显示的主要内容。
很显然，这是一种非常基础的表设计；虽然不怎么复杂，但主旨俱在。使用图像名称作为键不是一种很好的做法，而且还会引发各种各样的麻烦。但，这是数据库设计方面的问题，不在本文的讨论范围之内；这里的关键是设置一个从 Web 页到 JavaScript 到服务器端再到数据库的信息流，而这经常都是在处理实际的应用程序所要涉及的事情。
function addImageHandlers() {
var imagesDiv = document.getElementById("images");
var imageElements = imagesDiv.getElementsByTagName("img");
for (var i=0; i
现在就可以通过将其放入页面 body 元素的 onLoad 处理程序来运行它，如下所示：
这是一种极标准的 “Ajax 式” 的模式：以编程的方式添加事件处理程序，而不是在 HTML 中手动添加。这种模式最大的好处是可以很方便地进行更改，而不必触及代码中的全部 20（或 40！）个图像元素。
再次运行页面并注意，现在必须要单击每个图像以弹出警告框。更棒了！
接下来，我们需要利用我们的 JavaScript 函数找出所单击的图像的名称并确保该名称符合 PHP 服务器端脚本所要求的格式。最简单的部分是要将整个图像路径传递到此函数，原因是当调用某个 JavaScript 函数时，浏览器都会知道是页面上的哪个 元素调用的该函数。可以利用 this 关键词访问该元素。
要想看看其中的工作原理，可以按照如下所示更改 getImageDetails() 方法：
function getImageDetails() {
createRequest();
alert(this.src);
}
this 引用的是调用函数的那个图像元素，src 属性给出的则是图像的源属性。进行这些更改，重新加载页面后，结果应该如图 5 所示:
尝试之后，应该可以得到如图 7 所示的响应（这里假您已将数据加载到 MySQL 数据库或已经更改了 PHP 脚本以返回虚拟数据。
看上去很不错！我们已经获取数据，现在只需将数据拆开并放入 Web 表单中相应的位置。
首先要做的就是用 JavaScript 的 split() 函数拆分来自服务器的数据：
function showImageDetails() {
if (request.readyState == 4) {
if (request.status == 200) {
var response = request.responseText;
var splitResponse = response.split('|');
var title = splitResponse[1];
var date = splitResponse[2];
var description = splitResponse[3];
}
}
}
function showImageDetails() {
if (request.readyState == 4) {
if (request.status == 200) {
var response = request.responseText;
var splitResponse = response.split('|');
var title = splitResponse[1];
var date = splitResponse[2];
var description = splitResponse[3];
var titleElement = document.getElementById("info-title");
var dateElement = document.getElementById("info-date");
var descriptionElement = document.getElementById("info-text");
}
}
}
非常直观。现在剩下要做的就是用服务器的数据实际替代这些元素的文本。
改变 Web 页面上的某个元素中的文本看似 很简单，但实际上却需要费些心思。由于 Document Object Model (DOM) 将文本存为文本所在元素的子节点，事情因此变得复杂了。例如，在 p 中的文本实际上被存在了文本节点中，即表示 p 的元素节点的子节点。
因此，在结束 showImageDetails() 函数前，我们还需要一些有用的实用函数以便让处理 DOM 的工作能变得简单些。这些函数可用来清除一个节点内的文本，然后插入新文本。在 hoverbox-ajax.js 文件中添加这两个函数：
function replaceText(el, text) {
if (el != null) {
clearText(el);
var newNode = document.createTextNode(text);
el.appendChild(newNode);
}
}
function clearText(el) {
if (el != null) {
if (el.childNodes) {
for (var i=0; i
function showImageDetails() {
if (request.readyState == 4) {
if (request.status == 200) {
var response = request.responseText;
var splitResponse = response.split('|');
var title = splitResponse[1];
var date = splitResponse[2];
var description = splitResponse[3];
var titleElement = document.getElementById("info-title");
var dateElement = document.getElementById("info-date");
var descriptionElement = document.getElementById("info-text");
replaceText(titleElement, title);
replaceText(dateElement, date);
replaceText(descriptionElement, description);
}
}
}
