搜索吧

首页 » 搜成宝库 » 常用知识 » ajax技术从服务器接收 XML,用javascript处理XML
xiaoyaoyou - 2009-3-30 21:32:38
从服务器接收 XML

由于本系列的重点在于 Ajax 应用模式的客户端,因此我不会深入探讨关于服务器端程序如何才能生成 XML 响应的细枝末节。但在您的客户机接收 XML 时,您需要了解一些特殊的考虑事项。

首先,您可使用两种基本的方式处理一个来自服务器的 XML 响应:

作为碰巧被格式化为 XML 的纯文本
作为一个 XML 文档,由一个 DOM Document 对象表示。
其次,举例来说,假设有一个来自服务器的简单 XML 响应。清单 3 展示了与上面介绍的内容相同的收视率程序清单(实际上,是与 清单 2 相同的 XML,在这里再次给出只是为了使您便于查看)。我将在这部分的讨论中使用这段样本 XML。


清单 3. XML 格式的收视率示例


<ratings>
<show>
  <title>Alias</title>
  <rating>6.5</rating>
</show>
<show>
  <title>Lost</title>
  <rating>14.2</rating>
</show>
<show>
  <title>Six Degrees</title>
  <rating>9.1</rating>
</show>
</ratings>



将 XML 作为纯文本处理

处理 XML 的最简单的选择(至少就学习新的编程技术而言),就是用与处理服务器返回的其他文本片段相同的方法来处理它。换言之,基本上就是忽略数据格式,只关注服务器的响应。

在这种情况下,您要使用请求对象的 responseText 属性,就像在服务器向您发送非 XML 响应时一样(参见 清单 4)。


清单 4. 将 XML 作为普通服务器响应处理

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

      // response has the XML response from the server
      alert(response);
    }
  }
}


前文回顾

为避免出现大量重复的代码,本系列这些后续的文章只给出与所探讨的主题相关的那部分代码。因此,清单 4 仅仅展示了 Ajax 客户机代码中的回调方法。如果您对于此方法在更大的异步应用程序环境中的位置尚不清楚,应回顾本系列的前几篇文章,那些文章介绍了 Ajax 应用程序的基础知识。参考资料 中列出了前几篇文章的链接。


在这个代码片段中,updatePage() 是回调方法,request 是 XMLHttpRequest 对象。最终,您将得到把所有一切串联在一起的 XML 响应,位于 response 变量之中。如果输出此变量,您会得到类似于清单 5 的结果。(请注意,清单 5 中的代码在正常情况下应该是连续的一个代码行。这里采用多行形式是为了显示正常。)


清单 5. response 变量的值

<ratings><show><title>Alias</title><rating>6.5</rating>
</show><show><title>Lost</title><rating>14.2</rating></show><show>
<title>Six Degrees</title><rating>9.1</rating></show></ratings>



这里,要注意的最重要的地方就是 XML 是作为整体运行的。在大多数情况下,服务器不会使用空格和回车来格式化 XML,而是将一切串联在一起,就像您在 清单 5 中看到的那样。当然,您的应用程序不会过于在意空格,所以这算不上什么问题,但确实会使代码阅读起来较为困难。

在这里,您可以使用 JavaScript split 函数来拆分此数据,并通过基本的字符串操作来获得元素的名称和值。毫无疑问,这是个令人头疼的过程,它无视于您花费了大量时间来阅读前几期文章中 DOM(Document Object Model)相关内容这一事实。因此,我要强调,您应该牢记:利用 responseText,可以轻松使用和输出服务器的 XML 响应,但我不会为您展示太多的代码,在能够使用 DOM 时,您不应选择这种方法来获得 XML 数据,下面您会看到这一点。

将 XML 当成 XML

尽管可以 将服务器的 XML 格式的响应视同为其他任何文本响应来处理,但这样做没有很好的理由。首先,如果您一直忠实地阅读这个系列,那么您已经学会了如何使用 DOM 这种对 JavaScript 友好的 API 来操纵 XML。还有更好的事情,JavaScript 和 XMLHttpRequest 对象提供了一个属性,它能完美地获取服务器的 XML 响应,并且是以 DOM Document 对象的形式来获取它。

清单 6 给出了一个实例。这段代码与 清单 4 类似,但没有使用 responseText 属性,回调函数使用的是 responseXML 属性。该属性在 XMLHttpRequest 上可用,它以 DOM 文档的格式返回服务器的响应。


清单 6. 将 XML 当作 XML

function updatePage() {
  if (request.readyState == 4) {
    if (request.status == 200) {
      var xmlDoc = request.responseXML;

      // work with xmlDoc using the DOM
    }
  }
}



现在您有了一个 DOM Document,可以像处理其他任何 XML 一样处理它。例如,随后可能要获取所有 show 元素,如 清单 7 所示。


清单 7. 获取所有 show 元素

function updatePage() {
  if (request.readyState == 4) {
    if (request.status == 200) {
      var xmlDoc = request.responseXML;

      var showElements = xmlDoc.getElementsByTagName("show");
    }
  }
}



如果您熟悉 DOM,从这儿开始,看起来就应该有几分熟悉了。您可以使用您所了解的全部 DOM 方法,轻松操纵从服务器处接收到的 XML。

当然,您也可以混用普通的 JavaScript 代码。例如,可以遍历所有 show 元素,如 清单 8 所示。


清单 8. 遍历所有 show 元素

function updatePage() {
  if (request.readyState == 4) {
    if (request.status == 200) {
      var xmlDoc = request.responseXML;

      var showElements = xmlDoc.getElementsByTagName("show");
      for (var x=0; x<showElements.length; x++) {
        // We know that the first child of show is title, and the second is rating
        var title = showElements[x].childNodes[0].value;
        var rating = showElements[x].childNodes[1].value;

        // Now do whatever you want with the show title and ratings
      }
    }
  }
}



通过这段非常简单的代码,您正是将 XML 响应作为 XML 而不是无格式的纯文本进行了处理,还使用了一点 DOM 和简单的 JavaScript 来处理服务器响应。更重要的是,您使用了标准化的格式 —— XML,而不是以逗号分隔的值或以竖线分隔的名称/值对。换句话说,您将 XML 用在了最适合它的地方,避免了在不适合的地方使用它(比如说向服务器发送请求时)。
1
查看完整版本: ajax技术从服务器接收 XML,用javascript处理XML