Question

我正在尝试使用XSL将XML文件转换为整洁的表格。为此，我使用了W3schools提供的示例，它们可以位于here作为起点。然而，浏览器（chrome）抛出了这篇文章标题中描述的错误。我甚至尝试在W3上复制完全相同的例子只是为了遇到同样的错误。在Firefox中尝试调试，这是控制台输出
TypeError: Argument 1 of XSLTProcessor.importStylesheet is not an object.

之前发布了类似的问题，解决方案是将模型从同步更改为异步。我尝试通过onreadystatechange方法做到这一点，但没有成功。这是我合作的代码。

<html>
<head>
<script>
    function loadXMLDoc(filename)
    {
    if (window.ActiveXObject)
      {
      xhttp = new ActiveXObject("Msxml2.XMLHTTP");
      }
    else
      {
      xhttp = new XMLHttpRequest();
      }
    xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
        return xhttp.responseXML;
        }
    };
    xhttp.open("GET", filename);
    try {xhttp.responseType = "msxml-document"} catch(err) {} // Helping IE11
    xhttp.send("");
    }

    function displayResult()
    {
    xsl = loadXMLDoc("cdcatalog.xsl");
    xml = loadXMLDoc("cdcatalog.xml");
    // code for IE
    if (window.ActiveXObject || xhttp.responseType == "msxml-document")
      {
      ex = xml.transformNode(xsl);
      document.getElementById("dataTable").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("dataTable").appendChild(resultDocument);
      }
    }   
</script>
</head>
<body onload="displayResult()">
<div id="dataTable" />
</body>

谢谢你的帮助！

Answer 1

以下是两个异步请求的示例，其中一个事件处理程序的回调启动下一个回调进行转换的请求。为了简单起见，我使用了onload而不是onreadystatechange，如果你真的需要支持旧的IE版本，你需要调整代码。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>XMLHttpRequest and onload handler with asynchronous requests</title>
<script>
function load(url, callback) {
  var req = new XMLHttpRequest();
  req.open('GET', url);
  // to allow us doing XSLT in IE
  try { req.responseType = "msxml-document" } catch (ex) {}
  req.onload = function() {
    callback(req.responseXML);
  };
  req.send();
}

function transform(xml, xsl) {
  load(
    xml,
    function(inputXml) {
      load(
        xsl,
        function(xsltSheet) {
          displayResult(inputXml, xsltSheet);
        }
      );
    }
  );
}

function displayResult(xmlInput, xsltSheet) {
  if (typeof XSLTProcessor !== 'undefined') {
    var proc = new XSLTProcessor();
    proc.importStylesheet(xsltSheet);
    document.getElementById('example').appendChild(proc.transformToFragment(xmlInput, document));
  }
  else if (typeof xmlInput.transformNode !== 'undefined') {
    document.getElementById("example").innerHTML = xmlInput.transformNode(xsltSheet);
  }
}
</script>
</head>
  <body onload="transform('catalog.xml', 'catalog.xsl')">
<div id="example"></div>
</body>
</html>

在线http://home.arcor.de/martin.honnen/xslt/test2015072001.html，适用于Windows 8.1上当前版本的IE，Firefox和Chrome。

如果你想直接启动两个异步请求来加载XML和XSLT，那么你需要做更多的工作来确保你知道何时加载这两个文件来处理它们，例如{{3} }：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>XMLHttpRequest and onload handler with asynchronous requests</title>
<script>
function makeRequest(url, loadedData, property, elementToAddResult) {
  var req = new XMLHttpRequest();
  req.open('GET', url);
  // to allow us doing XSLT in IE
  try { req.responseType = "msxml-document" } catch (ex) {}
  req.onload = function() {
    loadedData[property] = req.responseXML;
    if (checkLoaded(loadedData)) {
      displayResult(loadedData.xmlInput, loadedData.xsltSheet, elementToAddResult);
    };
  };
  req.send();
}  

function checkLoaded(loadedData) {
  return loadedData.xmlInput != null && loadedData.xsltSheet != null;
}

function loadAndTransform(xml, xsl, elementToAddResult) {
  var loadedData = { xmlInput: null, xsltSheet: null };

  makeRequest(xml, loadedData, 'xmlInput', elementToAddResult);
  makeRequest(xsl, loadedData, 'xsltSheet', elementToAddResult);
}  

function displayResult(xmlInput, xsltSheet, elementToAddResult) {
  if (typeof XSLTProcessor !== 'undefined') {
    var proc = new XSLTProcessor();
    proc.importStylesheet(xsltSheet);
    elementToAddResult.appendChild(proc.transformToFragment(xmlInput, document));
  }
  else if (typeof xmlInput.transformNode !== 'undefined') {
    elementToAddResult.innerHTML = xmlInput.transformNode(xsltSheet);
  }
}
</script>
</head>
  <body onload="loadAndTransform('catalog.xml', 'catalog.xsl', document.getElementById('example'));">
<div id="example"></div>
</body>
</html>

未捕获的TypeError：无法执行＆＃39; importStylesheet＆＃39; on＆＃39; XSLTProcessor＆＃39;：参数1的类型不是＆＃39; Node＆＃39;

1 个答案: