这篇文章主要介绍了JS使用ajax从xml文件动态获取数据显示的方法,实例分析了javascript使用Ajax技术操作XML文件的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了JS使用ajax从xml文件动态获取数据显示的方法。分享给大家供大家参考。具体分析如下:
下面的JS代码通过ajax检索xml文件的内容动态展示到网页,真个页面无刷新
- <!DOCTYPE html>
- <html>
- <head>
- <script>
- function loadXMLDoc(url)
- {
- var xmlhttp;
- var txt,x,xx,i;
- if (window.XMLHttpRequest)
- {// code for IE7+, Firefox, Chrome, Opera, Safari
- xmlhttp=new XMLHttpRequest();
- }
- else
- {// code for IE6, IE5
- xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
- }
- xmlhttp.onreadystatechange=function()
- {
- if (xmlhttp.readyState==4 && xmlhttp.status==200)
- {
- txt="<table border='1'><tr><th>Title</th><th>Artist</th></tr>";
- x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
- for (i=0;i<x.length;i++)
- {
- txttxt=txt + "<tr>";
- xxx=x[i].getElementsByTagName("TITLE");
- {
- try
- {
- txttxt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
- }
- catch (er)
- {
- txttxt=txt + "<td> </td>";
- }
- }
- xxx=x[i].getElementsByTagName("ARTIST");
- {
- try
- {
- txttxt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
- }
- catch (er)
- {
- txttxt=txt + "<td> </td>";
- }
- }
- txttxt=txt + "</tr>";
- }
- txttxt=txt + "</table>";
- document.getElementById('txtCDInfo').innerHTML=txt;
- }
- }
- xmlhttp.open("GET",url,true);
- xmlhttp.send();
- }
- </script>
- </head>
- <body>
- <div id="txtCDInfo">
- <button onclick="loadXMLDoc('cd_catalog.xml')">Get CD info</button>
- </div>
- </body>
- </html>
xml文件内容如下
- <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>Soulsville</TITLE>
- <ARTIST>Jorn Hoel</ARTIST>
- <COUNTRY>Norway</COUNTRY>
- <COMPANY>WEA</COMPANY>
- <PRICE>7.90</PRICE>
- <YEAR>1996</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>
希望本文所述对大家的javascript程序设计有所帮助。
新闻热点
疑难解答
图片精选