如何修改IE兼容JS代码以在Chrome中解析XML并输出到表单

关键改动说明 #

• 移除IE专属的ActiveXObject，改用标准的XMLHttpRequest获取并解析XML
• 替换IE特有的XML操作API：
  • xml.load() → 用XHR的open()/send()获取资源，通过responseXML获取解析后的DOM
  • xml.parseError → 改用XHR的状态码和错误事件处理
  • xmlElements.item(0).text → 标准DOM属性textContent
• 修复XML文件中的标签拼写错误（</cx_date>改为</c_date>）
• 优化定时器调用方式，避免字符串解析函数的潜在问题

修改后的完整代码 #

XML文件（http_myxml.xml） #

<?xml version = "1.0" ?>
<record>
<c_date>2022-11-21 07:22:10</c_date>
<ev1_sup>1.22</ev1_sup>
</record>

HTML与JavaScript代码 #

<html>
<body>
<form action="" name="display" method="post">
  <input class="o" size="26" readonly name="c_date">
  <input class="o" size="26" readonly name="ev1_sup">
</form>

<script>
var xml_data_URL = "http_myxml.xml";
var isPolling = false;
var Ptr411Name = "c_date";
var Ptr52901Name = "ev1_sup";

function fetchXMLData() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', xml_data_URL, true);
  xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
      var xmlDoc = xhr.responseXML;
      if (xmlDoc) {
        updateFormFields(xmlDoc);
        isPolling = true;
      } else {
        alert("XML解析失败");
      }
    } else {
      alert("XML加载失败，状态码：" + xhr.status);
    }
  };
  xhr.onerror = function() {
    alert("请求XML资源时发生网络错误");
  };
  xhr.send();
}

function updateFormFields(xmlDoc) {
  var cDateElements = xmlDoc.getElementsByTagName(Ptr411Name);
  if (cDateElements.length > 0) {
    document.display.c_date.value = cDateElements[0].textContent;
  }

  var ev1SupElements = xmlDoc.getElementsByTagName(Ptr52901Name);
  if (ev1SupElements.length > 0) {
    document.display.ev1_sup.value = ev1SupElements[0].textContent;
    if (parseFloat(ev1SupElements[0].textContent) === 0) {
      window.status = "x";
    }
  }
}

function startPolling() {
  fetchXMLData();
  setInterval(fetchXMLData, 16000);
}

window.onload = startPolling;
</script>
</body>
</html>

改动细节解释 #

1. XMLHttpRequest替代ActiveXObject：这是现代浏览器支持的标准HTTP请求API，能跨浏览器获取XML资源并自动解析为DOM对象
2. textContent替代text属性：text是IE对DOM文本内容的非标准实现，标准属性textContent兼容所有现代浏览器
3. 简化轮询逻辑：合并原有的GetData和DisplayData函数，用setInterval替代嵌套的setTimeout，逻辑更清晰
4. 错误处理增强：添加了网络错误、HTTP状态错误和XML解析失败的处理，提升稳定性
5. 变量名优化：Polling改为isPolling，语义更明确

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