掌握ajax 第二部分构建 Ajax 后端

来源：互联网发布：java职业生涯规划编辑：程序博客网时间：2024/05/19 13:05

在本系列的第 1 部分，我们在 Nathan Smith 的 Hoverbox 代码（到初始 Hoverbox 代码的相关链接可以在参考资料部分找到）的基础上构建了一个视觉上异常丰富的前端来展示图片库。通过这个处理过程，您了解了一些基本的 UI 原则：人眼遵循的 Z-模式、保持页面一致性、如何减小从页面滑下的框中文本字体的大小以及 serif 和 sans-serif 字体的可读性间的差异。

完成第 1 部分的操作之后，您应该有了一个很像样的图片库，如图 1 所示，这就是我们在第 1 部分中完成的那个 Hoverbox UI：

图 1. 在第 1 部分中完成的 Hoverbox UI

在本篇文章中，我们将添加关键的后端处理以及一些特定于 Ajax 的代码以将图片库连到后端。

准备好 Ajax 管道处理

正如我先前提到的，Ajax 的大部分工作都是进行管道处理：设置好 XmlHttpRequest 对象、调用服务器端程序并获得响应。程序可能会改变，有关请求的细节可能不同，但不管在何种情况下，基本的设置都是相同的：

创建新的请求对象（最好是以跨浏览器的方式）。
构造一个请求 URL，可能还要 POST 请求数据。
设置一个方法，当从服务器收到响应时，用此方法为浏览器进行回调。
发送请求。
构造一个回调，此回调可以运行和执行程序想要对服务器数据进行的任何操作。

更多细节可以在其他文章中（参见参考资料部分）找到，所以我们这里只给出一个大概。

创建响应对象

首先，我们需要一个类似 XmlHttpRequest 的响应对象。让我们先来以独立于浏览器的方式创建一个。清单 1 是所需的代码：

清单 1. 创建一个请求对象

/* Create a new XMLHttpRequest object to talk to the Web server */var request = false;/*@cc_on @*//*@if (@_jscript_version >= 5)try {  request = new ActiveXObject("Msxml2.XMLHTTP");} catch (e) {  try {    request = new ActiveXObject("Microsoft.XMLHTTP");  } catch (e2) {    request = false;  }}@end @*/if (!request && typeof XMLHttpRequest != 'undefined') {  request = new XMLHttpRequest();}

我将上述代码保存到了名为 hoverbox-ajax.js 的文件中，我们将用该文件保存所有用于 hoverbox Web 应用程序的 JavaScript 代码。然后，需要在 HTML 的 head 元素中引用此文件：

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><script language="JavaScript" src="hoverbox-ajax.js"> </script><title>Hoverbox Image Gallery</title><link rel="stylesheet" href='css/hoverbox.css' type="text/css"   media="screen, projection" /><!--[if IE]><link rel="stylesheet" href='css/ie_fixes.css' type="text/css"   media="screen, projection" /><![endif]--></head>

我们需要一个服务器端规范

现在，我们就可以实际连接到服务器端脚本并获得有关每个图像的一些信息。但该脚本可以接受哪些输入呢？输出又是什么格式呢？让我们试着让事情更趋于真实一些：假设您对服务器端代码没有完全的控制权。也可能获取数据的脚本已经写好，目前在做的只是构建一个新的支持 Ajax 的前端。或许您无需处理 PHP — 这类事由他人负责。不管怎样，您都需要知道脚本的一些规范以及该如何与其通信。

如下是应用程序需要与之通信的脚本的一个简要规范：

Ajax 应用程序经过沙箱处理

构建到 XmlHttpRequest 对象中的安全性机制之一是沙箱处理。简单地讲，这意味着运行在给定域（比如newInstance.com）的 JavaScript 代码只能对同一域中的脚本发出请求。所以如果某脚本运行在本地机器上，那么它只能请求这个本地机器上（可能是本地机器上运行的 Web 服务器，比如 Apache 或 IIS）运行的其他脚本。

就本文而言，这意味着您的 Web 页面上的 JavaScript 不能调用 newInstance.com 上的代码，原因是您的页面没有在我的 Web 服务器上使用服务。您需要根据自己的具体设置调整本文中所提及的 URL。您可能还会想要简化服务器端脚本（在后续几个章节中会详细介绍）以便在没有对数据库的访问权限的时候，不会用到该数据库。

