jquery xml_用jQuery处理XML

最新推荐文章于 2020-07-06 03:52:22 发布

cuyi7076

最新推荐文章于 2020-07-06 03:52:22 发布

阅读量1.7k

点赞数 1

文章标签： python js javascript java 编程语言 ViewUI

原文链接：https://www.ibm.com/developerworks/xml/tutorials/x-processxmljquerytut/index.html

版权

jquery xml

在你开始前

虽然本教程对于希望学习或提高jQuery和XML处理技能的经验丰富的开发人员很有用，但它还提供了基本DOM脚本概念的实用概述，这些概念甚至可以使最初级JavaScript编码人员也可以快速掌握并掌握它们。本教程的全部范围。

关于本教程

常用缩略语

Ajax：异步JavaScript + XML
DOM：文档对象模型
HTML：超文本标记语言
JSON：JavaScript对象表示法
UI：用户界面
W3C：万维网联盟
XML：可扩展标记语言

随着高级媒体和数据丰富的Web应用程序在浏览器中的普及，诸如XML和jQuery之类的技术由于其广泛的采用和灵活性而成为其体系结构中的重要组件。在本教程中，您将探索浏览器中的DOM处理，将焦点集中于这些范例如何特别地应用于XML，以及jQuery库如何加快开发速度并提高鲁棒性。

本教程涵盖以下特定主题：

DOM简介
浏览器中的XML和JavaScript
jQuery和XML
案例研究：LiveXMLEditor

先决条件

本教程假定您对HTML和JavaScript有基本的了解。要遵循该代码，您需要以下内容：

您最喜欢的文本编辑器，用于编写和编辑代码。
jQuery库。您可以下载并在本地提供它，也可以直接从Google CDN包括并提供它。
一个好的浏览器。虽然支持当今使用的大多数浏览器，但请查看jQuery浏览器兼容性页面以获取推荐的浏览器。许多UI工程师由于使用了有用的插件而选择Firefox进行开发，其中最受欢迎的插件是Firebug。本教程不需要Firebug，但强烈建议使用。
熟悉服务器端语言（尤其是PHP）有助于特定部分，但这不是必需的。

请参阅相关信息的链接，所有的工具下载。

文档对象模型（DOM）简介

在深入研究jQuery和XML之前，让我们看一下在本教程中探索的概念的基础。

DOM是HTML或XML文件的结构，以允许对其进行编程修改的方式表示。在本部分中，您将获取一个基本HTML文档，并通过一些简单的示例探索使用JavaScript进行DOM遍历和操作的方法。

JavaScript中的DOM操作简介

JavaScript提供了一套完整的简单（尽管冗长）的方法来访问，遍历和操作DOM。我不详谈了关于这一主题（请参阅相关主题的推荐资源和教程的列表），但很快就会过去几个简单的例子。

假设您正在使用一个非常基本HTML文档，如清单1所示。

清单1.一个简单HTML文档

<!DOCTYPE html>
<html>
<head>
<title>This is the page Title</title>
</head>
<body class="signed-out">
    <div id="header">
        <ul id="nav">
               <li><a href="/home" class="home">Home</a></li>
               <li><a href="/about" class="about">About</a></li>
               <li><a href="/auth" class="auth">Sign In</a></li>
</ul>
</div>
<div id="article">
<h1>A Plain DOM</h1>
<h2>An sample <b>HTML</b> document.</h2>
<div id="section"></div>
</div>
</body>
</html>

在清单1中，标头包含导航链接列表。要获得带有id article的DIV标签（或元素）JavaScript对象表示形式，可以运行清单2中的代码。

清单2.通过id获取一个DOM元素

<script type="text/javascript">
     var article = document.getElementById("article");
</script>

getElementById()方法是在JavaScript中检索DOM元素的最快方法。 HTML元素的id属性为浏览器提供对该元素的直接访问。由于浏览器不提供重复ID的警告，并且Microsoft®InternetExplorer®将name属性视为ID，因此，避免重复并注意Internet Explorer冲突是您的责任。就是说，实际上，这些问题通常很容易避免，因此并不是一个大问题。

要查看的DOM元素检索的第二种方法是getElementsByTagName() 。这种更通用的方法对于处理XML是必不可少的，因为使用这种格式，您不必依靠元素id属性。查看getElementsByTagName()工作方式。要检索H1节点的内容，可以执行清单3中的代码。

清单3.通过标签名称获取一组元素

<script type="text/javascript">
    var headers = document.getElementsByTagName("h1"); // returns array of H1 elements
    alert(headers[0].innerHTML); // alerts inner html of the first H1 tag: "A Plain DOM"
</script>

在这里注意两个有趣的事情。首先， getElementsByTagName()返回一个数组（顾名思义，是元素的集合）。由于此示例仅包含一个H1元素，因此可以在索引0处进行检索。但是，这绝不是一个安全的假设，因为该元素可能不存在，并且上面的代码可能会引发错误。相反，在尝试访问其属性（或方法）之前，请始终检查该元素是否存在。

其次，您可能已经注意到innerHTML属性。顾名思义，此属性提供对元素内容的访问，在上述情况下，该元素只是一个字符串。如果H1元素包含其他元素（标签），则其值将包含这些元素以及字符串的一部分（请参见清单4 ）。

清单4.使用innerHTML检索带有HTML元素的值

<script type="text/javascript">
   var subheaders = document.getElementsByTagName("h2"); // returns array of H1 elements
   alert(subheaders[0].innerHTML); // "An sample <b>HTML</b> document."
</script>

除了innerHTML，浏览器还提供一个属性，用于仅检索元素的文本内容。但是，此属性在Internet Explorer中命名为innerText ，在其他浏览器中命名为textContent 。为了在所有浏览器中安全地使用它，您可以执行类似于清单5的操作。

清单5.在不同的浏览器中使用`innerText`和`textContent`属性

<script type="text/javascript">
      var headers = document.getElementsByTagName("h1"); // returns array of H1 elements
      var headerText = headers[0].textContent || headers[0].innerText;
</script>

headerText变量获取textContent的值（如果存在），否则获取innerText的值。处理此任务的更明智的方法是创建一个跨浏览器函数来执行此操作，但是如您稍后所见，jQuery已经提供了一个功能。

HTML页面还具有一个“登录”链接。假设用户已使用单独的过程登录，并且您想通过将“登录”标签更改为“退出”在导航中反映出来。在上一个示例中，您使用innerHTML检索了节点的文本值。该属性也可以写入其中。清单6中JavaScript可以实现这一步骤。

清单6.更新DOM节点的innerHTML值

<script type="text/javascript">
     var authElem = document.getElementById("auth"); // returns single element
     authElem.innerHTML = "Sign Out"; // Updates element contents
</script>

除了更新现有节点的值之外，您还可以创建全新的DOM元素，并使用现有元素将它们附加到DOM（请参见清单7 ）。

清单7.创建和注入新的DOM节点

<script type="text/javascript">
      var ulElems = document.getElementsByTagName("ul"); // returns array of UL elements
      var ul      = ulElems[0]; // get the first element (in this case, the only one)

      var li   = document.createElement("li"); // create a new list item element
      var text = document.createTextNode("List Item Text"); // create a text node

      li.appendChild(text); // append text node to li node (still not added to DOM)
      ul.appendChild(li); // append new list node to UL, which inserts it into DOM
</script>

尽管方法getElementById()和getElementsByTagName()通常在文档对象上执行，但您也可以（实际上更有效地）在任何其他元素上执行它们，并将检索范围缩小到当前元素的子元素。显然，该方法假定您正在访问的元素是调用方法的元素的子元素。请牢记上下文的概念，因为稍后在使用jQuery处理XML时会出现这种情况。

从DOM中删除元素也很简单。要删除一个节点，首先要检索它，然后通过通过其父节点引用它来删除它（请参见清单8 ）。（请参阅下面有关parentNode和相关属性的更多信息。）

清单8.从DOM中删除一个元素

<script type="text/javascript">
     var firstList = document.getElementsByTagName("ul")[0];
     firstList.parentNode.removeChild(firstList);
</script>

最后，让我们使用setAttribute()和getAttribute()来进行属性的分配和删除（参见清单9 ）。

清单9.设置和删除元素属性

<script type="text/javascript">
     var firstUL = document.getElementsByTagName("ul")[0];
     firstUL.setAttribute("class", "collapsed");
     firstUL.getAttribute("class"); // returns "collapsed"
</script>

JavaScript中的DOM遍历

除了元素选择和操作外，JavaScript还提供了完整的遍历属性集。您在上一个清单中看到了使用parentNode的示例。给定一个元素，您可以使用这些基本参考从它导航到DOM中的周围元素（请参见清单10 ）。

