有效的 XML 数据，但在 XMLHttpRequest 响应的 responseXML 属性中为 null

Question

URL 返回 XML 数据，但 XMLHttpRequest 响应中的 responseXML 属性为空。如何获取响应中的 XML 数据？

document.body.onload = loadXMLDoc();

function loadXMLDoc() {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this);
    }
  };
  xmlhttp.open("GET", "https://start.vag.de/dm/api/v1/haltestellen/VAG/location?lon=11.06464944&lat=49.4484825&radius=450", true);
  xmlhttp.send();
}

function myFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var table = "";
  var x = xmlDoc.getElementsByTagName("Haltestellen");

  for (i = 0; i < x.length; i++) {

    table += "<tr><td>" + x[i].getElementsByTagName("Haltestellenname")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("VGNKennung")[0].childNodes[0].nodeValue + "</td></tr>";

  }
  document.querySelector("#fahrten-tabelle > tbody").innerHTML = table;
}

#fahrten-tabelle {
  padding-bottom: 15px;
  padding-top: 5px;
  background-color: white;
  position: sticky;
  top: 49px;
  width:100%;
}
#fahrten-tabelle th {text-align:left;}

<table id="fahrten-tabelle">
  <thead>
    <tr>
      <th>Fahrzgnr.</th>
      <th>Linie</th>
      <th>Start</th>
      <th>Startzeit</th>
      <th>Ziel</th>
      <th>Endzeit</th>
      <th>Verlauf</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

Answer 1

默认情况下，该 API 从 ajax 请求返回 json。我知道它看起来总是返回 XML，但您可以在调用 myFunction() 之前检查返回文本并查看。尝试将格式设置为 xml：

xmlhttp.open("GET", "https://start.vag.de/dm/api/v1/haltestellen/VAG/location?lon=11.06464944&lat=49.4484825&radius=450&format=xml", true);

当我测试适合我的代码时。

此外，您可能希望最终验证您对返回的 xml 的一些假设。只是使用

x[i].getElementsByTagName("Haltestellenname")[0].childNodes[0].nodeValue

在我看来相当脆弱。

function loadXMLDoc() {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.open("GET", "https://start.vag.de/dm/api/v1/haltestellen/VAG/location?lon=11.06464944&lat=49.4484825&radius=450&format=xml", true);
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) { myFunction(this); }
    };

    xmlhttp.send();
}

function myFunction(xml) {
    var i;
    var xmlDoc = xml.responseXML;
    var table="<tr style='padding-bottom:5px;padding-top:5px;background-color:white;position:sticky;top:49px'><th style='text-align:left'>Fahrzgnr.</th><th style='text-align:left'>Linie</th><th style='text-align:left'>Start</th><th style='text-align:left'>Startzeit</th><th style='text-align:left'>Ziel</th><th style='text-align:left'>Endzeit</th><th style='text-align:left'>Verlauf</th></tr>";
    var x = xmlDoc.getElementsByTagName("Haltestellen");
    for (i = 0; i <x.length; i++) {
        var Haltestellenname = x[i].getElementsByTagName("Haltestellenname")[0].childNodes[0].nodeValue;
        var VGNKennung = x[i].getElementsByTagName("VGNKennung")[0].childNodes[0].nodeValue
        table += "<tr><td>" + Haltestellenname + "</td><td>" + VGNKennung + "</td></tr>";
    }
    document.getElementById("fahrten-tabelle").innerHTML = table;
}


loadXMLDoc();

<table style="width:100%" id="fahrten-tabelle"></table>

Answer 2

xml.responseXML 属性（xml 的类型为 XMLHttpRequest）为空，因为未设置 application/xml 请求标头。您需要读取response 属性，或者使用setRequestHeader() 函数设置有效的请求标头。

XMLHttpRequest 方法 setRequestHeader() 设置 HTTP 的值 请求标头。使用setRequestHeader()时，必须在调用后 调用 open()，但在调用 send() 之前。如果调用此方法 多次使用相同的标题，值合并为一个 单个请求标头。

在第一次调用之后，每次调用 setRequestHeader() 它，指定的文本被附加到现有标题的末尾 内容。

如果没有使用此设置 Accept 标头，则带有 type "/" 在调用 send() 时随请求一起发送。

document.body.onload = loadXMLDoc();

function loadXMLDoc() {
  var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this);
    }
  };
  xmlhttp.open("GET", "https://start.vag.de/dm/api/v1/haltestellen/VAG/location?lon=11.06464944&lat=49.4484825&radius=450", true);
  xmlhttp.setRequestHeader('Accept', 'application/xml');
  xmlhttp.send();
}

function myFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var table = "";
  var x = xmlDoc.getElementsByTagName("Haltestellen");

  for (i = 0; i < x.length; i++) {

    table += "<tr><td>" + x[i].getElementsByTagName("Haltestellenname")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("VGNKennung")[0].childNodes[0].nodeValue + "</td></tr>";

  }
  document.querySelector("#fahrten-tabelle > tbody").innerHTML = table;
}

#fahrten-tabelle {
  padding-bottom: 15px;
  padding-top: 5px;
  background-color: white;
  position: sticky;
  top: 49px;
  width:100%;
}
#fahrten-tabelle th {text-align:left;}

<table id="fahrten-tabelle">
  <thead>
    <tr>
      <th>Fahrzgnr.</th>
      <th>Linie</th>
      <th>Start</th>
      <th>Startzeit</th>
      <th>Ziel</th>
      <th>Endzeit</th>
      <th>Verlauf</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>