【译】用jQuery 处理XML--浏览器中的XML与JavaScript
用jQuery 处理XML--浏览器中的XML与JavaScript
来自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
<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>
)。
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上。要获得当前条目的的代码实现。
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的操作更得心应手。
【译】用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读取该 ...
随机推荐
- Android 图片添加水印图片或者文字
给图片添加水印的基本思路都是载入原图,添加文字或者载入水印图片,保存图片这三个部分 添加水印图片: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 ...
- C#语言基础— 输入与输出
C#语言基础— 输入与输出 1.1函数的四要素:名称.输入.输出.加工 1.2主函数:输出语句.输入语句: Static viod Main(string[] stgs)//下划线部分可以自己指定 { ...
- 排序算法 ----(转载::http://blog.csdn.net/hguisu/article/details/7776068)
1.插入排序—直接插入排序(Straight Insertion Sort) 基本思想: 将一个记录插入到已排序好的有序表中,从而得到一个新,记录数增1的有序表.即:先将序列的第1个记录看成是一个有序 ...
- MVC路由配置
目录 URL Routing 的定义方式 示例准备 给片段变量定义默认值 定义静态片段 自定义片段变量 自定义片段变量的定义和取值 将自定义片段变量作为Action方法的参数 指定自定义片段变量为可选 ...
- ubuntu安装goldendict以及添加本地词典和在线词典
软件在ubuntu软件中心安装就可以了, 关于网络词典, 推荐有道在线词典,网址http://dict.youdao.com/search?q=%GDWORD%&ue=utf8 添加方法:编辑 ...
- 查询时,如何保存获取相关路径url
作为新人,总是会有许多小问题不懂,不知道如何解决的. 这不,这次,遇到了路径获取问题. 在Jsp页面中,获取当前路径,在<script></script>中添加 var ur ...
- Object 转化为String时的一个问题 null->"null"
近日在工作出了一个较大的问题,导致被客户投诉. 事情大致是,某个功能里新增对用户手机的修改,在平台数据同步过程中,出现了将用户以前的要同步的数据,那时还没有手机号码所以是null,新功能上线后,将手机 ...
- JavaScript-在当前显示区范围内实现点不到的小方块
<!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...
- 网页中插入FLASH(swf文件)的html代码
一.简单插入flash图像<embed src="你的flash地址.swf"width="300" height="220"> ...
- C语言atof()函数:将字符串转换为double(双精度浮点数)
头文件:#include <stdlib.h> 函数 atof() 用于将字符串转换为双精度浮点数(double),其原型为:double atof (const char* str); ...