清单10. JavaScript的DOM遍历属性

firstChild
lastChild
nextSibling
parentNode
previousSibling

请参阅相关信息的链接，一个完整的节点财产清单。

参照给定的<node>，这些元素的DOM表示类似于清单11 。

清单11.相关DOM元素的关系

<parent_node>
     <previous_sibling/>
     <node>
          <first_child/>
          ...
          <last_child/>
     </node>
     <next_sibling/>
</parent_node>

最后，考虑这种关系的树表示，如图1所示。首先是parentNode，它包括节点以及它的previousSibling和nextSibling元素。该节点可以包含一个或多个子节点（带有firstChild和lastChild元素）

图1.相邻节点的树表示

创建用于从起始节点遍历DOM的函数时，其中两个JavaScript节点引用非常有用（请参见清单12 ）。在本教程后面的内容中，当您分析整个XML文档时，将重新使用该功能。

清单12.用于遍历DOMJavaScript函数

<script type="text/javascript">
     function traverseDOM(node, fn){
          fn(node); // execute passed function on current node
          node = node.firstChild; // get node's child
          while (node){ // if child exists
               traverseDOM(node, fn); // recursively call the passed function on it
               node = node.nextSibling; // set node to its next sibling
          }
     }

     // example: adds "visited" attribute set to "true" to every node in DOM
     traverseDOM(document, function(curNode){
          if (curNode.nodeType==="3"){ // setAttribute() only exists on an ELEMENT_NODE
          // add HTML5 friendly attribute (with data- prefix)
          curNode.setAttribute("data-visited", "true");
     }
});
</script>

到目前为止，您已经对DOM遍历和操作的基本知识有了很好的了解，因为它们适用于HTML文档。在下一节中，您将了解它如何应用于XML文档。

浏览器中的XML DOM和JavaScript

在处理XML之前，您首先需要在浏览器中将其公开给JavaScript。本节介绍了实现此目标的不同方法，并探讨了JavaScript如何处理导入的XML DOM。

XML节点类型

在深入研究XML之前，让我们研究一下不同的XML节点类型及其命名常量。尽管在处理HTML时这是一个容易忽略的主题，但由于XML格式的可扩展性以及不可预测的结构，在处理XML时至关重要。正是这种差异要求我在这里介绍XML处理器的自定义方法。

这是12种不同的XML节点类型：

ELEMENT_NODE
ATTRIBUTE_NODE
TEXT_NODE
CDATA_SECTION_NODE
ENTITY_REFERENCE_NODE
ENTITY_NODE
PROCESSING_INSTRUCTION_NODE
COMMENT_NODE
DOCUMENT_NODE
DOCUMENT_TYPE_NODE
DOCUMENT_FRAGMENT_NODE
NOTATION_NODE

您可以使用JavaScript访问元素的nodeType属性并检查其类型。如果传递的节点是注释节点，清单13中的函数将返回true，否则返回false。尽管此函数没有jQuery依赖项，但在分析XML节点值时将进一步探索它。

清单13.用于确定node元素是否为注释JavaScript函数

<script type="text/javascript">
     function isNodeComment(node){
          return (node.nodeType===8);
}
</script>

在本教程中，我不会详细介绍每种节点类型，但是熟悉节点类型对于相应地处理节点及其值至关重要。

使用JavaScript进行客户端XML处理

在处理XML时，许多先前用于处理HTMLJavaScript方法都直接适用；但是，您不能依靠id引用元素，而应使用更通用的按标签名称检索方法。请注意，在处理XML时，标记名称区分大小写。

假设您正在使用清单14中的这个简单XML文件。

清单14.一个简单的XML文件

<?xml version="1.0" encoding="UTF-8" ?>
<item content_id="1" date_published="2010-05-25">
     <description></description>
     <body></body>
<related_items>
<related_item content_id="2"></related_item>
<related_item content_id="3"></related_item>
</related_items>
</item>

在浏览器中将XML暴露给JavaScript

解析清单14中的XML的第一步是将其暴露给JavaScript。您可以通过以下几种方法执行此操作：

XML在服务器端呈现为JavaScript字符串变量
服务器端将XML渲染到textarea元素中
通过Ajax将XML加载到浏览器中

每个选项的详细步骤如下：

XML在服务器端呈现为JavaScript字符串变量
使用服务器端编程语言（例如PHP），可以将XML字符串输出到JavaScript变量中。这不是最优雅，甚至不是最实用的方法，但是可以。这种方法的优势在于，您可以从任何URL以及从本地服务器加载XML（请参见清单15 ）。

清单15.从PHP将XML写入JavaScript变量
```
<?php
     $xmlPath = "/path/to/file.xml"; // or http://www.somedomain.com/path/to/file.xml
     $xmlFile = file_get_contents($xmlPath);
?>
<script type="text/javascript">
     var xmlString = "<?=$xmlFile?>";
</script>
```

服务器端将XML渲染到textarea元素中

稍有不同的方法包括将XML加载到<textarea>字段（不需要可见）中。然后，使用前面介绍的innerHTML属性，检索字符串并将其公开给JavaScript。

您可以将此处定义PHP变量（ $xmlFile ）输出到具有idHTML textarea字段，以方便参考： <textarea id="xml"><?=$xmlFile?></textarea>

然后，使用前面介绍的方法，您可以简单地将值拉出到JavaScript变量中以进行进一步处理（请参见清单16 ）。

清单16.通过textarea元素将XML暴露给JavaScript

<script type="text/javascript">
     var xmlString = document.getElementById("xml").innerHTML;
</script>

由于浏览器对XML的支持有所不同，请使用以下JavaScript函数从XML字符串创建DOM（请参见清单17 ）。

清单17.用于将XML字符串转换为DOM对象的跨浏览器JavaScript函数

<script type="text/javascript">
     /**
      * Converts passed XML string into a DOM element.
      * @param xmlStr {String}
      */
     function getXmlDOMFromString(xmlStr){
          if (window.ActiveXObject && window.GetObject) { 
		  // for Internet Explorer
               var dom = new ActiveXObject('Microsoft.XMLDOM');
               dom.loadXML(xmlStr);
               return dom;
          }
          if (window.DOMParser){ // for other browsers
               return new DOMParser().parseFromString(xmlStr,'text/xml');
          }
          throw new Error( 'No XML parser available' );
     }

     var xmlString = document.getElementById("xmlString").innerHTML;
     var xmlData   = getXmlDOMFromString(xmlString);
</script>

我们还要看一下逆转此过程的功能。给定一个XML DOM对象，清单18中的函数返回一个字符串。

清单18.跨浏览器JavaScript函数，用于返回XML DOM对象的字符串表示形式

<script type="text/javascript">
     /**
      * Returns string representation of passed XML object
      */
     function getXmlAsString(xmlDom){
          return (typeof XMLSerializer!=="undefined") ? 
               (new window.XMLSerializer()).serializeToString(xmlDom) : 
               xmlDom.xml;
     }
</script>

通过Ajax将XML加载到浏览器中
将XML暴露给JavaScript的最后一种方法是通过Ajax。因为我使用jQuery来执行此操作，所以在介绍该库之后，我将更详细地介绍此方法。

使用JavaScript处理XML

让我们看看前面显示的用于DOM处理的标准JavaScript方法如何应用于XML。要检索当前项的描述和相关项的id，可以执行类似于清单19的操作。

清单19.使用JavaScript进行XML处理

<script type="text/javascript">
     // get value of single node
     var descriptionNode = xmlData.getElementsByTagName("description")[0];
var description    
= descriptionNode.firstChild && descriptionNode.firstChild.nodeValue;

     // get values of nodes from a set
var relatedItems    = xmlData.getElementsByTagName("related_item"); 
// xmlData is an XML doc
          var relatedItemVals = [];
       var tempItemVal;
for (var i=0,total=relatedItems.length; i<total; i++){
   tempItemVal = relatedItems[i].firstChild ? relatedItems[i].firstChild.nodeValue : "";
        relatedItemVals.push(tempItemVal);
}

// set and get attribute of a node
description.setAttribute("language", "en");
description.getAttribute("language"); // returns "en"
</script>

