如何在HTML中访问XML文档？排查Tomcat7下JS/HTML代码失效问题

Hey there! Let's tackle your two questions one by one—first how to access XML in HTML, then why your Tomcat 7 setup isn't working as expected.

一、HTML中访问XML文档的常见方法 #

1. 原生XMLHttpRequest（你正在使用的方式） #

这是传统的兼容旧浏览器的请求方式，注意尽量用异步模式：

// 创建XMLHttpRequest对象
let xmlhttp;
if (window.XMLHttpRequest) {
  xmlhttp = new XMLHttpRequest(); // 现代浏览器
} else {
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); // 适配IE6/7
}

// 配置异步请求（推荐异步，同步请求易被浏览器限制）
xmlhttp.open("GET", "catalog.xml", true);
xmlhttp.onreadystatechange = function() {
  // 确认请求完成且成功
  if (this.readyState == 4 && this.status == 200) {
    const xmlDoc = this.responseXML;
    // 解析XML内容示例
    const cds = xmlDoc.getElementsByTagName("cd");
    for (let i = 0; i < cds.length; i++) {
      const title = cds[i].getElementsByTagName("title")[0].childNodes[0].nodeValue;
      console.log("CD标题:", title);
    }
  }
};
xmlhttp.send();

2. 现代Fetch API（更推荐） #

基于Promise的简洁异步请求方式，代码可读性更高：

fetch("catalog.xml")
  .then(response => response.text())
  .then(str => (new window.DOMParser()).parseFromString(str, "text/xml"))
  .then(xmlDoc => {
    // 处理XML文档
    const cds = xmlDoc.getElementsByTagName("cd");
    // 这里写你的解析逻辑
  })
  .catch(err => console.error("请求XML失败:", err));

二、Tomcat 7下代码未达预期的排查步骤 #

从你的代码片段和Tomcat环境来看，大概率是以下几个问题之一，按顺序排查：

1. 确认XML文件路径是否正确 #

• 确保catalog.xml和你的HTML文件放在Tomcat webapp目录的同一层级（比如webapps/your-project/index.html和webapps/your-project/catalog.xml）。
• 如果XML在子目录，比如webapps/your-project/data/catalog.xml，请求路径要写成"data/catalog.xml"；或者用绝对路径（带上项目上下文）："/your-project/catalog.xml"。
• 直接在浏览器地址栏访问http://localhost:8080/your-project/catalog.xml，看是否能正常加载XML内容。如果返回404，说明路径不对或者文件没放对位置。

2. 放弃同步XMLHttpRequest请求 #

你的代码里用了xmlhttp.open("GET", "catalog.xml", false);（第三个参数为false，同步请求）。现代浏览器会限制主线程的同步请求，而且Tomcat的响应延迟可能导致页面卡顿甚至请求失败。强烈建议改成异步请求（第三个参数设为true），并通过onreadystatechange事件处理响应。

3. 检查XML文件格式合法性 #

XML必须格式完全正确，否则responseXML会返回null：

• 开头要有XML声明：<?xml version="1.0" encoding="UTF-8"?>
• 所有标签必须闭合（比如<cd>...</cd>），不能有未闭合的标签
• 特殊字符要转义（比如&要写成&）
  可以直接用浏览器打开XML文件，看是否有格式错误提示。

4. 补全并检查JavaScript循环逻辑 #

你的代码片段里for (var ...没写完，大概率是循环内的DOM操作有问题。比如完整的表格渲染逻辑应该是：

document.write("<table border='5'>");
var x = xmlDoc.getElementsByTagName("cd");
for (var i = 0; i < x.length; i++) {
  document.write("<tr><td>");
  // 确保XML中存在对应的标签，否则会报错
  document.write(x[i].getElementsByTagName("title")[0].childNodes[0].nodeValue);
  document.write("</td><td>");
  document.write(x[i].getElementsByTagName("artist")[0].childNodes[0].nodeValue);
  document.write("</td></tr>");
}
document.write("</table>");

如果循环里尝试获取不存在的标签，会导致页面无输出或控制台报错。

5. 查看浏览器控制台的错误信息 #

按F12打开开发者工具：

• 切换到Console标签，查看是否有JavaScript错误（比如未定义变量、节点不存在）
• 切换到Network标签，查看catalog.xml的请求状态：
  • 状态404：路径错误，按步骤1修正
  • 状态200但responseXML为null：XML格式错误，按步骤3修正

6. 检查Tomcat的静态资源配置（罕见但可能） #

默认Tomcat允许访问.xml文件，但如果你的web.xml里配置了拦截所有请求的Servlet，可能会导致XML无法被直接访问。检查web.xml，如果有类似这样的配置：

<servlet-mapping>
  <servlet-name>your-servlet</servlet-name>
  <url-pattern>/*</url-pattern>
</servlet-mapping>

需要添加针对.xml文件的映射，让Tomcat直接返回静态资源：

<servlet-mapping>
  <servlet-name>default</servlet-name>
  <url-pattern>*.xml</url-pattern>
</servlet-mapping>

内容的提问来源于stack exchange，提问作者ForWeb