javascript - 不存在的 XML 节点破坏了我的脚本

Question

某些 XML 节点并不总是出现在 XML 提要中，例如门和状态，导致我的代码中断。这是我的代码:

$( document ).ready(function() {
    $('#load_btn').click(function() {
        loadXMLDoc();
    });
});  

function loadXMLDoc() {

    $.ajax({
        url: "proxy.php",
        type: "POST",
        dataType: "xml",
        data: {
            address: "http://flydata.avinor.no/XmlFeed.asp?TimeFrom=1&TimeTo=7&airport=OSL&direction=D&lastUpdate=2016-04-12T15:03:00Z"
        },

    })

    .done(function (xml) {

        var flightXML = $(xml).find('flight');
        //console.log(flightXML);
        var output = "<table>";
        output += "<tr><th>Departue</th><th>Flight</th><th>To</th><th>Airline</th><th>Gate</th></tr>"
        for(i=0; i < flightXML.length; i++)
            {

                var line = "<tr>";
                var timeElement = flightXML[i].getElementsByTagName("schedule_time");
                var time = timeElement[0].firstChild.nodeValue;
                var idElement = flightXML[i].getElementsByTagName("flight_id");
                var id = idElement[0].firstChild.nodeValue;
                var toElement = flightXML[i].getElementsByTagName("airport");
                var to = toElement[0].firstChild.nodeValue;
                var airlineElement = flightXML[i].getElementsByTagName("airline");
                var airline = airlineElement[0].firstChild.nodeValue;
                var gateElement = flightXML[i].getElementsByTagName("gate");
                var gate = gateElement[0].firstChild.nodeValue;
                //var statusElement = flightXML[i].getElementsByTagName("status");
                //var status = statusElement[0].firstChild.nodeValue;  

                line += "<td>" + time + "</td><td>" + id + "</td><td>" + to + "</td><td>" + airline + "</td><td>" + gate + "</td>";
                line += "</tr>";
                output += line;
            }
        output += "</table>";
        document.getElementById("result").innerHTML = output;


    });
}

这是 XML 结构:

<flight uniqueID="5819145">
  <airline>SK</airline>
  <flight_id>SK815</flight_id>
  <dom_int>I</dom_int>
  <schedule_time>2016-04-12T18:15:00Z</schedule_time>
  <arr_dep>D</arr_dep>
  <airport>LHR</airport>
  <check_in>7 8</check_in>
  <gate>F19</gate>
</flight>
<flight uniqueID="5818372">
  <airline>EW</airline>
  <flight_id>EW4197</flight_id>
  <dom_int>S</dom_int>
  <schedule_time>2016-04-12T18:15:00Z</schedule_time>
  <arr_dep>D</arr_dep>
  <airport>HAM</airport>
  <check_in>7</check_in>
  <status code="C"></status>
</flight>
<flight uniqueID="5818645">
  <airline>SK</airline>
  <flight_id>SK291</flight_id>
  <dom_int>D</dom_int>
  <schedule_time>2016-04-12T18:15:00Z</schedule_time>
  <arr_dep>D</arr_dep>
  <airport>BGO</airport>
  <check_in>7 8</check_in>
  <gate>A4</gate>
</flight>

如何检查这些节点是否存在，如果不存在，则插入一个空格(或使我的代码不被破坏所需的任何内容)？

Answer 1

您应该更好地分离您的担忧。抵制住编写一个可以完成所有事情的函数的诱惑。

第一个关注点:请求代理

让我们将代理请求的管道抽象为一个函数，并包含可以作为对象传递的 URL 参数。

function proxy(url, params) {
    if (!params || typeof params !== "object") params = {};
    return $.ajax({
        type: "post",
        url: "proxy.php",
        data: {address: url + "?" + $.param(params)}
    });
}

请记住将 proxy.php 中的 Content-Type header 设置为目标页面的内容类型。

第二个问题:从远程 API 获取数据

我们需要一组航类，其中每个航类都有属性schedule_time、flight_id、airport、airline、gate。

最重要的是，我们希望以结构化方式传递查询参数(TimeFrom、TimeTo、airport、direction、lastUpdate)。

function getFlights(params) {
    return proxy("http://flydata.avinor.no/XmlFeed.asp", params).then(function (xml) {
        return $(xml).find('flight').map(function () {
            var $flight = $(this);
            return {
                schedule_time: $flight.find("schedule_time").text(),
                flight_id: $flight.find("flight_id").text(),
                airport: $flight.find("airport").text(),
                airline: $flight.find("airline").text(),
                gate: $flight.find("gate").text()
            };
        }).toArray();
    });
}

使用 .then() 允许我们确定 Ajax 请求的总体结果，在我们的例子中，它将不再是 XML，而是统一对象的数组(无论是否缺少某些元素)在 XML 中)。

第三个问题:渲染

我们想要将一组航类转换为一个表。我会推荐handlebars.js用于 HTML 生成，但我们也可以使用 jQuery 手动完成:

function renderFlights(flights) {
    var $table = $("<table>");
    $table.append("<tr><th>Departue</th><th>Flight</th><th>To</th><th>Airline</th><th>Gate</th></tr>");
    $.each(flights, function (i, flight) {
        var $tr = $("<tr>").appendTo($table);
        $("<td>", {text: flight.schedule_time }).appendTo($tr);
        $("<td>", {text: flight.flight_id }).appendTo($tr);
        $("<td>", {text: flight.airport }).appendTo($tr);
        $("<td>", {text: flight.airline }).appendTo($tr);
        $("<td>", {text: flight.gate }).appendTo($tr);
    });
    return $table;
}

以这种方式构建 HTML 比连接字符串更安全。它可以保护您免受跨站点脚本攻击以及​​由于文本中意外的特殊字符而导致的随机破坏。

第四个问题:用户界面接线

现在我们可以很容易地绑定(bind)按钮点击，如下所示:

$(function() {
    $('#load_btn').click(function () {
        getFlights({
            TimeFrom: 1,
            TimeTo: 7,
            airport: "OSL",
            direction: "D",
            lastUpdate: "2016-04-12T15:03:00Z"
        }).done(function (flights) {
            var $table = renderFlights(flights);
            $("#result").empty().append($table);
        });
    });
});