后端处理 — 服务器端脚本和程序 — 并不总能一投入到 Ajax 应用程序中就很好地运转。相反，若能仔细地提前规划以确保数据以恰当及有效的格式发送，反而能让整个应用程序更内聚，并能减少不必要的复杂性。在本文中，Brett McLaughlin 展示了一个好的服务器端脚本如何能补足 Ajax 行为。
在本系列的 第 1 部分，我们在 Nathan Smith 的 Hoverbox 代码（到初始 Hoverbox 代码的相关链接可以在 参考资料 部分找到）的基础上构建了一个视觉上异常丰富的前端来展示图片库。通过这个处理过程，您了解了一些基本的 UI 原则：人眼遵循的 Z-模式、保持页面一致性、如何减小从页面滑下的框中文本字体的大小以及 serif 和 sans-serif 字体的可读性间的差异。
完成第 1 部分的操作之后，您应该有了一个很像样的图片库，如图 1 所示，这就是我们在第 1 部分中完成的那个 Hoverbox UI：
在本篇文章中，我们将添加关键的后端处理以及一些特定于 Ajax 的代码以将图片库连到后端。
正如我先前提到的，Ajax 的大部分工作都是进行管道处理：设置好 XmlHttpRequest 对象、调用服务器端程序并获得响应。程序可能会改变，有关请求的细节可能不同，但不管在何种情况下，基本的设置都是相同的：
更多细节可以在其他文章中（参见 参考资料 部分）找到，所以我们这里只给出一个大概。
首先，我们需要一个类似 XmlHttpRequest 的响应对象。让我们先来以独立于浏览器的方式创建一个。清单 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 — 这类事由他人负责。不管怎样，您都需要知道脚本的一些规范以及该如何与其通信。
如下是应用程序需要与之通信的脚本的一个简要规范：
 |
|
通常，您具有足够的信息可以让您返回到 JavaScript。但如果那样的话，您就没有机会尝试实际的脚本了，所以让我们稍微绕下路，实际构建一下规范所描述的 PHP 脚本（和 MySQL 数据库）。这样，您就能够实际在自己的机器上运行此应用程序了。
在设计应用程序时 — 尤其是可以在其中编写 JavaScript 的 Web 应用程序 — 您通常都不能决定您与之交互的数据库以及您连接到的服务器该如何运转。更多的时候是要遵循给定的规范或是一组示例输入所指定的格式。
为了能在一定程度上说明上述情况，我们将会构建一个简单的 PHP 脚本，而且不过多地考虑 Web 表单该如何设计。考虑如下的一个实际例子：有人将一个脚本交由您处理或至少给出了该脚本如何工作的细节。输入不多，但没关系，您是 Web 方面的专业人士，您应该知道如何处理最奇异的数据格式，对么？
由于这实际上更多涉及的是客户端，而且您也不过刚刚得到服务器端的规范，所以清单 2 给出了针对此服务器的 PHP。您既可以对其进行深入研读也可以完全忽略它。但要确[1] [2] [3] [4] [5] 下一页
打印文档
推荐好友 
返回顶部
增大字体 
减少字体
