使用Ajax XML（Javascript）显示多个排序表_Javascript_Ajax_Xml

使用Ajax XML（Javascript）显示多个排序表

javascript ajax xml

使用Ajax XML（Javascript）显示多个排序表,javascript,ajax,xml,Javascript,Ajax,Xml,我得到了一个XML文件和7个XSL文件，必须使用Ajax来显示表格，表格的样式基于每个7个按钮的XSL格式这是我的XML文件（短版本）：阿富汗空军 AFG 4. ISO 3166-2:AF 亚洲南亚 142 34 喀布尔阿富汗人 AFA 26813057 澳大利亚金澳大利亚 36 ISO 3166-2:AU 大洋洲澳大利亚和新西兰 9 53 堪培拉澳元澳元 19357594 我的HTML应该是这样的：我当前的Javascript： <h1>IGOR Cou

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

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


阿富汗
空军
AFG
4.
ISO 3166-2:AF
亚洲
南亚
142
34
喀布尔
阿富汗人
AFA
26813057
澳大利亚
金
澳大利亚
36
ISO 3166-2:AU
大洋洲
澳大利亚和新西兰
9
53
堪培拉
澳元
澳元
19357594

我的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;
}

IGOR国家数据（AJAX-HTML）原型

正在检索国家数据。。。区域信息I（格式：Region-fmt-1.xsl

区域信息II（格式：Region-fmt-2.xsl

国家信息一（格式：Country-fmt-1.xsl）

国家信息II（格式：Country-fmt-2.xsl

人口信息一（格式：人口-fmt-1.xsl）

人口信息II（格式：Population-fmt-2.xsl

正在显示国家数据。。。

函数makeAjaxQuery（） { var xhttp=newXMLHttpRequest（）； xhttp.onreadystatechange=函数（） { readyStateChangeHandler（xhttp）； }; xhttp.open（“GET”，“A3_CtryData_dtd_sample.xml”，true）； xhttp.send（）； } 函数readyStateChangeHandler（xhttp） { if（xhttp.readyState==4） { 如果（xhttp.status==200） { 手持状态成功（xhttp）； } 其他的 { 手柄状态故障（xhttp）； } } } 功能手柄状态故障（xhttp） { var displayDiv=document.getElementById（“显示”）； displayDiv.innerHTML=“XMLHttpRequest失败：状态”+xhttp.status； } 函数handleStatusSuccess（xhttp） { var xml=xhttp.responseXML； var countryObj=parseXMLCountry（xml）；显示国家（countryObj）； } 函数parseXMLCountry（xml） { var countryObj={}； var countryListElement=xml.getElementsByTagName（“CountryList”）[0]； var countryRecordElement=countryListElement.getElementsByTagName（“CountryRecord”）； countryObj.countryRecord=parseCountryRecordElement（countryRecordElement）；返回countryObj； } 函数parseCountryRecordElement（countryRecordElement） { var countryRecord=[]；对于（var i=0；i

<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;
}