Ajax 显示XML

显示效果如图：

先建立xml文件sa.xml

<?xml version="1.0" encoding="ISO-8859-1" ?> 
- <!--  Edited with XML Spy v2007 (http://www.altova.com) 
  --> 
- <CATALOG>
- <CD>
  <TITLE>Empire Burlesque</TITLE> 
  <ARTIST>Bob Dylan</ARTIST> 
  <COUNTRY>USA</COUNTRY> 
  <COMPANY>Columbia</COMPANY> 
  <PRICE>10.90</PRICE> 
  <YEAR>1985</YEAR> 
  </CD>
- <CD>
  <TITLE>Hide your heart</TITLE> 
  <ARTIST>Bonnie Tyler</ARTIST> 
  <COUNTRY>UK</COUNTRY> 
  <COMPANY>CBS Records</COMPANY> 
  <PRICE>9.90</PRICE> 
  <YEAR>1988</YEAR> 
  </CD>
- <CD>
  <TITLE>Greatest Hits</TITLE> 
  <ARTIST>Dolly Parton</ARTIST> 
  <COUNTRY>USA</COUNTRY> 
  <COMPANY>RCA</COMPANY> 
  <PRICE>9.90</PRICE> 
  <YEAR>1982</YEAR> 
  </CD>
- <CD>
  <TITLE>Still got the blues</TITLE> 
  <ARTIST>Gary Moore</ARTIST> 
  <COUNTRY>UK</COUNTRY> 
  <COMPANY>Virgin records</COMPANY> 
  <PRICE>10.20</PRICE> 
  <YEAR>1990</YEAR> 
  </CD>
- <CD>
  <TITLE>Eros</TITLE> 
  <ARTIST>Eros Ramazzotti</ARTIST> 
  <COUNTRY>EU</COUNTRY> 
  <COMPANY>BMG</COMPANY> 
  <PRICE>9.90</PRICE> 
  <YEAR>1997</YEAR> 
  </CD>
- <CD>
  <TITLE>One night only</TITLE> 
  <ARTIST>Bee Gees</ARTIST> 
  <COUNTRY>UK</COUNTRY> 
  <COMPANY>Polydor</COMPANY> 
  <PRICE>10.90</PRICE> 
  <YEAR>1998</YEAR> 
  </CD>
- <CD>
  <TITLE>Sylvias Mother</TITLE> 
  <ARTIST>Dr.Hook</ARTIST> 
  <COUNTRY>UK</COUNTRY> 
  <COMPANY>CBS</COMPANY> 
  <PRICE>8.10</PRICE> 
  <YEAR>1973</YEAR> 
  </CD>
- <CD>
  <TITLE>Maggie May</TITLE> 
  <ARTIST>Rod Stewart</ARTIST> 
  <COUNTRY>UK</COUNTRY> 
  <COMPANY>Pickwick</COMPANY> 
  <PRICE>8.50</PRICE> 
  <YEAR>1990</YEAR> 
  </CD>
- <CD>
  <TITLE>Romanza</TITLE> 
  <ARTIST>Andrea Bocelli</ARTIST> 
  <COUNTRY>EU</COUNTRY> 
  <COMPANY>Polydor</COMPANY> 
  <PRICE>10.80</PRICE> 
  <YEAR>1996</YEAR> 
  </CD>
- <CD>
  <TITLE>When a man loves a woman</TITLE> 
  <ARTIST>Percy Sledge</ARTIST> 
  <COUNTRY>USA</COUNTRY> 
  <COMPANY>Atlantic</COMPANY> 
  <PRICE>8.70</PRICE> 
  <YEAR>1987</YEAR> 
  </CD>
- <CD>
  <TITLE>Black angel</TITLE> 
  <ARTIST>Savage Rose</ARTIST> 
  <COUNTRY>EU</COUNTRY> 
  <COMPANY>Mega</COMPANY> 
  <PRICE>10.90</PRICE> 
  <YEAR>1995</YEAR> 
  </CD>
- <CD>
  <TITLE>1999 Grammy Nominees</TITLE> 
  <ARTIST>Many</ARTIST> 
  <COUNTRY>USA</COUNTRY> 
  <COMPANY>Grammy</COMPANY> 
  <PRICE>10.20</PRICE> 
  <YEAR>1999</YEAR> 
  </CD>
- <CD>
  <TITLE>For the good times</TITLE> 
  <ARTIST>Kenny Rogers</ARTIST> 
  <COUNTRY>UK</COUNTRY> 
  <COMPANY>Mucik Master</COMPANY> 
  <PRICE>8.70</PRICE> 
  <YEAR>1995</YEAR> 
  </CD>
- <CD>
  <TITLE>Big Willie style</TITLE> 
  <ARTIST>Will Smith</ARTIST> 
  <COUNTRY>USA</COUNTRY> 
  <COMPANY>Columbia</COMPANY> 
  <PRICE>9.90</PRICE> 
  <YEAR>1997</YEAR> 
  </CD>
- <CD>
  <TITLE>Tupelo Honey</TITLE> 
  <ARTIST>Van Morrison</ARTIST> 
  <COUNTRY>UK</COUNTRY> 
  <COMPANY>Polydor</COMPANY> 
  <PRICE>8.20</PRICE> 
  <YEAR>1971</YEAR> 
  </CD>
- <CD>
  <TITLE>The very best of</TITLE> 
  <ARTIST>Cat Stevens</ARTIST> 
  <COUNTRY>UK</COUNTRY> 
  <COMPANY>Island</COMPANY> 
  <PRICE>8.90</PRICE> 
  <YEAR>1990</YEAR> 
  </CD>
- <CD>
  <TITLE>Stop</TITLE> 
  <ARTIST>Sam Brown</ARTIST> 
  <COUNTRY>UK</COUNTRY> 
  <COMPANY>A and M</COMPANY> 
  <PRICE>8.90</PRICE> 
  <YEAR>1988</YEAR> 
  </CD>
- <CD>
  <TITLE>Bridge of Spies</TITLE> 
  <ARTIST>T'Pau</ARTIST> 
  <COUNTRY>UK</COUNTRY> 
  <COMPANY>Siren</COMPANY> 
  <PRICE>7.90</PRICE> 
  <YEAR>1987</YEAR> 
  </CD>
- <CD>
  <TITLE>Private Dancer</TITLE> 
  <ARTIST>Tina Turner</ARTIST> 
  <COUNTRY>UK</COUNTRY> 
  <COMPANY>Capitol</COMPANY> 
  <PRICE>8.90</PRICE> 
  <YEAR>1983</YEAR> 
  </CD>
- <CD>
  <TITLE>Midt om natten</TITLE> 
  <ARTIST>Kim Larsen</ARTIST> 
  <COUNTRY>EU</COUNTRY> 
  <COMPANY>Medley</COMPANY> 
  <PRICE>7.80</PRICE> 
  <YEAR>1983</YEAR> 
  </CD>
- <CD>
  <TITLE>Pavarotti Gala Concert</TITLE> 
  <ARTIST>Luciano Pavarotti</ARTIST> 
  <COUNTRY>UK</COUNTRY> 
  <COMPANY>DECCA</COMPANY> 
  <PRICE>9.90</PRICE> 
  <YEAR>1991</YEAR> 
  </CD>
- <CD>
  <TITLE>The dock of the bay</TITLE> 
  <ARTIST>Otis Redding</ARTIST> 
  <COUNTRY>USA</COUNTRY> 
  <COMPANY>Atlantic</COMPANY> 
  <PRICE>7.90</PRICE> 
  <YEAR>1987</YEAR> 
  </CD>
- <CD>
  <TITLE>Picture book</TITLE> 
  <ARTIST>Simply Red</ARTIST> 
  <COUNTRY>EU</COUNTRY> 
  <COMPANY>Elektra</COMPANY> 
  <PRICE>7.20</PRICE> 
  <YEAR>1985</YEAR> 
  </CD>
- <CD>
  <TITLE>Red</TITLE> 
  <ARTIST>The Communards</ARTIST> 
  <COUNTRY>UK</COUNTRY> 
  <COMPANY>London</COMPANY> 
  <PRICE>7.80</PRICE> 
  <YEAR>1987</YEAR> 
  </CD>
- <CD>
  <TITLE>Unchain my heart</TITLE> 
  <ARTIST>Joe Cocker</ARTIST> 
  <COUNTRY>USA</COUNTRY> 
  <COMPANY>EMI</COMPANY> 
  <PRICE>8.20</PRICE> 
  <YEAR>1987</YEAR> 
  </CD>
  </CATALOG>

再建立Ajax代码

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>

    <script type="text/javascript">
        function loadXMLDoc(url) {
            var xmlhttp;
            var txt;
            var x;
            var i;
            alert("a1");
            if (window.XMLHttpRequest) {   // 当浏览器版本为ie7或这个以上的时
                xmlhttp =new XMLHttpRequest();
            }
            else {                          //当时ie5或者ie6时
                xmlhttp =new ActiveXObject("Microsoft.XMLHTTP");
            }
            alert("a2");
            xmlhttp.onreadystatechange = function() {   //当是加载完毕时
                alert("a3");
                if (xmlhttp.readyState ==4&& xmlhttp.status ==200) {                 //当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
                    txt ="<table border='1'><tr><th>Title</th><th>Artist</th></tr>";
                    x = xmlhttp.responseXML.documentElement.getElementsByTagName("CD");//请求取出所有的CD节点
                    alert("a4");
                    for (i =0; i < x.length; i++) {

                        txt = txt +"<tr>";
                        var xx = x[i].getElementsByTagName("TITLE");        //取名为TITLE的集合
                        {
                            try {
                                txt = txt +"<td>"+ xx[0].firstChild.nodeValue +"</td>";

                            }

                            catch (er) {
                                txt = txt +"<td> </td>";
                            }

                        }
                        xx = x[i].getElementsByTagName("ARTIST");           //去名为”ARTIST“的集合
                        {
                            try {
                                txt = txt +"<td>"+ xx[0].firstChild.nodeValue +"</td>";
                            }
                            catch (er) {
                                txt = txt +"<td> </td>";
                            }
                        } txt = txt +"</tr>";
                    }
                    txt = txt +"</table>";
                    document.getElementById('div').innerHTML = txt;     //将txt追加到div上

                }
            }
            xmlhttp.open("GET", url, true);
            xmlhttp.send();
        }       
    </script>

</head>
<body>
    <div id="div">
        <button onclick="loadXMLDoc('sa.xml')">
            获得 CD 信息</button>
    </div>
</body>
</html>