浏览器中的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中取得它。有很多方法可以做到这点:

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

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

  1. 在服务器端将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>

  1. 在服务器端将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>

  1. 通过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的更多相关文章

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

    用jQuery 处理XML--写在前面的话 用jQuery 处理XML-- DOM(文本对象模型)简介 用jQuery 处理XML--浏览器中的XML与JavaScript 用jQuery 处理XML ...

  2. 4.在浏览器中解析XML

    要在浏览器中解析获取XML数据,一般只需经过两个步骤:第一,将XML文档.XML字符串转化成XMLDoc对象.第二,使用JS操作XMLDoc对象. 3.1 将XML文档或XML字符串转化成XMLDoc ...

  3. javascript快速入门25--浏览器中的XML

    打开XML 首先,直接从浏览器中打开XML文件,浏览器会对其进行格式良好性检查,如果不符合XML语法规范则显示出错,如果格式良好,再检查是否包含样式表(CSS或XSL),如果包含样式表,则用样式表格式 ...

  4. 第十一章:WEB浏览器中的javascript

    客户端javascript涵盖在本系列的第二部分第10章,主要讲解javascript是如何在web浏览器中实现的,这些章节介绍了大量的脚本宿主对象,这些对象可以表示浏览器窗口.文档树的内容.这些章节 ...

  5. JavaScript 【 IE中的XML DOM 】

    IE中的 XML DOM 在统一的正式规范出来以前,浏览器对于XML的解决方案各不相同.DOM2级提出了动态创建XML DOM规范,DOM3进一步增强了XML DOM.所以,在不同的浏览器实现XML的 ...

  6. JavaScript权威指南--WEB浏览器中的javascript

    知识要点 1.客户端javascript window对象是所有客户端javascript特性和API的主要接入点.它表示web浏览器的一个窗口或窗体,并且可以用window表示来引用它.window ...

  7. 浏览器中Javascript单线程分析

    线程这个特性对于一门语言环境来说是尤其重要的,在Java/C++环境下都提供了多线程API操作. 但在Javascript中据说代码执行时单线程的,大量计算的逻辑会阻塞浏览器HTML渲染,但setTi ...

  8. 浏览器中JavaScript执行原理

    本章我们讨论javascript在浏览器中是如果工作的,包括:下载.解析.执行的全过程.javascript的这些讨人嫌的地方我们是知道的: i.需要串行下载 ii.需要解析 iii.需要串行执行 而 ...

  9. web浏览器中javascript

    1.异步载入一个js代码function loadasync(url) { var head = document.getElementsByTagName("head")[0]; ...

随机推荐

  1. Linux中的简单命令

    history:打印你输过的命令      1.用户在shell中输入的命令会自动保存到内存缓冲区      2.在退出shell的时候,内存中的数据会刷新到磁盘文件:~/.bash_history ...

  2. PH获取当前url路径及服务器路径汇总 (url 获取当前路径 服务器路径)

    以下是整理的一些, php中获取路径的小知识, 希望对你有所帮助! 1,$_SERVER["QUERY_STRING"] 说明:查询(query)的字符串 2,$_SERVER[& ...

  3. 替换a链接的href和title

    新项目准备验收,客户检测网页有安全隐患,说是当前网页使用“http://”有风险,指定外部链接不用“http://”怎么整…… 后来想到用JS替换字符串去操作,找了半天总算找到合用的,最终是用JQ去更 ...

  4. c#通过反射获取类上的自定义特性

    c#通过反射获取类上的自定义特性 本文转载:http://www.cnblogs.com/jeffwongishandsome/archive/2009/11/18/1602825.html 下面这个 ...

  5. (用微信扫的静态链接二维码)微信native支付模式官方提供的demo文件中的几个bug修正

    native支付模式一demo(用微信扫的静态链接二维码)BUG修复,一共4个BUG 1.native_call_qrcode.php这个文件中的代码无法生存native支付的短地址2.WxPayPu ...

  6. Windows脚本

    最近项目测试比较麻烦,要启动好几个command窗口,手敲之类的有些繁琐,于是研究了一下windows脚本,实现以下功能: 懒人吗,参数意义顺序比较懒得记,所以需要友好参数提示: 根据参数数量决定启动 ...

  7. JDBC和DBUtils区别(查询时jdbc只能返回ResultSet需要po转vo,dbutils返回的BeanListHandler与BeanHandler对应集合与对象)

    17:34 2013/6/7 JDBC //添加客户 public void addNewCustomer(Customer c) throws DAOException { Connection c ...

  8. 微软Hololens学院教程- Holograms 101: Introduction with Device【微软教程已经更新,本文是老版本】

    这是老版本的教程,为了不耽误大家的时间,请直接看原文,本文仅供参考哦!原文链接:https://developer.microsoft.com/EN-US/WINDOWS/HOLOGRAPHIC/ho ...

  9. 西门子plc串口通讯方式

    西门子plc串口通讯的三种方式 时间:2015-10-25 14:31:55编辑:电工栏目:西门子plc 导读:西门子plc串口通讯的三种方式,分为RS485 串口通信.PPI 通信.MPI 通信,自 ...

  10. ExtJS4.2学习(14)基于表格的扩展插件(2)(转)

    鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-11-26/184.html --------------- ...