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

对我来说看起来很脆弱。

＆＃13;

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();

＆＃13;

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

＆＃13;

Answer 2

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

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

每次拨打电话后，每次拨打 setRequestHeader（）   它，指定的文本被附加到现有标题的末尾   内容。

如果没有使用此设置Accept标头，则使用带有的Accept标头   当 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>

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

2 个答案: