本章演示使用 XML、HTTP、DOM 以及 JavaScript 的 HTML 应用程序。
在本章中，我们将使用名为 "music_list.xml" 的 XML 文件。
本例遍历每个 元素，然后在 HTML 表格中显示 和 元素的值：</p> <h3>ຄວາມຄິດຕົວ</h3> <pre class="language-html"> <html> <body> <table id="demo"></table> <script> function loadXMLDoc() { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myFunction(this); x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" + }; xmlhttp.open("GET", "music_list.xml", true); xmlhttp.send(); x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" + function myFunction(xml) { var i; var xmlDoc = xml.responseXML; var table="<tr><th>艺术家</th><th>曲目</th></tr>"; var x = xmlDoc.getElementsByTagName("TRACK"); for (i = 0; i <x.length; i++) { table += "<tr><td>" + x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</td><td>" + x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</td></tr>"; x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" + document.getElementById("demo").innerHTML = table; x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" + </script> </body> </html> </pre> <p class="tiy"><a target="_blank" href="/lo/tiy/t.html?f=eg_js_ajax_app_display_table">"</ul>";</a></p> <p>ສຳລັບຂໍ້ມູນຫຼາຍກວ່າຫຼາຍໃນການນໍາໃຊ້ JavaScript ແລະ XML DOM, ຂໍ້ສະແດງ: <a href="/lo/xmldom/dom_intro.html" title="ການຊອກຫາ XML DOM">ຂັ້ນຕົວ DOM</a>.</p> </div> <div> <h2>ປະກົດສະຖານນະພາບອະລະບັນຊະນະສະຖານະທີ່ທໍາອິດໃນປະເທດ HTML div:</h2> <p>ຄືນນີ້ຫົວຂໍ້ສະແດງວ່າບາງຄົນມີການປະກົດສະຖານນະພາບຂອງອະລະບັນຊະນະສະຖານະຂອງຜູ້ນຳ:</p> <h3>ຄວາມຄິດຕົວ</h3> <pre class="language-js"> displayMUSIC(0); function displayMUSIC(i) { var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { myFunction(this, i); x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" + }; xmlhttp.open("GET", "music_list.xml", true); xmlhttp.send(); x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" + function myFunction(xml, i) { var xmlDoc = xml.responseXML; x = xmlDoc.getElementsByTagName("TRACK"); document.getElementById("showMUSIC").innerHTML = "<ul>" + "<li>曲目：" + x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</li>" + "<li>艺术家：" + x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" + "<li>ສິນລະປິນ: " + x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" + "<li>ອາລະບັນ: " + x[i].getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" + "<li>ປະເທດ: " + x[i].getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" + "<li>ບໍລິສັດ: " + x[i].getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" + "<li>ປີ: " + x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" + </pre> <p class="tiy"><a target="_blank" href="/lo/tiy/t.html?f=eg_js_ajax_app_display_music">"</ul>";</a></p> </div> <div> <h2>ຫຼິ້ນລະຫວ່າງອະລະບັນຊະນະສະຖານະ</h2> <p>ສຳລັບການຫຼິ້ນລະຫວ່າງອະລະບັນຊະນະສະຖານະໃນຫົວຂໍ້ນີ້ໄດ້ຖືກຕິດຕາມ next() ແລະ previous() ພາຍໃນກົນລະຍຸດ:</p> <h3>ຄວາມຄິດຕົວ</h3> <pre class="language-js"> function next() { // ປະກົດສະຖານນະພາບຂອງອະລະບັນຊະນະສະຖານະທີ່ຫຼັງໃນບັນຊະນະສະຖານະທີ່ບໍ່ແມ່ນທີ່ສຸດທ້າຍ if (i < x.length-1) { i++; displayMUSIC(i); x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" + x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" + function previous() { // ປະກົດສະຖານນະພາບຂອງອະລະບັນຊະນະສະຖານະທີ່ກ່ອນໃນບັນຊະນະສະຖານະທີ່ບໍ່ແມ່ນທີ່ທໍາອິດ if (i > 0) { i--; displayMUSIC(i); x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" + x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" + </pre> <p class="tiy"><a target="_blank" href="/lo/tiy/t.html?f=eg_js_ajax_app_navigate_list">"</ul>";</a></p> </div> <div> <h2>ປະກົດສະຖານນະພາບຂອງອະລະບັນຊະນະສະຖານະຂອງຜູ້ນຳໃນການກົດດັນ:</h2> <p>ຄືນນີ້ຫົວຂໍ້ສະແດງວ່າບາງຄົນມີການປະກົດສະຖານນະພາບຂອງອະລະບັນຊະນະສະຖານະຂອງຜູ້ນຳ:</p> <h3>ຄວາມຄິດຕົວ</h3> <pre class="language-js"> function displayMUSIC(i) { document.getElementById("showMUSIC").innerHTML = "<ul>" + "<li>曲目：" + x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</li>" + "<li>艺术家：" + x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" + "<li>ສິນລະປິນ: " + x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" + "<li>ອາລະບັນ: " + x[i].getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" + "<li>ປະເທດ: " + x[i].getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" + "<li>ບໍລິສັດ: " + x[i].getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" + "<li>ປີ: " + x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" + </pre> <p class="tiy"><a target="_blank" href="/lo/tiy/t.html?f=eg_js_ajax_app_display_table_music">"</ul>";</a></p> </div> <div class="prenextnav"> <ul> <li> } <a href="/lo/js/js_ajax_database.html" title="AJAX Database ການພາລະການ">ທົດລອງຕົວເອງ</a></li> <li> ການໄປຫາຫົວເຫຼືອທີ່ຜ່ານມາ <a href="/lo/js/js_ajax_examples.html" title="AJAX ການພາລະການ">AJAX ການພາລະການ</a></li> </ul> </div><div style="background-color:#fcfdf8; padding:0;"> </div> </div> <!-- maincontent end --> <div id="sidebar"> <div><h3><center> AJAX ຖານຂໍ້ມູນ </center><h3> <h5 id="tools_reference"><a href="/lo/jsref/index.html">ຄູ່ມວນຊົນ JavaScript ແລະ HTML DOM</a></h5> <h5 id="tools_example"><a href="/lo/js/js_examples.html">ຄວາມນັບເຄິຍ JavaScript</a></h5> <h5 id="tools_quiz"><a href="/lo/js/js_quiz.html">ການກວດສອບ JavaScript</a></h5> <h5 id="tools_professional"><a href="/lo/js/index_pro.html">ການໄປຫາຫົວເຫຼືອ</a></h5> </div> <div><h3><center> ອຸປະກອນ </center><h3> <div id="sbtg"> <script src="/myjs/zzsr.js"></script> </div> </div> </div> <div id="footer"> <p id="p1"> ການສອນ JavaScript ສູງສຸດ </p> <p id="p2"> <a href="/lo/about/index.html" title="ເຖິງກາວ CodeW3C.com">ເຖິງກາວ CodeW3C.com</a> <a href="/lo/about/about_helping.html" title="ການຊ່ວຍເຫຼືອ CodeW3C.com">ການຊ່ວຍເຫຼືອ CodeW3C.com</a> <a href="/lo/about/about_use.html" title="ເຖິງກາວໃຊ້">ການສະໜັບສະໜູນຫົວໂຫຼດ</a> <a href="/lo/about/about_privacy.html" title="ເຖິງກາວຄວາມລັບຄວາມລັບຂອງກາວ">ຂໍ້ກໍານົດຄວາມລັບຄວາມລັບ: CodeW3C.com ສະແນວນີ້ສະເໜີສຳລັບການຝຶກຫັດແລະການທົດລອງພຽງແຕ່ ບໍ່ຮັບປະກັນຄວາມຖືກຕ້ອງຂອງຂໍ້ມູນ. ຄວາມສ່ຽງທີ່ເກີດຂຶ້ນຈາກການໃຊ້ຂໍ້ມູນຂອງພວກເຮົາບໍ່ກ່ຽວກັບພວກເຮົາ. ບົດສະຫຼະສັບຂອງຄວາມຄອບຄອງຂອງພວກເຮົາຈະຖືກຮັກສາຢ່າງເຕັມສ່ວນ.</a> <a href="http://www.comfortsoftwaregroup.com/" target="_blank"><img src="/comfortsoftwaregroup.png"></a> <a href="http://www.ce4e.com/" target="_blank"><img src="/poweredby.png" alt="ດຳເນີນການໂດຍ Ce4e.com"></a> </p> </div> </div> <!-- wrapper end --> <script src="/myjs/tongji.js"></script> </body> </html>