仔细看一下这段代码。您之前看到的方法getElementsByTagName()对于处理XML是必不可少的，因为它允许您选择给定名称的所有XML元素。（同样，请记住，在处理XML时，它是区分大小写的。）然后，通过首先检查descriptionNode是否具有firstChild来安全地检索描述值。如果是这样，则继续访问其nodeValue 。当您尝试访问特定节点的文本值时，事情开始变得有些棘手。尽管某些浏览器支持XML文档的先前介绍的innerHTML属性，但大多数浏览器不支持。首先，您必须检查它是否具有firstChild （ textNode ，comment或子节点），如果有，则检索该nodeValue 。如果该值不存在，则将其设置为空字符串。（您可以忽略空值，而仅存储实际值，但出于本示例的目的，让我们保持项目数并使索引保持同步。）

最后，您看到setAttribute()和getAttribute()方法的工作方式与处理HTML文件相同。

您现在已经了解了如何使用普通的旧JavaScript处理HTML和XML文档对象模型。在下一节中，我将介绍jQuery，并演示这个强大的库如何不仅简化处理，而且还增强了您对DOM交互的所有方面的控制。

jQuery和XML

jQuery如此流行的主要原因可能是它的快速简单的遍历引擎和精巧的选择器语法。（出色的文档也确实有帮助。）尽管其主要用途是HTML处理，但在本节中，您将探讨它的工作原理以及如何将其应用于处理XML文件。

jQuery的DOM操作和遍历

要访问jQuery的任何功能，首先需要确保页面上包含文件jquery.js。完成此操作后，您只需调用jQuery()或简写版本$()并将其传递给选择器作为第一个参数。选择器通常是一个字符串，用于指定一个元素或元素集合（如果有多个元素与给定的选择器匹配）。清单20显示了一些基本的jQuery选择器。

清单20.基本的jQuery选择器

<script type="text/javascript">
     var allImages = $("img"); // all IMG elements 
     var allPhotos = $("img.photo"); // all IMG elements with class "photo"
     var curPhoto  = $("img#currentPhoto"); // IMG element with id "currentPhoto"
</script>

请记住，jQuery函数的返回值始终返回jQuery对象。这个对象允许链接方法（请参见清单21 ），该功能与其他一些流行JavaScript框架（可能受Ruby编程语言影响）共享。

清单21.带有链接方法调用的基本jQuery操作

<script type="text/javascript">
     $("img").css({"padding":"1px", "border": "1px solid #333"})
.wrap("<div class='img-wrap'/>");
</script>

此代码选择所有图像，在每个图像上设置填充和边框，然后将每个图像包装在img-wrap类的DIV中。如您所知，跨浏览器的功能很多，只需要一行代码即可。有关jQuery选择器和方法的全面信息，请查看jQuery网站上的出色文档（请参阅参考资料）。

清单22显示了jQuery如何简化上一节中的示例。

清单22.使用jQuery创建和注入DOM节点

<script type="text/javascript">
alert($("h1:first").html()); // .text() also works and might be better suited here

$("#auth").text("Sign Out");

var $li = $("<li>List Item Text</li>"); 
// $ is used as var prefix to indicate jQuery object
$("ul#nav").append($li);
</script>

用jQuery处理XML

我提到传递给jQuery $()函数的第一个参数是字符串选择器。不太常用的第二个参数允许您设置上下文或jQuery的起始节点，以在进行选择时用作根。默认情况下，jQuery使用document元素作为上下文，但是可以通过将上下文限制为文档的更具体（因此更小）子集来优化代码。为了处理XML，您需要将上下文设置为根XML文档（请参见清单23 ）。

清单23.使用jQuery从XML文档中检索值

<script type="text/javascript">
     // get value of single node (with jQuery)
     var description = $("description", xmlData).text(); 
         // xmlData was defined in previous section

     // get values of nodes from a set (with jQuery)
var relatedItems = $("related_item", xmlData);
var relatedItemVals = [];
$.each(relatedItems, function(i, curItem){
     relatedItemVals.push(curItem.text());
});
</script>

该代码可以清理很多东西。通过将节点名称传递给核心jQuery $()函数并设置上下文xmlData ，您可以快速访问所需的节点集。但是，获取节点的价值是需要探索的。

由于innerHTML属性不适用于非HTML文档，因此您不能依赖jQuery的html()方法来检索节点的内容。 jQuery还提供了一种跨浏览器检索HTML节点文本的方法。如前所述， text()方法是innerText属性的跨浏览器包装，但是即使在处理XML时，它在浏览器中的行为也不一致。例如，Internet Explorer忽略了将空节点值（空格，制表符，换行符）视为节点内容的方式。这种方法似乎比Firefox的处理方式更直观，该处理方式将示例XML文件中的related_nodes元素解释为一组文本节点以及related_items节点。要解决此不一致问题，请创建自定义方法以一致地处理文本节点。在这样做时（请参见清单24 ），您使用了一些方便的jQuery方法： contents() ， filter()和trim() 。

