您当前的位置：飞翔学院-IT中国 → 编程开发 → AJAX → 文章内容

打造可靠的 Ajax 应用程序，第 2 部分: 构建 Ajax 后端

作者:Ajax 来源:本站整理发布时间:2008-5-26 10:40:08

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