Javascript操作XML文档

最新推荐文章于 2022-09-28 14:32:08 发布

转载最新推荐文章于 2022-09-28 14:32:08 发布 · 73 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/kakaxu/archive/2007/11/16/961496.html

文章标签：

#javascript #xhtml #c# #ViewUI

本文介绍了一种在客户端通过JavaScript操作XML文档的方法。利用提供的函数，可以从指定URL加载XML文档并将其显示为HTML表格。文章提供了完整的代码示例，包括如何解析XML数据并将其转化为表格形式。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JsSolutions._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>客户端操作XML文档</title>

//该函数将从指定的URL装载XML文档，在装载完毕时，把该文档和URL传递给指定的处理函数。

//任何XML文档都可以使用该函数。

function loadXML(url, handler)

{

debugger;

//如果它受支持，则采用标准的2级DOM技术。

if (document.implementation && document.implementation.createDocument)

{

//创建新的Document对象。

var xmldoc = document.implementation.createDocument("", "", null);

//设置装载完毕时发生的情况。

xmldoc.onload = function()

{handler(xmldoc, url); }

//告诉它装载什么URL。

xmldoc.load(url);

}

//否则，用Microsoft公司专用的用于Internet Explorer的API。

else if (window.ActiveXObject)

{

var xmldoc = new ActiveXObject("Microsoft.XMLDOM"); //创建文档

xmldoc.onreadystatechange = function()

{ //设置onload

if (xmldoc.readyState == 4) handler(xmldoc, url);

}

xmldoc.load("xmlFile.xml");

}

//该函数将从传递给它的XML文档读取的数据建立一个雇员HTML表。

function makeTable(xmldoc, url)

{

debugger;

//创建一个<table>对象，并把它插入文档

var table = document.createElement("table");

table.setAttribute("border", "1");

document.body.appendChild(table);

//用HTMLTableElement和相关接口的方法定义表的标题和表头，给每个列命名。

var caption = "Employee Data from " + url;

table.createCaption().appendChild(document.createTextNode(caption));

var header = table.createTHead();

var headerrow = header.insertRow(0);

headerrow.insertCell(0).appendChild(document.createTextNode("Name"));

headerrow.insertCell(1).appendChild(document.createTextNode("Job"));

headerrow.insertCell(2).appendChild(document.createTextNode("Salary"));

//下面找到xmldoc文档中的所有<employee>元素。

var employees = xmldoc.getElementsByTagName("employee");

//遍历这些<employee>元素。

for (var i = 0; i < employees.length; i++)

{

//对于每个雇员，用标准DOM方法获取名字、工作和薪水数据。

//名字来自一个HTML性质。其它值来自<job>和<salary>标记中的Text节点。

var e = employees[i];

var name = e.getAttribute("name");

debugger;

var job = e.getElementsByTagName("job")[0].firstChild.data;

var salary = e.getElementsByTagName("salary")[0].firstChild.data;

//既然我们已经有了雇员的数据，便可以用表的方法创建一个新行，

//用行的方法创建一个新表元，用Text节点存放这些数据。

var row = table.insertRow(i+1);

row.insertCell(0).appendChild(document.createTextNode(name));

row.insertCell(1).appendChild(document.createTextNode(job));

row.insertCell(2).appendChild(document.createTextNode(salary));

}

//测试一下createTextNode函数

function fnChangeNode()

{

var oTextNode = document.createTextNode("New Text");

var oReplaceNode = oSpan.childNodes(0);

oReplaceNode.replaceNode(oTextNode);

}

//loadXML(location.search.substring(1), makeTable);

</script>

</head>

<body onload="loadXML('Source

', makeTable);">

<div>

Original Text

</SPAN>

</div>

</form>

</body>

</html>

XML文件如下：
<?xml version="1.0" encoding="utf-8" ?>
<root>
<employee name="xuweidong">
    <job>
      初级程序员
    </job>
    <salary>
      9999
    </salary>
</employee>
<employee name="daidingguo">
    <job>
      高级程序员
    </job>
    <salary>
      8888
    </salary>
</employee>
</root>

转载于:https://www.cnblogs.com/kakaxu/archive/2007/11/16/961496.html