浏览器中的XML与JavaScript
浏览器中的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
<script type="text/javascript"> 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" ?> <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> |
在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); ?> <script type="text/javascript"> var xmlString = "<?=$xmlFile?>"; </script> |
- 在服务器端将XML 与一个textarea 控件进行绑定
另外一种稍微有点区别的方法是将XML装载进一个<textarea> (这个元素可以不在展示)。然后通过之前提到过的innerHTML 来获取XML 字符串然后放到JavaScript中。
妳可以把这个包含了XML的PHP变量放到一个id为"xml"的<textarea>标签中,之后可以通过这个id方便地获取它:
<textarea id="xml"><?=$xmlFile?></textarea>
然后就可以方便地将XML从这个HTML元素中取出来放到JavaScript中进行操作了(见清单16)。
Listing 16. Exposing XML to JavaScript from a textarea element
<script type="text/javascript"> 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
<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中返回XML字符串(见清单18)。
Listing 18. Cross-browser JavaScript function for returning a string representation of an XML DOM object
<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装载进浏览器
最后种在JavaScript中获取XML的方法是通过Ajax。详见后面关于jQuery的部分。
JavaScript中处理XML
让我们看看之前提到的一些标准的JavaScript方法如果应用到XML上。要获得当前条目的description字段和相关条目的id,可以通过清单19的代码实现。
Listing 19. XML Processing using JavaScript
<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 是否包含子节点就可以安全地返回description 的值了。如果有子节点,那么就可以访问nodeValue获取值。当妳想要获取某个特定节点的文本值时,事情变得有点难了。虽然某些浏览器支持在XML中使用之前提到的innerHTML属性,但大多数不支持。所以妳需要首先检查下它是否包含firstChild (文本节点textNode,注释节点comment ,子节点child node),如果有才可以访问nodeValue。上面的代码中,如果检查到不存在子节点则返回空字符串。
最后,妳看到,setAttribute() 和 getAttribute()方法的使用完全和在HTML中一样。
到这里妳已经见识了如何使用原始的JavaScript代码来处理HTML和XML节点。下一节中引入jQuery,妳将会看到这个库有多强大威武,不仅简化了处理流程而且使妳对DOM的操作更得心应手。
浏览器中的XML与JavaScript相关推荐
- 如何在Web浏览器中查看XML文件
一旦了解到HTML是XML的一种形式,您可能会想知道如果尝试在浏览器中查看XML文件会发生什么. 结果令人非常失望-Firefox在页面顶部显示一条横幅,上面写着:"此XML文件似乎没有与之 ...
- 报表XML导出rtf格式,结果在浏览器中打开XML文件。下载rtf文件打开后出现Authentication failed 问题
报表XML导出rtf格式,结果在浏览器中打开XML文件.下载rtf文件打开后出现Authentication failed 问题 直接上问题图: 问题描述:在Oracle EBS中执行"资源 ...
- html怎么加载xml文档,在html中解析xml文件(javascript 读取)
George John Reminder Simth 以上是note.xml的内容. 下面note.html是解析note.xml的内容: function parseXML(){ try{ xmlD ...
- JavaScript(JS) 浏览器中设置启用或禁用
所有的现代浏览器都内置了对JavaScript的支持.通常,可能需要手动启用或禁用此支持.本章介绍在浏览器中启用和禁用JavaScript支持的过程:Internet Explorer.Firefox ...
- html中输出 u263c,《 JavaScript程序设计》—— 第三章 数据
3.1 数据类型 JavaScript实际上有6种数据类型: 布尔值,只有true和false两个值 数值,比如 81 和 4.21 文本,JavaScript里称之为字符串 特殊值undefined ...
- Firefox 1.5 中的 XML,第 2 部分: 基本 XML 处理
Uche Ogbuji, 首席顾问, Fourthought Inc. 2006 年 4 月 20 日 在这篇文章中,我将详细讨论一下 Firefox 中的基本 XML 处理.这里提供的 Firefo ...
- 第十一章:WEB浏览器中的javascript
客户端javascript涵盖在本系列的第二部分第10章,主要讲解javascript是如何在web浏览器中实现的,这些章节介绍了大量的脚本宿主对象,这些对象可以表示浏览器窗口.文档树的内容.这些章节 ...
- 《JavaScript权威指南第7版》第15章 Web浏览器中的JavaScript 15.1 15.2 15.3
第15章 Web浏览器中的JavaScript 15.1 网络编程基础 15.1.1 HTML script 标签中的JavaScript 模块 指定脚本类型 脚本运行时:异步和延迟 按需加载脚本 1 ...
- 浏览器中可以运行Window2000,WebAssembly 是 JavaScript 的末日?
版权声明:本文为 testcs_dn(微wx笑) 原创文章,非商用自由转载-保持署名-注明出处,谢谢. https://blog.csdn.net/testcs_dn/article/details/ ...
最新文章
- 成功解决import matplotlib; matplotlib.use('Agg') # pylint: disable=multiple-statements
- 使用yum更新时不升级Linux内核的方法
- C语言中时间的基本用法
- javascript 比量str今天的日期是,参数diff
- asp mysql添加数据_ASP:ado.net 实例向数据库添加数据。
- android服务器连接失败,Android Studio服务器连接失败
- 用开源技术巧解代账公司开票据难题
- python 读取地震道头数据_通过计算机编程快速读取地震数据的方法
- 【安卓按键精灵】教你一个小时自己开发脚本,零基础1个小时上手
- 用Python webdriver图书馆抢座自动预约的正确姿势
- linux poodle漏洞,Claws Mail 3.11.0发布 修复了POODLE 漏洞
- Linux 如何设置当前时间
- 应用“真心话大冒险”项目总结
- 快手IT部门负责人受贿70万元:判18个月
- Linux应用开发3 字符串处理,字符串与其他数字类型的转换,向应用程序传参
- Adobe Audition频谱分析应用
- B站发布首个8K视频,CCTV-8K频道即将开播,一大堆8K利好消息正在到来,8K赛道要开启加速度了吗?
- 详解Folx智能标签系统的运用
- 基金从业考试形式是什么?
- 电源设计调试过程中的异常现象介绍