清单24.跨浏览器JavaScript函数，用于准确检索节点的文本值

<script type="text/javascript">
/**
      * Retrieves non-empty text nodes which are children of passed XML node. 
      * Ignores child nodes and comments. Strings which contain only blank spaces
      * or only newline characters are ignored as well.
      * @param  node {Object} XML DOM object
      * @return jQuery collection of text nodes
      */
     function getTextNodes(node){
          return $(node).contents().filter(function(){ 
               return (
                    // text node, or CDATA node
                    ((this.nodeName=="#text" && this.nodeType=="3") 
|| this.nodeType=="4") && 
 // and not empty
                    ($.trim(this.nodeValue.replace("\n","")) !== "")
               ); 
          });
     }

     /**
      * Retrieves (text) node value
      * @param node {Object}
      * @return {String}
      */
     function getNodeValue(node){
          var textNodes = getTextNodes(node);
          var textValue = (node && isNodeComment(node)) ? 
                    // isNodeComment is defined above
node.nodeValue : (textNodes[0]) ?        $.trim(textNodes[0].textContent) : "";
          return textValue;
     }
</script>

现在查看如何设置节点值（请参见清单25 ）。要记住的两件事是该操作可能具有破坏性，因为设置根节点的文本值会覆盖其所有子节点。另请注意，如果特定节点没有先前的文本值，则不要使用node.textContent进行设置，而应使用node["textContent"]因为Internet Explorer不喜欢第一种方法（空白时该属性不存在））。

清单25.跨浏览器JavaScript函数，用于精确设置节点的文本值

<script type="text/javascript">
function setNodeValue(node, value){
          var textNodes = getTextNodes(node);
          if (textNodes.get(0)){
textNodes.get(0).nodeValue = value;
}
else {
node["textContent"] = value;
}
     }
</script>

DOM属性和jQuery

如上一节中的示例所示，使用普通的旧JavaScript处理DOM元素的属性已经非常简单。正如预期的那样，jQuery为此提供了简单的等效项，但是此外，可以在选择器中使用属性，这是一个非常强大的功能（请参见清单26 ）。

清单26.使用jQuery获取和设置DOM元素属性

<script type="text/javascript">
     var item = $("item[content_id='1']", xmlData); 
// select item node with content_id attribute set to 1
     var pubDate = item.attr("date_published"); 
// get value of date_published attribute
     item.attr("archive", "true"); 
// set new attribute called archive, with value set to true
</script>

如您所见，jQuery的attr()方法支持属性的检索和设置。更重要的是，jQuery通过允许选择器中的属性，提供了对元素检索的出色访问。在上面的示例中，您从xmlData上下文中选择了content_id属性设置为1的xmlData 。

使用jQuery通过Ajax加载XML

您可能已经知道，Ajax是一种Web技术，用于使用JavaScript从服务器异步检索XML（或文本）。 Ajax本身依靠XMLHttpRequest （XHR）API向服务器发送请求并从服务器接收响应。除了提供出色的DOM遍历和操纵方法外，jQuery还提供了全面的跨浏览器Ajax支持。也就是说，通过Ajax加载XML与Ajax一样原生，因此您处于熟悉的基础上。清单27显示了它在jQuery中的工作方式。

清单27.使用jQuery的Ajax方法加载外部XML文件

<script type="text/javascript">
$.ajax({
type     : "GET",
url      : "/path/to/data.xml",
dataType : "xml",
success  : function(xmlData){
var totalNodes = $('*',xmlData).length; // count XML nodes
alert("This XML file has " + totalNodes);
},
error    : function(){
     alert("Could not retrieve XML file.");
}
 });
</script>

$.ajax()方法具有许多其他选项，也可以通过$.getScript()等快捷方法间接调用，该方法导入并执行一个JavaScript文件$.getJSON() ，该文件会加载JSON数据文件。并将其提供给成功脚本，依此类推。但是，当请求XML类型的文件时，您会陷入核心的$.ajax()方法，该方法的优点是在任何情况下都只能让您知道其语法。在上面的示例中，您只需请求文件/path/to/data.xml，指定dataType为“ xml”，并且请求方法为GET 。浏览器从服务器收到响应后，将相应地触发成功或错误回调函数。在此示例中，成功回调将警告节点总数。 jQuery的星形选择器（*）匹配所有节点。关键是要注意，成功回调函数从服务器接收数据作为第一个参数。变量的名称取决于您，并且如前所述，该值成为传递给旨在处理XML的所有jQuery调用的上下文。

