如何从 Javascript 获取访问 XML 文件（两种方式和每件事的错误）

Posted 2023-02-16

技术标签:

【中文标题】如何从 Javascript 获取访问 XML 文件（两种方式和每件事的错误）【英文标题】：How to get access XML file from Javascript (two ways and every thing bug ) 【发布时间】：2021-05-21 18:58:17 【问题描述】：

--- 我在互联网上尝试了所有东西，但没有任何效果（只有 vanilla CSS + XML + XSL）---

我尝试从 javascript 获取访问 XML 值，但它不起作用

我第一次尝试这样做 https://www.w3schools.com/xml/xsl_client.asp

<script>
function loadXMLDoc(filename)

if (window.ActiveXObject)
  
  xhttp = new ActiveXObject("Msxml2.XMLHTTP");
  
else
  
  xhttp = new XMLHttpRequest();
  
xhttp.open("GET", filename, false);
try xhttp.responseType = "msxml-document" catch(err)  // Helping IE11
xhttp.send("");
return xhttp.responseXML;


function displayResult()

xml = loadXMLDoc("cdcatalog.xml");
xsl = loadXMLDoc("cdcatalog.xsl");
// code for IE
if (window.ActiveXObject || xhttp.responseType == "msxml-document")
  
  ex = xml.transformNode(xsl);
  document.getElementById("example").innerhtml = ex;
  
// code for Chrome, Firefox, Opera, etc.
else if (document.implementation && document.implementation.createDocument)
  
  xsltProcessor = new XSLTProcessor();
  xsltProcessor.importStylesheet(xsl);
  resultDocument = xsltProcessor.transformToFragment(xml, document);
  document.getElementById("example").appendChild(resultDocument);
  

</script>

并且有错误 - xhttp.open("GET", filename, false);线。我尝试从这个视频https://www.youtube.com/watch?v=0gON4MUdJE8 使用 Fetch 加载 XML 数据的另一种方法，他告诉我 SCRIPT1002: Syntax error on first line 例如fetch('./Albums.xml').then(() => 2)

我分享了一些代码，希望你能帮我解决这个问题，只尝试在 javascript 上获得价值。

好的，我的 XML

<?xml version="1.0" ?>
<?xml-stylesheet type="text/xsl" href="sheet.xsl"?>
<xmlTag>
blah blah blah
</xmlTag>

我的 XSL 文件

<?xml version="1.0"  encoding ="UTF-8" ?>
<xsl:stylesheet version="1.0 "
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="/xmlTag">

        <head>
            <link rel="stylesheet" href="styles.css"/>
        </head>
        <html>
            <body id="id">
                 // some code
            </body>
        </html>

        <script src="./javaScript.js"></script> // link to my js file

    </xsl:template>
</xsl:stylesheet>

js文件

fetch('./Albums.xml').then(() => 2)

我需要更改js文件或方法（文件之间的连接）？如何从 Js 中获取 xml 值？

谢谢大家，真的很感激

【问题讨论】：

【参考方案1】：

下面的这个函数将获取./Albums.xml 文件，对其进行解析并将其作为XMLDocument 返回。它使用DOMParser API 将一串 XML 转换为可在 JavaScript 中使用的实际 XML 文档。

const getXML = (file) => new Promise((resolve, reject) => 
  const xhr = new XMLHttpRequest();
  xhr.onload = function() 
    resolve(xhr.responseText)
  
  xhr.onerror = function() 
    reject(new TypeError('Request failed'));
  
  xhr.open('GET', file);
  xhr.send(null);
);

const parseXML = xmlString => 
  const parser = new DOMParser();
  const xml = parser.parseFromString(xmlString, 'text/xml');
  return xml;
;

getXML('./Albums.xml').then(xmlString => 
  const xml = parseXML(xmlString);
  console.log(xml);
).catch(error => 
  console.log(error);
);

您的 XSLT 文件在 HTML 部分中有错误的顺序。看到<head> 在下面的<html> 标记之外了吗？

<head>
  <link rel="stylesheet" href="styles.css"/>
</head>
<html>
  <body id="id">
    <!-- Some code -->
  </body>
</html>

