javascript - 使用 Ajax-XML (Javascript) 显示多个排序表

Question

我得到了一个 XML 文件和 7 个 XSL 文件，并且必须使用 Ajax 来显示基于每个 7 个按钮的 XSL 格式的样式的表格。

这是我的 XML 文件（短版）：

<CountryList>
  <CountryRecord>
    <name>Afghanistan</name>
    <alpha-2>AF</alpha-2>
    <alpha-3>AFG</alpha-3>
    <country-code>4</country-code>
    <iso_3166-2>ISO 3166-2:AF</iso_3166-2>
    <region>Asia</region>
    <sub-region>Southern Asia</sub-region>
    <intermediate-region></intermediate-region>
    <region-code>142</region-code>
    <sub-region-code>34</sub-region-code>
    <intermediate-region-code></intermediate-region-code>
    <capital-city>Kabul</capital-city>
    <currency>Afghani</currency>
    <currency-code>AFA</currency-code>
    <population>26813057</population>
  </CountryRecord>
  <CountryRecord>
    <name>Australia</name>
    <alpha-2>AU</alpha-2>
    <alpha-3>AUS</alpha-3>
    <country-code>36</country-code>
    <iso_3166-2>ISO 3166-2:AU</iso_3166-2>
    <region>Oceania</region>
    <sub-region>Australia and New Zealand</sub-region>
    <intermediate-region></intermediate-region>
    <region-code>9</region-code>
    <sub-region-code>53</sub-region-code>
    <intermediate-region-code></intermediate-region-code>
    <capital-city>Canberra</capital-city>
    <currency>Australian dollar</currency>
    <currency-code>AUD</currency-code>
    <population>19357594</population>
  </CountryRecord>
</CountryList>

这就是我的 HTML 的样子：

我当前的 Javascript：

<h1>IGOR Country Data(AJAX-HTML) Prototype </h1>
<hr />
<h2>Retrieving Country Data ...</h2>

<button onClick="makeAjaxQuery()">
Region Info I (Format: region-fmt-1.xsl
</button>
<br><br>
<button onClick="makeAjaxQuery()">
Region Info II (Format: region-fmt-2.xsl
</button>
<br><br>
<button onClick="makeAjaxQuery()">
Country Info I (Format: country-fmt-1.xsl
</button>
<br><br>
<button onClick="makeAjaxQuery()">
Country Info II (Format: country-fmt-2.xsl
</button>
<br><br>
<button onClick="makeAjaxQuery()">
Population Info I (Format: population-fmt-1.xsl
</button>
<br><br>
<button onClick="makeAjaxQuery()">
Population Info II (Format: population-fmt-2.xsl
</button>
<br><br>
<hr / >
<h2>Displaying Country Data ... </h2>
<p id = 'display'></p>

<script>
function makeAjaxQuery()
{
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() 
    {
        readyStateChangeHandler(xhttp);
    };

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

function readyStateChangeHandler(xhttp)
{
    if (xhttp.readyState == 4)
    {
        if(xhttp.status == 200)
        {
            handleStatusSuccess(xhttp);
        }
            else
            {
                handleStatusFailure(xhttp);
            }
    }
}
function handleStatusFailure(xhttp)
{
  var displayDiv = document.getElementById("display");
  displayDiv.innerHTML = "XMLHttpRequest failed: status " + xhttp.status;
}

function handleStatusSuccess(xhttp)
{

  var xml = xhttp.responseXML;
  var countryObj = parseXMLCountry(xml);
  displayCountry(countryObj);
}

function parseXMLCountry(xml)
{
    var countryObj = {};

    var countryListElement = xml.getElementsByTagName("CountryList")[0];

    var countryRecordElement = countryListElement.getElementsByTagName("CountryRecord");
    countryObj.countryRecord = parseCountryRecordElement(countryRecordElement);

    return countryObj;
}
function parseCountryRecordElement(countryRecordElement)
{
    var countryRecord = [];

    for(var i=0; i < countryRecordElement.length; i++)
    {
        var countryElement = countryRecordElement[i];
        var countryElementObj = parseCountryElement(countryElement);
        countryRecord.push(countryElementObj);
    }
    return countryRecord;
}

function parseCountryElement(countryElement)
{
    var countryElementObj = {};

    var nameElement = countryElement.getElementsByTagName("name")[0];
    countryElementObj.name = nameElement.textContent;

    var alpha2Element = countryElement.getElementsByTagName("alpha-2")[0];
    countryElementObj.alpha2 = alpha2Element.textContent;

    var alpha3Element = countryElement.getElementsByTagName("alpha-3")[0];
    countryElementObj.alpha3 = alpha3Element.textContent;

    var countrycElement = countryElement.getElementsByTagName("country-code")[0];
    countryElementObj.countryc = Number(countrycElement.textContent);

    var isoElement = countryElement.getElementsByTagName("iso_3166-2")[0];
    countryElementObj.iso = isoElement.textContent;

    var regionElement = countryElement.getElementsByTagName("region")[0];
    countryElementObj.region = regionElement.textContent;

    var srElement = countryElement.getElementsByTagName("sub-region")[0];
    countryElementObj.sr = srElement.textContent;

    var irElement = countryElement.getElementsByTagName("intermediate-region")[0];
    countryElementObj.ir = irElement.textContent;

    var rcElement = countryElement.getElementsByTagName("region-code")[0];
    countryElementObj.rc = Number(rcElement.textContent);

    var srcElement = countryElement.getElementsByTagName("sub-region-code")[0];
    countryElementObj.src = Number(srcElement.textContent);

    var ircElement = countryElement.getElementsByTagName("intermediate-region-code")[0];
    countryElementObj.irc = Number(ircElement.textContent);

    var capitalElement = countryElement.getElementsByTagName("capital-city")[0];
    countryElementObj.capital = capitalElement.textContent;

    var currencyElement = countryElement.getElementsByTagName("currency")[0];
    countryElementObj.currency = currencyElement.textContent;

    var currencycElement = countryElement.getElementsByTagName("currency-code")[0];
    countryElementObj.currencyc = Number(currencycElement.textContent);

    var popElement = countryElement.getElementsByTagName("population")[0];
    countryElementObj.pop = Number(popElement.textContent);

    return countryElementObj;
}

function displayCountry(countryObj)
{ 
    var html = "";
    html += "<table border='1'>";
    html += "<tr><th>Ctry-Code</th><th>Name</th><th>Alpha-2</th><th>Alpha-3</th><th>Capital-City</th></tr>";

    for (var i=0;i<countryObj.countryRecord.length; i++)
    {
        var countryElementObj = countryObj.countryRecord[i];

        html += "<tr>";
        html += "<td style='text-align:center'>" + countryElementObj.countryc + "</td>";
        html += "<td>" + countryElementObj.name + "</td>";
        html += "<td style='text-align:center'>" + countryElementObj.alpha2 + "</td>";
        html += "<td style='text-align:center'>" + countryElementObj.alpha3 + "</td>";
        html += "<td>" + countryElementObj.capital + "</td>";
    }
    var displayDiv = document.getElementById("display");
    displayDiv.innerHTML = html;
}

我当前的 HTML 页面：

如您所见，我能够以适当的格式输出第一个按钮。但是，我不知道单击按钮时如何显示其他表格（具有适当的格式）。我确实去网上搜索类似的问题，但无济于事。请帮助我！

标签： javascriptajaxxml