通常，在处理Ajax时要牢记的重要一点是跨域限制，该限制会阻止从不同域检索文件。先前介绍的服务器端XML检索方法在您的应用程序中可能是可行的选择。

将外部XHTML处理为XML

由于XHTML是有效XML的子集，因此没有理由不能以与处理XML相同的方式对其进行处理。为什么您要确切地说是一个单独的主题，但重点是您可以。例如，即使我鼓励使用更健壮的方法，也可以使用这种技术来完美地抓取（有效的）XHTML页面并从中提取数据。

尽管主要用于HTML DOM遍历和操作，但jQuery也可以用于处理XML，尽管它需要将文件发送到浏览器的附加步骤。本节涵盖的主题介绍了不同的方法，并提供了有效处理XML所必需的方法。

案例研究：实时XML编辑

在本部分中，您将应用所学的知识来创建基于浏览器的XML编辑器。

实时XML编辑

虽然我不建议手动编辑XML，但我可以想到太多情况下正是采用这种方法。因此，作为一种学术练习和一种有用的工具，我着手构建一个基于浏览器的XML编辑器。一个主要目标是直接处理XML，而不是将其转换为其他格式（例如JSON），进行更新，然后再转换回XML。进行编辑可以确保文件中唯一受影响的部分是实际编辑的部分，这意味着更少的错误空间和更快的处理速度。本教程涵盖的技术对于将它们组合在一起至关重要。仔细研究它们如何应用。

图2显示了Live XML Edit。

图2.实时XML编辑

通过Ajax上载和加载XML

LiveXMLEdit使用Ajax将XML插入页面。要求用户上传他想要编辑的XML文件，然后将其保存在服务器上，并使用清单27中描述的$.ajax()引入。对原始XML对象的引用将直接保存和编辑。这种方法意味着在用户完成文件编辑后，由于已存在更新的DOM，因此无需进行任何转换。

呈现XML的可折叠和可编辑HTML树表示形式

XML对JavaScript可用之后，使用traverseDOM方法遍历它（请参见清单11 ），并且每个节点及其属性都被呈现为嵌套的无序列表（UL）。然后，使用jQuery分配用于扩展和折叠元素的处理程序，从而简化了较大文档的显示和编辑。还提供了提供编辑功能的操作按钮。

添加处理（和存储）实时编辑的方法

除了用于编辑和删除节点的渲染按钮以及对已编辑字段进行更新之外，加载XML的Ajax调用的成功处理程序还分配了用于处理各种用户交互和事件的处理程序。 jQuery提供了不同的分配处理程序的方法，但是对于不可预测的大型DOM而言，最有效的方法是$.live()方法或其较年轻（甚至性能更高）的同级$.delegate() 。这些方法不是捕获目标元素上的事件，而是分别处理文档或指定元素上的事件。这种方法有很多好处-更快的绑定和解除绑定，并支持与选择器匹配的现有节点以及将来的节点（在这种情况下是关键，因为用户可以创建行为类似于现有XML节点的XML节点）。

服务器端脚本以保存更新的文件

尽管服务器端处理不在本文讨论范围之内，但保存已编辑的文件还是有必要的。对于代码示例，请在GitHub上检查整个应用程序（请参阅参考资料），但是就浏览器处理而言，只需将更新的XML DOM转换为字符串并将其发布到服务器脚本即可。脚本本身检索帖子并将其另存为文件。

摘要

DOM提供了一种在浏览器中激活HTML和XML结构的强大方法。您已经看到了如何使用普通的旧JavaScript来执行此操作，以及jQuery的快速，强大和受支持的功能集如何在确保跨浏览器兼容性的同时极大地简化开发。您还回顾了在浏览器中将XML暴露给JavaScript的不同方法，以及在jQuery的帮助下准确处理XML的方法。资源列表帮助我将本文和Live XML Edit应用程序放在一起。

翻译自: https://www.ibm.com/developerworks/xml/tutorials/x-processxmljquerytut/index.html