Trouble running AJAX

Question

I'm doing homework and must use javascript object and array in my ajax. I'm sure there is something wrong in the code, but as I have very limited knowledge I just can't find it. I'm just currently learning this and a few bits and pieces were followed through examples I could find online.

XML

    <?xml version="1.0" encoding="UTF-8" ?> 
<onlineOrder month="03/2015">
  <product>
    <code>CRA01</code>
    <unitPrice>10.50</unitPrice>
    <lastMonth>101</lastMonth>
    <thisMonth>120</thisMonth> 
  </product>
  <product>
    <code>CRA02</code>
    <unitPrice>21.30</unitPrice>
    <lastMonth>50</lastMonth>
    <thisMonth>43</thisMonth> 
  </product>
  <product>
    <code>HOB11</code>
    <unitPrice>8.50</unitPrice>
    <lastMonth>201</lastMonth>
    <thisMonth>312</thisMonth> 
  </product>
  <product>
    <code>HOB13</code>
    <unitPrice>43.50</unitPrice>
    <lastMonth>20</lastMonth>
    <thisMonth>21</thisMonth> 
  </product>
  <product>
    <code>JEW21</code>
    <unitPrice>200.00</unitPrice>
    <lastMonth>7</lastMonth>
    <thisMonth>11</thisMonth> 
  </product>
  <product>
    <code>JEW22</code>
    <unitPrice>450.00</unitPrice>
    <lastMonth>10</lastMonth>
    <thisMonth>4</thisMonth> 
  </product>
  <product>
    <code>GAM41</code>
    <unitPrice>20.30</unitPrice>
    <lastMonth>420</lastMonth>
    <thisMonth>450</thisMonth> 
  </product>
  <product>
    <code>GAM42</code>
    <unitPrice>45.50</unitPrice>
    <lastMonth>361</lastMonth>
    <thisMonth>180</thisMonth> 
  </product>
</onlineOrder>

HTML - The part with the table is something I can work out pretty easily myself. The problem is that I am only displaying the button, and when pressed it is not displaying anything. I do not use jQuery and never have, so sorry if this is a pain to deal with.

  <script>
    function getOnlineOrderAjax() {
      var xhttp = new XMLHttpRequest();
          xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            processResult(xhttp);
        }
      };

    xhttp.open("GET", "A8.xml", true);
    xhttp.send();
    }


    function processResult(xhttp) {
      var xml = xhttp.responseXML;
      var onlineOrderObj = parseXML(xml);

    console.log(onlineOrderObj);
    display(onlineOrderObj);
    }


    function parseXML(xml) {
      var onlineOrderObj = {}; //hold information
      var onlineOrderElement = xml.getElementsByTagName("onlineOrder")[0];
          onlineOrderObj.month = onlineOrderElement.getAttribute("month");
          onlineOrderObj.productList = []; //create array

      var productElements = onlineOrderElement.getElementsByTagName("product"); 
        for(var i = 0; i < productElements.length; i++) {
            var product = {}; //create index object

                product.code = productElements[i].getElementsByTagName("code")[0].childNodes[0].nodeValue;
                product.unitPrice = Number(indexElements[i].getElementsByTagName("unitPrice")[0].childNodes[0].nodeValue);
                product.lastMonth = Number(indexElements[i].getElementsByTagName("lastMonth")[0].childNodes[0].nodeValue);
                product.thisMonth = Number(indexElements[i].getElementsByTagName("thisMonth")[0].childNodes[0].nodeValue);

            onlineOrderObj.productList.push(product); //object into array
        }
      return onlineOrderObj;
    }


    function display(onlineOrderObj){
        var change = 0;

        var html = "<h1>Online order statistics for " + onlineOrderObj.month + "</h1>";
            html += "<table border='1'>";
            html += "<tr><th>Code</th><th>Unit Price</th><th>Last Month </th><th>This Month</th></tr>";
        for(var i=0; i < onlineOrderObj.productList.length; i++) { 
            html += "<tr>";
            html += "<td align='center'><b>" + onlineOrderObj.productList[i].code + "</b></td>";
            html += "<td align='right'>" + onlineOrderObj.productList[i].unitPrice + "</td>"; 
            html += "<td align='right'>" + onlineOrderObj.productList[i].lastMonth + "</td>";
            html += "<td align='right'>" + onlineOrderObj.productList[i].thisMonth + "</td>";   
            html += "</tr>"; 
        }
        html += "</table>"; 

        var onlineOrderDiv = document.getElementById("onlineOrderDiv");
            onlineOrderDiv.innerHTML = html;
    }
   </script>
</head>
 <body>
   <button onClick="getOnlineOrderAjax()">
   Click here to view online order statistics
   </button>
   <br /><br />
   <div id="onlineOrderDiv" />

</body>
</html>

Answer 1

我认为在大多数情况下你做得对，虽然我不明白你为什么要使用AJAX。

你在parseXML函数中犯了错误。它应该是productElements而不是indexElements：

logo

此外，您应该始终使用div的结束标记。

您可以查看此plunker