来自IBM Developer Works

浏览器中的XML与JavaScript

在处理XML前，你需要在JavaScript中获取它。这一部分展示了一些不同的方法用来在JavaScript中获取XML并且对它进行处理。

XML的节点类型

在我们研究如何处理XML前，先来了解下XML中不同的节点及类型。如果是HTML，了解这些节点就没必要了，但由于XML的可扩展性和结构的不确定性，了解这些固有节点类型就显得犹为重要了。

下面是XML 中12种不同的节点（表格取自W3School中文站点）：

节点类型	描述
Document	表示整个文档（DOM 树的根节点）
DocumentFragment	表示轻量级的 Document 对象，其中容纳了一部分文档。
DocumentType	向为文档定义的实体提供接口。
ProcessingInstruction	表示处理指令。
EntityReference	表示实体引用元素。
Element	表示 element（元素）元素
Attr	表示属性。
Text	表示元素或属性中的文本内容。
CDATASection	表示文档中的 CDATA 区段（文本不会被解析器解析）
Comment	表示注释。
Entity	表示实体。
Notation	表示在 DTD 中声明的符号。

妳可以使用JavaScript来获取一个节点并检查它的类型。清单13中的代码返回真如果传入的节点类型为Comment，否则返回假。这里的代码还不涉及jQuery，但在后面探索XML的节点值的时候会用到。

Listing 13. JavaScript function for determining if the node element is a comment

function isNodeComment(node){

return (node.nodeType===8);

}

</script>

这里并不对每个节点类型做具体介绍，但熟悉这些节点对于处理它和它其中的值至关重要。

在客户端用JavaScript处理XML

之前例子中用来处理HTML的代码大部分都可以直接拿来处理XML；需要注意的一点是，XML中不能依赖id属性来处理一个节点了，需要使用节点名字这种更通俗的方法来进行。另外，在进行XML处理时，节点名字的大小是敏感的。

假设我们要处理的XML如下面清单14这个样子。

Listing 14. A simple XML file

<?xml version="1.0" encoding="UTF-8" ?>

<related_items>

<related_item content_id="2"></related_item>

<related_item content_id="3"></related_item>

</related_items>

</item>

在JavaScript中获取XML

要处理清单14中的XML，首先要做的事情就是在JavaScript中取得它。有很多方法可以做到这点：

在服务器端将XML转成字符串类型传到JavaScript
在服务器端将XML 与一个textarea 控件进行绑定
通过Ajax将XML装载进浏览器

每种方法的详细步骤如下：

在服务器端将XML转成字符串类型传到JavaScript

通过一种服务器端编程语言，可以将XML 转成字符串放到一个JavaScript变量中。这种方法不是最优雅也不是最特别的，但它确实有用。但这种方法有个优点就是妳可以从任何地方加载XML文件，甚至是本地服务器（见清单15）。

Listing 15. Writing XML into a JavaScript variable from PHP

<?php

$xmlPath = "/path/to/file.xml"; // or http://www.somedomain.com/path/to/file.xml

$xmlFile = file_get_contents($xmlPath);

var xmlString = "<?=$xmlFile?>";

</script>

在服务器端将XML 与一个textarea 控件进行绑定

另外一种稍微有点区别的方法是将XML装载进一个<textarea> (这个元素可以不在展示)。然后通过之前提到过的innerHTML 来获取XML 字符串然后放到JavaScript中。

妳可以把这个包含了XML的PHP变量放到一个id为"xml"的<textarea>标签中，之后可以通过这个id方便地获取它：

）。

Listing 16. Exposing XML to JavaScript from a textarea element

var xmlString = document.getElementById("xml").innerHTML;

</script>

考虑浏览器兼容性，使用清单17中的方法来从XML字符串创建DOM。

Listing 17. Cross-browser JavaScript function for converting an XML string into a DOM object