脚本保存于特定的 URL。在文本，我们使用 http://www.newInstance.com/ajax/lookupImage.php。
脚本只接受单一输入：所需查看的图像名称。名称不应该有路径，也不应该有扩展名。所以对于像 img/photo07.jpg 这样的引用，脚本想要的只是 “photo7”。
脚本会返回图像名、标题、数据和描述，均用管道符分隔。

通常，您具有足够的信息可以让您返回到 JavaScript。但如果那样的话，您就没有机会尝试实际的脚本了，所以让我们稍微绕下路，实际构建一下规范所描述的 PHP 脚本（和 MySQL 数据库）。这样，您就能够实际在自己的机器上运行此应用程序了。

一点 PHP……

在设计应用程序时 — 尤其是可以在其中编写 JavaScript 的 Web 应用程序 — 您通常都不能决定您与之交互的数据库以及您连接到的服务器该如何运转。更多的时候是要遵循给定的规范或是一组示例输入所指定的格式。

为了能在一定程度上说明上述情况，我们将会构建一个简单的 PHP 脚本，而且不过多地考虑 Web 表单该如何设计。考虑如下的一个实际例子：有人将一个脚本交由您处理或至少给出了该脚本如何工作的细节。输入不多，但没关系，您是 Web 方面的专业人士，您应该知道如何处理最奇异的数据格式，对么？

PHP 脚本

由于这实际上更多涉及的是客户端，而且您也不过刚刚得到服务器端的规范，所以清单 2 给出了针对此服务器的 PHP。您既可以对其进行深入研读也可以完全忽略它。但要确保它与 Web 页面运行于同一服务器上，以便可以编写 JavaScript 来访问它。

清单 2. lookupImage.php 脚本

<?php// Connect to database$conn = @mysql_connect("dc1-mysql-01.kattare.com", "bmclaugh", "db-1p0j0rdw");if (!$conn)  die("Error connecting to MySQL: " . mysql_error());if (!mysql_select_db("bmclaugh", $conn))  die("Error selecting database: " . mysql_error());$image_name = $_REQUEST['image'];$select = 'SELECT *';$from   = '  FROM image_database';$where  = ' WHERE name = \'' . $image_name . '\'';$queryResult = @mysql_query($select . $from . $where);if (!$queryResult)  die("Error retreiving image data from the database.");while ($row = mysql_fetch_array($queryResult)) {  echo $row['name'] . "|" .       $row['title'] . "|" .       $row['date'] . "|" .       $row['description'];}mysql_close($conn);?>

上述代码会获得请求参数以及图像名称、在数据库中查找它并返回所有有关此图像的信息（由管道符 | 分隔），正如规范所规定的一样。

回页首

再加点 SQL

要让此过程更加趋于现实（尽管设置上有些复杂），让我们先来创建一个 SQL 数据库以存储每个图像的信息。如下所示的是来自我所使用的表的 phpMyAdmin 的一个屏幕快照（参见图 2）：

图 2. 示例数据库的表结构

这些列都非常简单：

name：图像名称，应该与我们在 HTML 中的每个 img 元素的 src 属性中所使用的文件名相匹配。注意当我们要将所有这些连起来的时候，我们要去除 img/ 前缀，即图像所在的目录名，所以如果到某个图像的引用是 img/image_01.jpg，我们处理后的结果应该为 "image_01.jpg"。
title：图像的标题，比如 “Sunrise Over the Bay”。该数据显示为用于每个图像的 Web 页右端最大的标题。
date：也很容易，是图像拍摄的日期（顺便说一句，该日期并不一定是图像存储在数据库中的日期）。
description：与图像相关的较长描述，我们要为每个图像显示的主要内容。

很显然，这是一种非常基础的表设计；虽然不怎么复杂，但主旨俱在。使用图像名称作为键不是一种很好的做法，而且还会引发各种各样的麻烦。但，这是数据库设计方面的问题，不在本文的讨论范围之内；这里的关键是设置一个从 Web 页到 JavaScript 到服务器端再到数据库的信息流，而这经常都是在处理实际的应用程序所要涉及的事情。

插入示例数据

接下来，应该向表中插入示例数据。我在本文的参考资料部分提供了一个可下载的 SQL 批文件，它会创建表并插入全部五行数据。您可以针对自己的数据库使用这些数据，自然，花一下午时间为不是自己拍摄的照片键入 20 个描述不是什么愉快的事情。示例包括了 5 行，您可以添加更多的示例数据来填充剩余的图片库。

表中有了这些数据之后，就可以实际将前端（Web 表单）和后端（数据库）连接起来了。

回页首

发送请求

