javascript - 使用 javascript 生成远程 XML，并从网页使用

Question

我正在考虑一个场景，我想“使用”xml/json 文档并从所述日期构建一些视觉元素。

例如，一段时间内的预订列表。假设数据将包含

<unit>
<booked>
<pic>
<booked range>

我不确定的是如何从访问查询字符串到捕获返回的 xml。这看起来很简单，但我似乎无法理解如何访问从 Javascript 返回的 XML。

更多信息:

我正在构建一个移动应用程序，它将显示从 XML 检索的数据。 (我想从应用程序运行 url/查询字符串，生成自定义 xml 文档，并读取返回的 XML 数据(不显示网页)

有什么建议吗？

Answer 1

剧情简介

• 通过 ajax 调用收集 xml。
• Xml 响应可作为 dom 树(已解析)或词法表示形式(文本)
• 让回调处理程序处理您的 xml 并与 dom 交互
• 处理 xml 的选项:
  • XPath
  • Xslt
  • DOM 函数
  • 字符串操作
  • 字符串解析(可能毫无意义，除非你对解析有特殊要求)

代码

使用 XMLHttpRequest 的纯 Javscript 解决方案(文档:例如 MDN reference 、 MDN usage hints ；还存在 tutorial on html5rocks )可能类似于以下片段:

var oReq = new XMLHttpRequest();

function eh_onload ( ) {
    var xmlhttp = this;
    if (xmlhttp.readyState === 4) {
        console.log ( "xmlhttp.status = " + xmlhttp.status);
        if (xmlhttp.status === 200) {
            //
            // process your xml here.
            //
            console.log ( "responseText = '" + xmlhttp.responseText + "'");
            console.log ( "xml root element  = '" + xmlhttp.responseXML.documentElement.nodeName + "'");
        }
        else {
            console.log('error');
        }
    }
}

oReq.onload = eh_onload;
oReq.open("get", "http://wsearch.nlm.nih.gov/ws/query?db=digitalCollections&term=cholera", true);
oReq.send();

该代码片段执行 ajax 请求并注册一个回调，该回调将在请求完成时执行。正如您所看到的，您可以访问接收到的 xml 数据的词法表示形式或已解析的 DOM 结构。

替代方案

如果使用jquery如果您可以接受库，您可以按照以下代码示例继续操作:

function eh_xml ( parsedxml, textStatus, jqXHR ) {
    // process your xml here.
    //
    console.log ( "typeof(parsedxml) = '" + typeof(parsedxml)+ "'");
    console.log ( "$('term', parsedxml).length = " + $("term", parsedxml).length);
}

$.ajax({
      url: "http://wsearch.nlm.nih.gov/ws/query?db=digitalCollections&term=cholera"
    , dataType: "xml"
    , success: eh_xml
});

该代码片段执行 ajax 请求并提供一个回调来接收已解析 (DOM) 表示形式的 xml。

注意事项和警告

代码示例使用美国 NIH 提供的公共(public) Web 服务返回 xml 数据。该选项是随机选择的，其唯一目的是获得一个可用的 PoC。不存在任何隶属关系，并且适用通常的法律免责声明。

可以从网站http://wsearch.nlm.nih.gov/上打开的控制台(例如在Chrome中)测试代码。使用以下前奏，在托管 Web 服务的站点上下文中加载 jquery 库:

var script = document.createElement("script");
script.src = "http://code.jquery.com/jquery-2.1.3.js";
script.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(script);