Ajax 显示XML

显示效果如图：

先建立xml文件sa.xml

View Code

<? 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 时，表示响应已就绪：

View Code

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