XML数据加载与解析-优快云博客

本文介绍了一种通过XMLHttpRequest对象加载XML文件，并将其内容解析成HTML格式的方法。具体步骤包括创建XMLHttpRequest对象、发送GET请求获取XML文件、利用responseXML属性解析XML数据，最后将解析后的邮件信息展示在HTML界面上。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先我们需要创建一个XMLHttp对象：
var http = getHTTPObject();
假设我们有一个XML文件mailbox.xml，它的内容如下：
<?xml version="1.0" encoding="GB2312"? >
<mailbox >
<mail >
<to >老李 </to >
<from >老张 </from >
<heading >好久不见！ </heading >
<body >好久不见，最近好吗? </body >
</mail >
<mail >
<to >小李 </to >
<from >小王 </from >
<heading >周末有空么？ </heading >
<body >周末有空么？一起看场电影吧！ </body >
</mail >
</mailbox >
可以看到，里面存储了两封邮件，现在我们的目标就是把这两封邮件以HTML的方式展现出来，首先我们需要创建一个简单的HTML的界面：
<p > <button >查看书架 </button > </p >
<div id="ajax-sample" > </div >
ajax-sample块用于展示邮件，但查看信箱按钮被按下时，loadXMLDoc函数将被调用：
function loadXMLDoc(name, parseFunc)
{
http.open("GET", name, true);
http.onreadystatechange = parseFunc;
http.send(null);
}
可以看到，这个函数只是简单的向服务器发送一个GET请求，真正对XML文档进行处理的是parseFunc，也就是我们传入的parseMailBox函数：
function parseMailBox()
{
//4表示请求已完成
if (http.readyState == 4) {
//responseXML是一个HTML DOM Document对象，
//我们将使用它来解析XML文档
var mailBoxXML = http.responseXML;
//获取所有信件
var mails = mailBoxXML.getElementsByTagName(’mail’);
var mailStr = "";
for (var i = 0; i < mails.length; i++) {
var mail = mails;
//解析信件
var to = getElementText(mail, "to");
var from = getElementText(mail, "from");
var heading = getElementText(mail, "heading");
var body = getElementText(mail, "body");
//为信件添加附属信息
mailStr += "收信人：" + to + " <br >";
mailStr += "发信人：" + from + " <br >";
mailStr += "标题：" + heading + " <br >";
mailStr += "正文： <br >" + body + " <br > <br >";
}
//将信件展示到页面上
document.getElementById("ajax-sample").innerHTML = mailStr;
}
}
getElemenText函数相当简单，它的作用就是获取一个元素的文本：
function getElementText(parentElem, name)
{
var result = parentElem.getElementsByTagName(name)[0];
return result.firstChild.nodeValue;
}
这样一个XML文档就解析完毕了，是不是相当的简单。

xmlhttm 取XML