如何编写AJAX调用获取XML文件并实现航班信息展示功能？

Hey there! No worries at all—we all start somewhere, and your code is already off to a solid foundation. Let's fix up those issues so your flight info loads and displays correctly.

Key Issues in Your Original Code #

• You’re trying to select elements with the tag name CD, but your XML doesn’t contain any <CD> elements—your flight data lives inside a <flightInfo> tag instead.
• Your table header only includes "Depart" and "Arrive", but you’re adding a "Date" column in the body, which makes the table misaligned.
• You’re only showing a small subset of the flight details; we can expand this to display all the info from your XML for completeness.

Corrected XML File (Question1.xml) #

First, let’s clean up your XML—duplicate XML declarations aren’t allowed, so we’ll remove the extra one at the end:

<?xml version="1.0" encoding="UTF-8"?>
<flightInfo>
  <Date>02OCT19</Date>
  <Flight>VA 1429</Flight>
  <Depart>Sydney</Depart>
  <Arrive>Cairns</Arrive>
  <Boarding>Gate 35 At 1855</Boarding>
  <Carrier>Virgin Australia</Carrier>
</flightInfo>

Corrected HTML Code #

Here’s the fixed HTML with explanations of the changes:

<html>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 8px;
  text-align: left;
}
</style>
<body>
<button type="button" onclick="loadDoc()">Get flight information</button>
<br><br>
<table id="demo"></table>

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this);
    }
  };
  xhttp.open("GET", "Question1.xml", true);
  xhttp.send();
}

function myFunction(xml) {
  var xmlDoc = xml.responseXML;
  // Grab the single flightInfo element from your XML
  var flight = xmlDoc.getElementsByTagName("flightInfo")[0];
  
  // Build a complete table with all flight details
  var table = `
    <tr>
      <th>Date</th>
      <th>Flight Number</th>
      <th>Departure</th>
      <th>Arrival</th>
      <th>Boarding Info</th>
      <th>Carrier</th>
    </tr>
    <tr>
      <td>${getTextContent(flight, "Date")}</td>
      <td>${getTextContent(flight, "Flight")}</td>
      <td>${getTextContent(flight, "Depart")}</td>
      <td>${getTextContent(flight, "Arrive")}</td>
      <td>${getTextContent(flight, "Boarding")}</td>
      <td>${getTextContent(flight, "Carrier")}</td>
    </tr>
  `;
  
  document.getElementById("demo").innerHTML = table;
}

// Helper function to safely get text from XML elements (avoids errors if tags are missing)
function getTextContent(parent, tagName) {
  var element = parent.getElementsByTagName(tagName)[0];
  return element ? element.childNodes[0].nodeValue.trim() : "N/A";
}
</script>
</body>
</html>

What We Changed & Why #

1. Fixed XML Element Selection: Instead of searching for <CD> tags, we target the correct <flightInfo> tag (the root of your XML). Since there’s only one flight entry, we use [0] to grab it directly.
2. Aligned Table Structure: Updated the table header to include all fields we’re displaying, so columns match up perfectly.
3. Added a Safety Helper Function: The getTextContent function safely retrieves text from XML elements, trims extra whitespace (like the spaces around "VA 1429"), and returns "N/A" if a tag is missing—preventing unexpected errors.
4. Improved Readability: Tweaked the table styling a bit for better spacing and text alignment.

Give this a try, and you should see all your flight information neatly displayed in the table when you click the button. Happy coding!

内容的提问来源于stack exchange，提问作者user12062753