现在，页面已经有了一个请求对象，称为 request，并且用来从中获取数据的 PHP 脚本和数据库也准备好了。这时要做的就是构建一个向脚本发起请求的 JavaScript 函数，然后再将图片库中的图像连接到该函数。

首先构建一个骨架函数

在开始处理客户到服务器的连接前，需要首先确保图像能调用函数。所以让我们从一个简单的占位符 JavaScript 函数开始：

function getImageDetails() { alert("Image details would get pulled here.");}

我将上述代码放到了 hoverbox-ajax.js 中用于创建请求对象的代码的下面。此函数真的不过是一个占位符，但我们现在可以只调用它，而先不用顾及服务器端和 Ajax 细节。它先是创建一个请求对象，然后再弹出一个信息消息框。

近观图像 HTML 和 CSS

现在，需要针对图像修改 HTML。先来看一下图片库中的每个图像是如何表示的：

<li><a href="#"><img src="img/photo01.jpg" alt="description" />  <img src="img/photo01.jpg" alt="description" class="preview" /></a></li>

乍看上去，这让人有些费解，我们不妨分开来看看。首先，这里有一个 a 标记，它不链接到任何东西（使用 # 符号作为对象）。当鼠标在该图像上停留的时候，它能让 CSS 规则就绪。然后，就是 img 标记。这是图片库默认显示的图像 — 较小版。最后，是第二个 img，带 “preview” 类。如下所示的是该类的 CSS（取自 css/hoverbox.css）：

.hoverbox a{        cursor: default;}.hoverbox a .preview{             display: none;}.hoverbox a:hover .preview{             display: block;        position: absolute;        top: -33px;        left: -45px;        z-index: 1;}

默认地，上述代码表明第二个图像 — 即图片库图像未缩小的较大版本 — 被隐藏（display 属性设为 none）。所以当页面加载时，由第二个图像标记所引用的图像不可见。

但是，当鼠标在其上悬停时，.preview 规则生效。该图像被显示在第一个图像的上方（原因是第二个图像的 z-index 被设为 1，一个很低的值），可以稍微向上移动一点以使该图像完全覆盖下面的图像。效果如图 3 所示：

图 3. 较大的图像覆盖下面的图像

调用此 JavaScript 骨架函数

我们需要的动作是当用户的鼠标移到该图像之上时调用我们的 JavaScript 处理程序。这意味着对每个 img 标记上都应该有如下处理：

<li><a href="#"><img src="img/photo01.jpg" alt="description"   onmouseover="javascript:getImageDetails();" /><img src="img/photo01.jpg"   alt="description" class="preview" /></a></li>

将上述代码添加到这 20 个图像标记并重新加载页面。请您也尝试重新加载您的页面并查看结果。您觉得如何？图 4 显示了该设置的效果：

图 4. 将鼠标移到图像之上时弹出警告

很麻烦，是不是？部分原因可能是因为使用了警告。每次当鼠标移动到图像之上时，都会弹出一个警告，而且必须要确认后这个警告窗才能消失。更不要提为了添加此处理程序而更改 HTML 中的全部 20 个 img 标记是多么繁琐了。

但更大的问题是可用性。最终，我们的 getImageDetails() 函数需要调用一个服务器端脚本 —— 而且针对每个鼠标移动事件都要这么做！这意味着即使是缩至第二列的第三个图像，只要是鼠标移至其上的每个图像，服务器都会相应动作。这太差劲了 — 太多不必要的处理负荷。

将对图像的细节处理转给单击操作

更好的做法是使用大图像（带 “preview” 类）的 onClick 事件，这样，当单击图片库时，有关细节会被从服务器中拉出。但这意味着要从 20 个图像中删除鼠标移上处理程序并向另多出来的 20 个图像中添加一个新的处理程序；这太过混乱。让我们退一步以修复这个问题，请记住大多数 Ajax 应用程序都是极度动态的并且不依赖大量 HTML 更改。

如下所示的是一个简单的 JavaScript 函数（与所编写的其他的 JavaScript 代码一同放在 hoverbox-ajax.js），它遍历页面上的所有 img 标记，查找具有特定 CSS 类 “preview” 的所有图像。然后，每个图像的 onclick 处理程序再指向 getImageDetails 方法。太完美了！

function addImageHandlers() { var imagesDiv = document.getElementById("images"); var imageElements = imagesDiv.getElementsByTagName("img"); for (var i=0; i<imageElements.length; i++) {  var class = imageElements[i].className;  if (class == 'preview') {   imageElements[i].onclick = getImageDetails;  } }}

现在就可以通过将其放入页面 body 元素的 onLoad 处理程序来运行它，如下所示：

<body onLoad="addImageHandlers();">

这是一种极标准的 “Ajax 式” 的模式：以编程的方式添加事件处理程序，而不是在 HTML 中手动添加。这种模式最大的好处是可以很方便地进行更改，而不必触及代码中的全部 20（或 40！）个图像元素。

再次运行页面并注意，现在必须要单击每个图像以弹出警告框。更棒了！

找出所单击的图像

接下来，我们需要利用我们的 JavaScript 函数找出所单击的图像的名称并确保该名称符合 PHP 服务器端脚本所要求的格式。最简单的部分是要将整个图像路径传递到此函数，原因是当调用某个 JavaScript 函数时，浏览器都会知道是页面上的哪个元素调用的该函数。可以利用 this 关键词访问该元素。

要想看看其中的工作原理，可以按照如下所示更改 getImageDetails() 方法：

function getImageDetails() { createRequest(); alert(this.src);}

this 引用的是调用函数的那个图像元素，src 属性给出的则是图像的源属性。进行这些更改，重新加载页面后，结果应该如图 5 所示:

图 5. 现在警告会给出图像的 src 属性

这是在正确方向上的一大进步！现在，我们的图片库可以调用一个 JavaScript 函数，获得图像的完整路径。

从图像剥离路径信息

在调用服务器上的 PHP 脚本之前，只剩一个步骤要做。那就是将图像路径转变成只包含单一名称（即照片的名称），不包含任何路径信息或扩展名。所以对于 “file:///Users/bmclaugh/Documents/developerworks/ajax_2-backEnd/hoverbox/img/photo05.jpg”，希望发送给 PHP 脚本的只是 “photo05”。这实际上更像是一种 JavaScript 练习而非一个与 Ajax 相关的任务，代码如下所示：

function getImageName(imagePath) { var splitPath = imagePath.split('/'); var fileName = splitPath[splitPath.length - 1]; return (fileName.split('.'))[0];}

此函数接受图像路径并只获取名称部分。所以现在可以回过头来，稍许更新 getImageDetails() 函数：

function getImageDetails() { createRequest(); alert(getImageName(this.src));}

保存、重新加载，终于得到了我们所想要的：一个能获取图像名称并准备将其发给 PHP 服务器端脚本的处理程序。图 6 显示了此阶段的运行效果：

图 6. 单击图像获取名称。太棒了！

回页首

向服务器发起请求

向 PHP 脚本发送图像名称非常容易。实现此目的所需要的只是一些 Ajax 101 之类的东西：

function getImageDetails() { createRequest(); var url = "lookupImage.php?image=" + escape(getImageName(this.src)); request.open("GET", url, true); request.onreadystatechange = showImageDetails; request.send(null);}

这与我们一直在使用的那个函数基本相同，不过作了几处更改而已。PHP 脚本的 URL 已经构建，图像名称也已添加完毕（进行了转义以确保传递过程中不会出现编程问题）。之后，请求也设置好了，回调函数也已分配，请求亦发送完毕。没有什么特别的，因为所有工作都已经由在上一节中所编写的 JavaScript 函数完成了。

处理服务器响应

Ajax 应用程序最棘手的问题之一就是它们往往会出现在几个不同的地方：HTML 页面、处理样式及简单行为（如弹出图库中的较大图像）的 CSS、客户机上的 JavaScript、服务器上的 PHP 等等。要调试这些应用程序并不简单。

因此，一次只处理一件事情将会更好、更简单。例如，与其写一个用来获取服务器响应、解码并将其上传到页面的回调函数，不如简单地回应服务器响应并确保该响应正是所预期的。然后，可以添加客户端行为。基于此，我们先从回调函数开始：

function showImageDetails() { if (request.readyState == 4) {  if (request.status == 200) {    var response = request.responseText;    alert(response);  } }}

记住，这个函数的名称必须与在 getImageDetails() 函数中指定给请求对象的名称相匹配。

尝试之后，应该可以得到如图 7 所示的响应（这里假您已将数据加载到 MySQL 数据库或已经更改了 PHP 脚本以返回虚拟数据。

图 7. 单击一个图像时立刻为该图像返回数据

看上去很不错！我们已经获取数据，现在只需将数据拆开并放入 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];  } }}

split() 接受一个字符串并将其分成若干部分，再存入数组。因此，我们可以获取图像的标题、日期以及描述（注意 split() 返回一个基于零的数组。在本例中，splitResponse[0] 将返回图像的名称，而这正是我们首先发送给服务器的）。

向 Web 页面添加 ID

利用 id 属性直接在 Web 页面上存取元素再简单不过了。将下面的 ID 添加到 Web 页面中图像明细部分：

<div id="details"><h2 class="info-title" id="info-title">Sunrise over the bay</h2><h3 class="info-date" id="info-date">27 October, 2006</h3><p class="info-text" id="info-text">Here is what I experienced when I took this photo.</p></div>

获取正确的元素

获取这些元素 — 以更改其文本 — 十分简单。为每个元素使用 getElementById() 即可：

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<el.childNodes.length; i++) {    var childNode = el.childNodes[i];    el.removeChild(childNode);   }  } }}

妙处是可以将它们放入所有的 JavaScript 文件中（或将它们放进一个像 dom-utils.js 或 text-utils.js 这样的文件中）并且能在所有的应用程序中使用它们。

现在可以给 showImageDetails() 方法额外添加些简单内容以最终完成它：

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);  } }}

回页首

最后的测试

把所有的东西保存起来然后再重新加载，应该可以看到一个可喜的画面：一个工作中的、异步的图片库！图 8 显示的是我的结果画面：

图 8. 完成后的图片库

您可以对它做更多的修改和进一步的调整。例如，右列的图像与文本有点重叠，就可以将图像与文本间的空间放宽。还可以针对具体的区域设置重新格式化日期，或更复杂些，基于浏览器所报告的来源地设置格式化日期。当然，本文只为 5 个图像提供了示例数据，因此，您可以为剩下的 15 个图像补充上数据。您可以自由发挥。

回页首

Ajax 实际上不只关乎技术

本文是一个小型系列文章中的第二篇，至此，我们已经得到了一个很棒的小 Ajax 应用程序。然而，本文更多关注的是 XmlHttpRequest 调用（如 send() 和 setRequestHeader()）以外的事情。实际上，这是大多数有经验的 Ajax 开发人员都知道的 “小秘密”：Ajax 只需要很简单的技术。使用一点 JavaScript — 甚至都不必使用像 Dojo 或 Prototype 这样的可以使事情变得更简单的现成库 — 您就差不多完成了 90% 的任务。若能再加入一些 DHTML 或是 DOM，您就是百分之百的专业人士了。当然我是指技术方面。

一个好的 Ajax 开发人员的衡量标准是他将如何处理应用程序的各个组成部分及其用户界面。应用程序的观感如何？（还记得我们在上一篇文章中曾讨论过为何可用性对 Ajax 应用程序如此关键么？）服务器端的组件只提供了最低数量的有效格式的数据？Ajax 代码由于必需要应付各种数据处理从而减缓了本应快捷的用户界面？再有，您很好地使用异步性了吗？在本文中，我们对应用程序进行了改动，让其只对应于单击事件来检索数据，因此，我们不会因鼠标在其上移动而为此图像拉出数据。这种可用性很好：在需要时，信息就会出现，但我们还不知道用户将会怎样使用这些信息。

总之，Ajax 更多地关乎设计和架构，而不是纯技术性的。通过 developerWorks 上其他的系列文章（比如我的掌握 Ajax 系列，包括 12 个部分）可以了解更多具体细节，但需要强调的一点是正是 UI 设计、好的用户测验和清晰的思路才是获得成功 Ajax 应用程序的关键。举个例子：在很多实现中，Google Map 并没有真正的异步行为，并且处理界面中涉及了 “Ajax ” 的部分的代码也相对比较简单。但处理界面却要用去大量的工时，比如，东西要放在屏幕上的什么位置？有何选项可用？如何控制它们？这些与 Ajax 技术没有太大关系，但它们都会对应用程序产生影响。

回页首

结束语

在我们结束第 2 部分时，可以花一点时间调整一下此应用程序的用户界面。将文本信息移到左边；应用程序有什么变化么？如果想要单击图像后出现有关该图像的细节信息，又会怎样？整体印象有何不同？再试着处理服务器端组件；让返回的信息增加或减少。注意到有何变化么？

实际上若能在这个简单的示例上多花些时间，同样可以对什么能让应用程序 “可用” 以及什么可以导致应用程序 “沉闷” 有一个更好的理解。为了不冒犯他人，我就不罗列那些沉闷的在线站点了，但只要搜一搜，就能发现很多这样的站点。它们给人的感觉为何如此？可以从中学到什么教训？顺着这个思路走下去，您很快就能自己开发出很棒的 Ajax 应用程序了。

0 0