/**

* 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中返回XML字符串(见清单18)。

Listing 18. Cross-browser JavaScript function for returning a string representation of an XML DOM object

/**

* Returns string representation of passed XML object

function getXmlAsString(xmlDom){

return (typeof XMLSerializer!=="undefined") ?

(new window.XMLSerializer()).serializeToString(xmlDom) :

xmlDom.xml;

}

</script>

通过Ajax将XML装载进浏览器

最后种在JavaScript中获取XML的方法是通过Ajax。详见后面关于jQuery的部分。

JavaScript中处理XML

让我们看看之前提到的一些标准的JavaScript方法如果应用到XML上。要获得当前条目的的代码实现。

Listing 19. XML Processing using 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 是否包含子节点就可以安全地返回description 的值了。如果有子节点，那么就可以访问nodeValue获取值。当妳想要获取某个特定节点的文本值时，事情变得有点难了。虽然某些浏览器支持在XML中使用之前提到的innerHTML属性，但大多数不支持。所以妳需要首先检查下它是否包含firstChild （文本节点textNode，注释节点comment ，子节点child node），如果有才可以访问nodeValue。上面的代码中，如果检查到不存在子节点则返回空字符串。

最后，妳看到，setAttribute() 和 getAttribute()方法的使用完全和在HTML中一样。

到这里妳已经见识了如何使用原始的JavaScript代码来处理HTML和XML节点。下一节中引入jQuery,妳将会看到这个库有多强大威武，不仅简化了处理流程而且使妳对DOM的操作更得心应手。

【译】用jQuery 处理XML--浏览器中的XML与JavaScript的更多相关文章

浏览器中的XML与JavaScript
浏览器中的XML与JavaScript 在处理XML前,你需要在JavaScript中获取它.这一部分展示了一些不同的方法用来在JavaScript中获取XML并且对它进行处理. XML的节点类型在 ...
4.在浏览器中解析XML
要在浏览器中解析获取XML数据,一般只需经过两个步骤:第一,将XML文档.XML字符串转化成XMLDoc对象.第二,使用JS操作XMLDoc对象. 3.1 将XML文档或XML字符串转化成XMLDoc ...
XML(php中获取xml文件的方式/ajax获取xml格式的响应数据的方式)
1.XML 格式规范: ① 必须有一个根元素 ② 不可有空格.不可以数字或.开头.大小写敏感 ③ 不可交叉嵌套 ④ 属性双引号(浏览器自动修正成双引号了) ⑤ 特殊符号要使用实体 ⑥ 注释和HTML一 ...
jQuery：获取浏览器中的分辨率
JQuery: <script type="text/javascript"> $(document).ready(function(){ alert($(window ...
批量删除xml文件中的<?xml version="1.0" ?>
#!/bin/shcd 'home/usrname/'ls cd '/home/usrname/VOC2007/Annotations/' for file in `ls /home/usrname/ ...
javascript快速入门25--浏览器中的XML
打开XML 首先,直接从浏览器中打开XML文件,浏览器会对其进行格式良好性检查,如果不符合XML语法规范则显示出错,如果格式良好,再检查是否包含样式表(CSS或XSL),如果包含样式表,则用样式表格式 ...
Spring 在xml文件中配置Bean
Spring容器是一个大工厂,负责创建.管理所有的Bean. Spring容器支持2种格式的配置文件:xml文件.properties文件,最常用的是xml文件. Bean在xml文件中的配置 < ...
XML学习笔记——关于XML解析器
本篇文章基于W3C而写在Firefox及其他浏览器中的XML解析器(除IE) var xmlDoc=document.implementation.createDocument("&quo ...
java读取xml文件报“org.xml.sax.SAXParseException: Premature end of file” .
背景:java读取xml文件,xml文件内容只有“<?xml version="1.0" encoding="UTF-8"?>”一行 java读取该 ...

随机推荐

Java打jar包详细教学
如果我们需要将写好并测试OK的公共接口供多个项目使用,我们可以不用拷贝源代码,可以编译后打包成jar文件,这样会很方便许多,修改的话也方便,直接修改源代码打一个新jar包替换即可,下面是打包的详细教程 ...
C#装箱和拆箱
1.装箱是将值类型转换为引用类型(或者转换为此值类型所实现的任何接口类型)的隐式转换,当 CLR 对值类型进行装箱时,会将该值包装到 System.Object 内部,再将后者存储在托管堆上. ; / ...
小试牛刀--利用豆瓣API爬取豆瓣电影top250
最近得赶进度爬点东西,对于豆瓣,它为开发者提供了API,目前是v2版本,目前key不对个人开放,但是可以正常通过其提供的API获取数据.豆瓣V2版API权限分3类:公开.高级.商务,我们用开放基本数据 ...
天气预报API(三)：免费接口测试（“旧编码”）
说明我以参考文章为引子,自己测试并扩展,努力寻找更多的气象API... 本文所有测试均以青岛为例. 本文所列接口城市代码(cityid)参数都使用的 "旧编码": 全国城市代码列 ...
黑马程序员－懒加载 lazy loading
懒加载:延迟加载,当程序启动时不加载资源,当程序需要这些资源时再去加载.需要的时候再加载的一种方式,能够减少内存的占用,效率高.其本质是重写get方法. 背景:由于ios内存有限,如果我们一次性将所有 ...
Freemarker 内置函数数字、字符串、日期格式化用法介绍
在用FreeMarker过程中,感觉FreeMarker的字符串,日期,集合等处理能力还是很强大的,上网搜了一些资料,整理如下,以便能帮助大家更熟练的应用Freemarker完成项目开发. 一.Seq ...
如何判断UIPanGestureRecognizer的拖动方向
最近做一个项目,需要用到UIPanGestureRecognizer做一个侧滑菜单,需求是不能向右侧拖动(点击按钮右滑),但可以向左侧手势拖动收回:于是需要判断拖动的方向,百度了一下,网上大部分的答案 ...
剑指offer算法_位运算求和
不用+,-,*,/运算求和,可以分成三步: 1.计算两个数字的异或值,相当于只计算每一位的和,不计算进位,得出结果sum: 2.计算两个数字的与值,相当于求出两个数字的进位,然后左移一位,相当于进位, ...
测试架构图 High Level 产品技术（无事来更新，证明这个博客还是Live的）
一个完整的产品测试所需要掌握的产品技术架构. 1.最底层硬件平台(服务器与存储) 对于一个大型商业解决方案来说,性能与可靠性是非常重要的要求,那么服务器与存储就是专门来满足需求的. 服务器: 服务器端 ...
List 源码分析笔记
List Class Diagram: 笔记一: 1.Iterable 接口只定义一个iterator()方法. Iterator 接口有hasNext, next, remove方法. ListIt ...

【译】用jQuery 处理XML--浏览器中的XML与JavaScript

浏览器中的XML与JavaScript

XML的节点类型

在客户端用JavaScript处理XML

在JavaScript中获取XML

JavaScript中处理XML

【译】用jQuery 处理XML--浏览器中的XML与JavaScript的更多相关文章

随机推荐

热门专题