时间戳

首页 > 解决方案 > 如何在 javascript 中访问本地 XML？

javascript - 如何在 javascript 中访问本地 XML？

问题描述

我有一个 html 文件，我在其中保存一些笔记和其他信息，我经常更新它，所以它变得很大。这样做的问题是，如果我在布局中更改某些内容，它会变得非常麻烦，因为我必须在很多地方进行更改。所以我有了一个想法，将所有数据放入 XML 并使用 XSLT 将其转换为 HTML。

这立即让我想到了第一个问题：我无法访问 XML。

我尝试的第一件事是通过 XMLHttpRequest 加载它：

function loadXMLDoc(filename)
{
    if (window.ActiveXObject)
    {
        xhttp = new ActiveXObject("Msxml2.XMLHTTP");
    }
    else
    {
        xhttp = new XMLHttpRequest();
    }
    xhttp.open("GET", filename, false);
    xhttp.setRequestHeader('Content-Type', 'application/xml');
    try {xhttp.responseType = "msxml-document"} catch(err) {} // Helping IE11
    xhttp.send("");
    return xhttp.responseXML;
}

但这被“原因：CORS 请求不是 HTTP”阻止。我知道我为什么会得到它，而且我也知道使用 XMLHttpRequest 时很可能无法解决这个问题。（除了篡改本地浏览器安全性，我不想这样做）。

我的下一个想法是将 XML 作为字符串直接放入脚本中，然后将其解析为 XML 文档。就像是：

var rawXml = "
<?xml version="1.0" encoding="UTF-8"?>
<foo>
    <bar/>
    <bar/>
</foo>
";

但这给了我一个“未捕获的语法错误：”“字符串文字包含一个未转义的行”。所以显然 javascript 不支持任何形式的逐字字符串，我必须用 \n 转义所有换行符。我的问题是，我将放弃漂亮的格式。所以阅读和编辑 XML 会很痛苦。这绝对是我想要避免的事情。

编辑：感谢@Taplar 指出，我可以使用模板文字，这使得后一种方法有效。这个解决方案不是最优的，因为我使用 NotePad++，我可以使用 HTML 或 XML 的语法高亮，再加上 XML Tools 语法自动检查被所有的 HTML 代码搞砸了。但到目前为止，这是我拥有的最好的解决方案。如果还有其他选择，我想听听！

（正如其他人已经指出要使用的那样input type=file，这对我来说不是真正可行的解决方案。我想打开 HTML 文档并阅读它。但是对于输入元素，我必须首先选择 XML 并选择 XSL。这有点繁琐，我更喜欢 xml-as-string 解决方案）

标签： javascriptxml

解决方案

你应该设置XMLHttpRequestInstance.responseType为'document'：

function loadXMLDoc(filename, func){
  const x = new XMLHttpRequest;
  x.open('GET', filename); x.responseType = 'document';
  x.onload = d=>{
    func(d);
  }
  x.send();
  return x;
}
// here's how you would execute
loadXMLDoc('yourFile.xml', d=>{
  const productNodeList = d.getElementsByTagName('product');
});

推荐阅读