Допустимые данные XML, но нуль в свойстве responseXML в ответе XMLHttpRequest

Question

URL возвращает данные XML, но свойство responseXML в ответе XMLHttpRequest пусто. Как я могу получить данные 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

Свойство xml.responseXML (xml имеет тип XMLHttpRequest) было пустым, поскольку заголовок запроса application/xml не был установлен. Вам нужно либо прочитать свойство response, либо установить действительный заголовок запроса с помощью функции setRequestHeader () .

Метод XMLHttpRequest setRequestHeader () устанавливает значение HTTP заголовок запроса. При использовании setRequestHeader () , вы должны вызывать его после вызов open () , но перед вызовом send () . Если этот метод называется несколько раз с одним и тем же заголовком, значения объединяются в один заголовок одного запроса.

Каждый раз, когда вы звоните 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>

Answer 2

Этот API возвращает json по умолчанию из запроса ajax. Я знаю, похоже, он всегда возвращает 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>