Question

我们的教授并没有花太多时间来解释AJAX，并希望我们将XML文件的内容显示在我们创建的网站上的可滚动文本区域中。这是我到目前为止所做的，但是我正在尝试加载XML文件的div区域中没有任何内容出现......任何建议都会非常感激。

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" />
<script type="text/javascript">
    var xmlDoc;
    function loadFunction() {
        xmlDoc = new ActiveXObject("Microsoft.XMLDOM");

        xmlDoc.async = false;
        xmlDoc.onreadystatechange = loadXML;

        xmlDoc.load("PartialRates.xml");
    }

    function loadXML() {
        if (xmlDoc.readyState == 4) {

            var item = xmlDoc.getElementsByTagName("item");

            //use the 'item' to populate the HTML tags.   

        }
    }
</script>
</head>
<body>
<img src="banner.png" id="worldwidebanner" />
    <form id="login" class="login">
        <input type="text" name="email" />
        <div class="divider"></div>
        <input type="text" name="password" />
        <div class="divider"></div>
        <button type="button">Login</button>
        <div class="divider"></div>
        <a href="">Forgot My Password</a>
        <div class="divider"></div>
        <a href="">Create New Account</a>
    </form>
    <table>
        <tr style="background-color: #404040">
            <td width="103px" style="border: 1px solid #8ad0f2;">Home</td>
            <td width="103px" style="border: 1px solid #8ad0f2">How to Call</td>
            <td width="103px" style="border: 1px solid #8ad0f2">Buy Credit</td>
            <td width="103px" style="border: 1px solid #8ad0f2">Rates</td>
            <td width="103px" style="border: 1px solid #8ad0f2">Help Center</td>
            <td width="103px" style="border: 1px solid #8ad0f2">Contact Us</td>
        </tr>
        <tr style="background-color: #BFBFBF">
            <td colspan="2">Our Promise</td>
            <td colspan="2">Calling Rates</td>
            <td colspan="2">How It Works</td>
        </tr>
        <tr style="background-color: #736108">
            <td colspan="2">+ No Hidden Charges<br />
                + PINLess Dialing<br />
                + Balance Never Expires<br />
                + Munite Rounding<br />
                + 100% Quality Guarantee<br />
            </td>
            <td colspan="2"><div style="height: 75px" >
                <script language="javascript" type="text/javascript">loadXML;</script>
                            </div>
            <br />Click Here for More Rates</td>
            <td colspan="2"><p>+ Sign Up<br />
                            + Buy credit and pay with any major
                            credit, debit card or PayPal<br />
                            + Dial the access number and call your 
                              destination.<br /></p>                                
            </td>
        </tr>
        <tr>
            <td></td>
            <td colspan="2"><a href="privacy.html">Privacy Policy</a></td>
            <td colspan="2"><a href="terms.html">Terms and Conditions</a></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

这是我们应该显示的XML文件

<?xml version="1.0" encoding="utf-8" ?>
<PartialRates>
<partialRates rate1="Argentina 1.6 cents" rate2="Brazil 2.4 cents" rate3="China 2.8     cents" rate4="India 3.5 cents" rate5="Russia 2.3 cents"></partialRates>
</PartialRates>

Answer 1

请参阅本页的教程： http://coursesweb.net/ajax/ajax-xml ，它解释了如何从JavaScript / Ajax中的XML获取数据。

Answer 2

使用jQuery AJAX，您可以将dataType设置为XML并轻松解析

$(xml).find('partialrates').text();

See the related jQuery webpage或view an example using jQuery AJAX with XML here 。

使用AJAX显示XML文件的内容

2 个答案: