AJAX XML 实例

AJAX 可用于同 XML 文件进行交互式通信。

AJAX XML 实例

下面的例子演示网页如何通过 AJAX 从 XML 文件读取信息：

实例

  1. <!DOCTYPE html>
  2. <html>
  3. <style>
  4. table,th,td {
  5.   border : 1px solid black;
  6.   border-collapse: collapse;
  7. }
  8. th,td {
  9.   padding: 5px;
  10. }
  11. </style>
  12. <body>
  14. <h1>XMLHttpRequest 对象</h1>
  16. <button type="button" onclick="loadDoc()">获取我的音乐列表</button>
  17. <br><br>
  18. <table id="demo"></table>
  20. <script>
  21. function loadDoc() {
  22.   var xhttp = new XMLHttpRequest();
  23.   xhttp.onreadystatechange = function() {
  24.     if (this.readyState == 4 && this.status == 200) {
  25.       myFunction(this);
  26.     }
  27.   };
  28.   xhttp.open("GET", "/demo/music_list.xml", true);
  29.   xhttp.send();
  30. }
  31. function myFunction(xml) {
  32.   var i;
  33.   var xmlDoc = xml.responseXML;
  34.   var table="<tr><th>艺术家</th><th>曲目</th></tr>";
  35.   var x = xmlDoc.getElementsByTagName("TRACK");
  36.   for (i = 0; i <x.length; i++) { 
  37.     table += "<tr><td>" +
  38.     x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
  39.     "</td><td>" +
  40.     x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
  41.     "</td></tr>";
  42.   }
  43.   document.getElementById("demo").innerHTML = table;
  44. }
  45. </script>
  47. </body>
  48. </html>

例子解释

当用户点击“获取 CD 信息”按钮时，执行 loadDoc() 函数。

loadDoc() 函数创建 XMLHttpRequest 对象，添加当服务器响应就绪时执行的函数，并向服务器发送请求。

当服务器响应就绪后，构建 HTML 表格，从 XML 文件提取节点（因素），最后使用由 XML 数据填充的 HTML 表格对元素“demo”进行更新。

XML 文件

上例中使用的 XML 文件类似这样："music_list.xml"。

  1. <CATALOG>
  2. <TRACK>
  3. <TITLE>再见</TITLE>
  4. <ARTIST>邓紫棋</ARTIST>
  5. <ALBUM>新的心跳</ALBUM>
  6. <COUNTRY>中国</COUNTRY>
  7. <COMPANY>邓紫棋工作室</COMPANY>
  8. <YEAR>2016</YEAR>
  9. </TRACK>
  10. <TRACK>
  11. <TITLE>All I Ask</TITLE>
  12. <ARTIST>Adele</ARTIST>
  13. <ALBUM>25</ALBUM>
  14. <COUNTRY>英国</COUNTRY>
  15. <COMPANY>XL Recordings</COMPANY>
  16. <YEAR>2015</YEAR>
  17. </TRACK>
  18. <TRACK>
  19. <TITLE>之乎者也</TITLE>
  20. <ARTIST>罗大佑</ARTIST>
  21. <ALBUM>青春舞曲</ALBUM>
  22. <COUNTRY>中国</COUNTRY>
  23. <COMPANY>滚石唱片</COMPANY>
  24. <YEAR>1982</YEAR>
  25. </TRACK>
  26. <TRACK>
  27. <TITLE>Never Be Alone</TITLE>
  28. <ARTIST>Shawn Mendes</ARTIST>
  29. <ALBUM>Handwritten</ALBUM>
  30. <COUNTRY>加拿大</COUNTRY>
  31. <COMPANY>环球唱片</COMPANY>
  32. <YEAR>2015</YEAR>
  33. </TRACK>
  34. <TRACK>
  35. <TITLE>慢慢</TITLE>
  36. <ARTIST>张学友</ARTIST>
  37. <ALBUM>忘记你我做不到</ALBUM>
  38. <COUNTRY>中国</COUNTRY>
  39. <COMPANY>环球唱片</COMPANY>
  40. <YEAR>1996</YEAR>
  41. </TRACK>
  42. <TRACK>
  43. <TITLE>Complicated</TITLE>
  44. <ARTIST>Avril Lavigne</ARTIST>
  45. <ALBUM>Let Go</ALBUM>
  46. <COUNTRY>加拿大</COUNTRY>
  47. <COMPANY>索尼音乐</COMPANY>
  48. <YEAR>2002</YEAR>
  49. </TRACK>
  50. <TRACK>
  51. <TITLE>三生三世</TITLE>
  52. <ARTIST>张杰</ARTIST>
  53. <ALBUM>三生三世十里桃花</ALBUM>
  54. <COUNTRY>中国</COUNTRY>
  55. <COMPANY>仁溪音乐</COMPANY>
  56. <YEAR>2018</YEAR>
  57. </TRACK>
  58. <TRACK>
  59. <TITLE>Five Hundred Miles</TITLE>
  60. <ARTIST>Justin Timberlake</ARTIST>
  61. <ALBUM>Inside Llewyn Davis</ALBUM>
  62. <COUNTRY>美国</COUNTRY>
  63. <COMPANY>华纳唱片</COMPANY>
  64. <YEAR>2013</YEAR>
  65. </TRACK>
  66. <TRACK>
  67. <TITLE>演员</TITLE>
  68. <ARTIST>薛之谦</ARTIST>
  69. <ALBUM>绅士</ALBUM>
  70. <COUNTRY>中国</COUNTRY>
  71. <COMPANY>海蝶音乐</COMPANY>
  72. <YEAR>2016</YEAR>
  73. </TRACK>
  74. <TRACK>
  75. <TITLE>Numb</TITLE>
  76. <ARTIST>Linkin Park</ARTIST>
  77. <ALBUM>Meteora</ALBUM>
  78. <COUNTRY>美国</COUNTRY>
  79. <COMPANY>华纳唱片</COMPANY>
  80. <YEAR>2003</YEAR>
  81. </TRACK>
  82. <TRACK>
  83. <TITLE>给未来的自己</TITLE>
  84. <ARTIST>梁静茹</ARTIST>
  85. <ALBUM>崇拜</ALBUM>
  86. <COUNTRY>马来西亚</COUNTRY>
  87. <COMPANY>相信音乐</COMPANY>
  88. <YEAR>2007</YEAR>
  89. </TRACK>
  90. <TRACK>
  91. <TITLE>The Monster</TITLE>
  92. <ARTIST>Rihanna</ARTIST>
  93. <ALBUM>The Marshall Mathers LP2</ALBUM>
  94. <COUNTRY>巴巴多斯</COUNTRY>
  95. <COMPANY>环球唱片</COMPANY>
  96. <YEAR>2013</YEAR>
  97. </TRACK>
  98. <TRACK>
  99. <TITLE>我终于失去了你</TITLE>
  100. <ARTIST>赵传</ARTIST>
  101. <ALBUM>我终于失去了你</ALBUM>
  102. <COUNTRY>中国</COUNTRY>
  103. <COMPANY>滚石唱片</COMPANY>
  104. <YEAR>1989</YEAR>
  105. </TRACK>
  106. <TRACK>
  107. <TITLE>Main Titles</TITLE>
  108. <ARTIST>Ramin Djawadi</ARTIST>
  109. <ALBUM>Game of Thrones</ALBUM>
  110. <COUNTRY>德国</COUNTRY>
  111. <COMPANY>索尼音乐</COMPANY>
  112. <YEAR>2011</YEAR>
  113. </TRACK>
  114. <TRACK>
  115. <TITLE>传奇</TITLE>
  116. <ARTIST>李健</ARTIST>
  117. <ALBUM>似水流年</ALBUM>
  118. <COUNTRY>中国</COUNTRY>
  119. <COMPANY>北京完美坚持文化艺术工作室</COMPANY>
  120. <YEAR>2003</YEAR>
  121. </TRACK>
  122. <TRACK>
  123. <TITLE>完美生活</TITLE>
  124. <ARTIST>许巍</ARTIST>
  125. <ALBUM>时光漫步</ALBUM>
  126. <COUNTRY>中国</COUNTRY>
  127. <COMPANY>金牌大风</COMPANY>
  128. <YEAR>2002</YEAR>
  129. </TRACK>
  130. </CATALOG>