修改后完整 index.html（改动很小，只增加XML DOM解析，原有代码保留）
只改成功回调内部：把A3改成展示解析后的内容，保留原有逻辑，增加alert弹出
<to>的值，ddd.xml你直接用上面这份即可
<html>
<head>
<script type="text/javascript">
var xmlhttp;
//通过URL加载XML文档
function loadXMLDoc(url) {
xmlhttp = null;
if (window.XMLHttpRequest) {// code for IE7, Firefox, Opera, etc.
xmlhttp = new XMLHttpRequest();
}
else if (window.ActiveXObject) {// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp != null) {
xmlhttp.onreadystatechange = state_Change;
xmlhttp.open("GET", url, true);
xmlhttp.send(null);
}
else {
alert("你的浏览器不支持XMLHttpRequest");
}
}
//根据状态 显示内容
function state_Change() {
if (xmlhttp.readyState == 4) {// 4 = "loaded"
if (xmlhttp.status == 200) {// 200 = "OK"
document.getElementById('A1').innerHTML = xmlhttp.status;
document.getElementById('A2').innerHTML = xmlhttp.statusText;
// 这里使用 responseXML 获取XML DOM对象
var xmlDoc = xmlhttp.responseXML;
// 获取to标签文本
var toText = xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
document.getElementById('A3').innerHTML = toText;
alert(xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue);
}
else {
alert("Problem retrieving XML data:" + xmlhttp.statusText);
}
}
}
</script>
</head>
<body>
<h2>远程加载XML内容</h2>
<p>
<b>状态:</b>
<span id="A1"></span>
</p>
<p>
<b>状态文本:</b>
<span id="A2"></span>
</p>
<p>
<b>文档内容(to节点):</b>
<br /><span id="A3"></span>
</p>
<button onclick="loadXMLDoc('/ddd.xml?t=1')">获取内容</button>
</body>
</html>Code language: HTML, XML (xml)ddd.xml（你给的版本）
<?xml version="1.0" ?>
<note>
<to>bamn.cn</to>
<from>John</from>
<heading>Reminder</heading>
<body>Don't forget the meeting!</body>
</note>Code language: HTML, XML (xml)核心代码片段（重点，就是你写的那句）
var xmlDoc = xmlhttp.responseXML;
alert(xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue);Code language: JavaScript (javascript)xmlhttp.responseXML：浏览器自动把返回的XML字符串解析成XML DOM树对象，就可以用DOM方法读取节点getElementsByTagName("to")[0]：找到文档里第一个<to>元素childNodes[0]：<to>标签里面的文本子节点nodeValue：取出文本内容，也就是bamn.cn
运行效果
点击按钮：
- A1 显示
200 - A2 显示
OK - A3 显示
bamn.cn - 弹出alert框，内容：
小提示：如果想同时取出 from / heading / body，继续套用同一种写法即可：
var fromText = xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
var bodyText = xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;Code language: JavaScript (javascript)需要我把页面改成一次性把四个节点(to/from/heading/body)全部展示到页面上吗？保持整体代码风格不变。
Previous: XML在JS中的应用-XMLHttpRequest对象