使用AJAX显示XML文件的内容

问题描述：

我们的教授并没有花太多时间来解释AJAX，并希望我们将XML文件的内容显示到我们创建的网站上的可滚动文本区域。这是我迄今为止所做的，但没有显示在div区域，我正在尝试加载XML fie ...任何建议将不胜感激。使用AJAX显示XML文件的内容

<!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 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>

基于表格的布局？呸。 –

我建议切换到jQuery AJAX，以获得更简单的方法和跨浏览器友好的网站。 – Thew

你能举一个最简单的例子吗？理想情况下，只需JavaScript和html元素是nessecary。 – ggovan

答

从这个页面查看教程中的XML文件：http://coursesweb.net/ajax/ajax-xml，它说明了如何从在JavaScript/AJAX XML中获取数据。

答

使用jQuery AJAX你可以设置dataType到XML，简单地分析它

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

使用AJAX显示XML文件的内容

相关推荐