那应该在`标签里面，否则不起作用。

<html>
  <head>
    <link rel="stylesheet" href="styles.css"/>
  </head>
  <body id="id">
    <!-- Some code -->
  </body>
</html>

对未来的一些建议。从 W3Schools 中避开您所介绍的旧科目。您刚刚向我们展示的代码是古老的，不应该在当今时代使用。

【讨论】：

我像你说的那样更新 HTML 标记，并将它说的代码添加到 Javascript.js - SCRIPT1002：语法错误 javaScript.js (1,30) 这可能是因为我在 IE 上运行它而导致的问题？，如果是的话，我该如何实时查看这肯定是问题所在。你用的是什么版本的IE？它建议的 JavaScript 不适用于任何版本的 IE。告诉我们更多。我使用的是 IE 11（它只使用 XSL + CSS 文件等运行我的 XML 文件）。我正在尝试任何方法来允许来自 chrome、IE Edge 和 firefox 的安全性，并且不要让我只使用 IE 11 的任何图表（基于 Win10）好的，所以 Fetch API 不能使用file 协议。为此，我们必须使用较旧的XMLHttpRequest。我已经修改了答案以适应这一点。但是，您正在尝试从您的计算机获取静态文件，只要站点在您自己的计算机上运行，它就可以工作，而不是在服务器上运行。【参考方案2】：

我不确定，您在寻找什么。我尝试了教程，它成功了。

// const xmlUrl = '/whatever.xml';
const xmlUrl = URL.createObjectURL(new Blob([`<?xml version="1.0" encoding="UTF-8"?>
<catalog>
  <cd>
    <title>Empire Burlesque</title>
    <artist>Bob Dylan</artist>
    <country>USA</country>
    <company>Columbia</company>
    <price>10.90</price>
    <year>1985</year>
  </cd>
  <cd>
    <title>Hide your heart</title>
    <artist>Bonnie Tyler</artist>
    <country>UK</country>
    <company>CBS Records</company>
    <price>9.90</price>
    <year>1988</year>
  </cd>
</catalog>
`]));

// const xlsUrl = '/whatever.xsl';
const xslUrl = URL.createObjectURL(new Blob([`<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
  <h2>My CD Collection</h2>
  <table border="1">
    <tr bgcolor="#9acd32">
      <th style="text-align:left">Title</th>
      <th style="text-align:left">Artist</th>
    </tr>
    <xsl:for-each select="catalog/cd">
    <tr>
      <td><xsl:value-of select="title"/></td>
      <td><xsl:value-of select="artist"/></td>
    </tr>
    </xsl:for-each>
  </table>
</xsl:template>
</xsl:stylesheet>
`]));

function http_request(method, url, content, callback) 
    const xhr = new XMLHttpRequest();
    xhr.open(method, url, true);
    xhr.addEventListener('readystatechange', function() 
        if (xhr.readyState !== 4 || xhr.status !== 200) 
            return;
        
        if (!!callback && typeof callback === 'function') 
            callback(xhr);
        
    );
    xhr.send(content);


http_request('GET', xmlUrl, void 0, function (xml) 
    const xmlObject = xml.responseXML;
    http_request('GET', xslUrl, void 0, function (xsl) 
        const xslObject = xsl.responseXML;
        const xsltProcessor = new XSLTProcessor();
        xsltProcessor.importStylesheet(xslObject);
        const resultDocument = xsltProcessor.transformToFragment(xmlObject, document);
        document.getElementById("example").appendChild(resultDocument);
    );
);

&lt;div id="example"&gt;&lt;/div&gt;

【讨论】：

以上是关于如何从 Javascript 获取访问 XML 文件（两种方式和每件事的错误）的主要内容，如果未能解决你的问题，请参考以下文章

如何使用 Javascript 访问 iframe 元素？

如何从存储在我的 PC 上的文件中获取 XML 数据并使用 javascript 填充 HTML 表格？

如何从我的网站获取访问者位置（Javascript 或 PHP）

Robot Framework 如何获取文本项

如何从 Google Sign-In Javascript SDK 获取访问令牌？

使用 javascript 从 XML 字符串中获取节点值