浏览器中的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的更多相关文章
- 【译】用jQuery 处理XML--浏览器中的XML与JavaScript
用jQuery 处理XML--写在前面的话 用jQuery 处理XML-- DOM(文本对象模型)简介 用jQuery 处理XML--浏览器中的XML与JavaScript 用jQuery 处理XML ...
- 4.在浏览器中解析XML
要在浏览器中解析获取XML数据,一般只需经过两个步骤:第一,将XML文档.XML字符串转化成XMLDoc对象.第二,使用JS操作XMLDoc对象. 3.1 将XML文档或XML字符串转化成XMLDoc ...
- javascript快速入门25--浏览器中的XML
打开XML 首先,直接从浏览器中打开XML文件,浏览器会对其进行格式良好性检查,如果不符合XML语法规范则显示出错,如果格式良好,再检查是否包含样式表(CSS或XSL),如果包含样式表,则用样式表格式 ...
- 第十一章:WEB浏览器中的javascript
客户端javascript涵盖在本系列的第二部分第10章,主要讲解javascript是如何在web浏览器中实现的,这些章节介绍了大量的脚本宿主对象,这些对象可以表示浏览器窗口.文档树的内容.这些章节 ...
- JavaScript 【 IE中的XML DOM 】
IE中的 XML DOM 在统一的正式规范出来以前,浏览器对于XML的解决方案各不相同.DOM2级提出了动态创建XML DOM规范,DOM3进一步增强了XML DOM.所以,在不同的浏览器实现XML的 ...
- JavaScript权威指南--WEB浏览器中的javascript
知识要点 1.客户端javascript window对象是所有客户端javascript特性和API的主要接入点.它表示web浏览器的一个窗口或窗体,并且可以用window表示来引用它.window ...
- 浏览器中Javascript单线程分析
线程这个特性对于一门语言环境来说是尤其重要的,在Java/C++环境下都提供了多线程API操作. 但在Javascript中据说代码执行时单线程的,大量计算的逻辑会阻塞浏览器HTML渲染,但setTi ...
- 浏览器中JavaScript执行原理
本章我们讨论javascript在浏览器中是如果工作的,包括:下载.解析.执行的全过程.javascript的这些讨人嫌的地方我们是知道的: i.需要串行下载 ii.需要解析 iii.需要串行执行 而 ...
- web浏览器中javascript
1.异步载入一个js代码function loadasync(url) { var head = document.getElementsByTagName("head")[0]; ...
随机推荐
- mysql---左连接、右连接、内连接之间的区别与联系
现有两张表 第一张表为男生表,记录了男生的姓名和配偶的编号 第二张表为女生表,记录了女生的姓名和自己的编号 第一种情况:主持人请所有男生都上台,并且带上自己的配偶.这时不管男生有没有配偶都要上台,所以 ...
- Google设计理念
Google的十大信条 我们首次拟就这“十大信条”还是在Google刚刚成立没几年的时候.此后,我们时常重新审视这份清单,看看它是否依然适用.我们希望这些信条永不过时,而您也可以监督我们是否遵守了这些 ...
- LumiSoft收取邮件(含邮件附件)
在.NET当中利用C#发送电子邮件很简单,微软也提供了默认的实现,但是收取电子邮件的操作却并没有提供解决方案.好在有一些第三方的解决方案可供选择,来简化程序员日常项目中的开发工作. 这里我选用Lumi ...
- if (!floor) 小明.跳楼(); 请问小明会在哪些楼层跳楼?
博客已经迁移到www.imyzf.com,本站不再更新,请谅解! 看到标题请先思考一下这个奇葩的问题..答案在文章最后揭晓.. 会出现这个问题的起源是这样的,一个同学问我: int main() { ...
- leetcode解题—Longest Palindromic Substring
题目: Given a string S, find the longest palindromic substring in S. You may assume that the maximum l ...
- hdu 5512 Pagodas 扩展欧几里得推导+GCD
题目链接 题意:开始有a,b两点,之后可以按照a-b,a+b的方法生成[1,n]中没有的点,Yuwgna 为先手, Iaka后手.最后不能再生成点的一方输: (1 <= n <= 2000 ...
- 【java】Servlet 工程 web.xml 中的 servlet 和 servlet-mapping 标签
摘录某个工程的 web.xml 文件片段: 访问顺序为1—>2—>3—>4,其中2和3的值必须相同. url-pattern 标签中的值是要在浏览器地址栏中输入的 url,可以自己命 ...
- SQL Server 修改排序规则
Net stop mssqlserver Setup /QUIET /ACTION=REBUILDDATABASE /instancename=mssqlserver /SQLSYSADMINACCO ...
- hdu 3333 Turing Tree 图灵树(线段树 + 二分离散)
http://acm.hdu.edu.cn/showproblem.php?pid=3333 Turing Tree Time Limit: 6000/3000 MS (Java/Others) ...
- mongodb Install the MongoDB service
在用到mongodb时,首先要运行mongod.exe以启动mongo,这样就会出现命令框( command prompt),为了避免出现这种情况.要以服务的形式来启动mongo,这样就不会出现命令框 ...