本章演示使用 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); } }; xmlhttp.open("GET", "music_list.xml", true); xmlhttp.send(); } 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>"; } document.getElementById("demo").innerHTML = table; } </script> </body> </html> </pre> <p class="tiy"><a target="_blank" href="/te/tiy/t.html?f=eg_js_ajax_app_display_table">స్వయంగా ప్రయత్నించండి</a></p> <p>జావాస్క్రిప్ట్ మరియు XML DOM ఉపయోగం గురించి మరింత సమాచారం తెలుసుకోవడానికి సందర్శించండి <a href="/te/xmldom/dom_intro.html" title="XML DOM పరిచయం">DOM పరిచయం</a>。</p> </div> <div> <h2>id="displayMUSIC" యొక్క హెచ్చి ఎలిమెంట్ లో మొదటి పాటను ప్రదర్శించండి</h2> <p>ఈ ఉదాహరణలో id="displayMUSIC" యొక్క హెచ్చి ఎలిమెంట్ లో మొదటి పాటను ప్రదర్శించే ఫంక్షన్ ఒకటి ఉపయోగించబడుతుంది:</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); } }; xmlhttp.open("GET", "music_list.xml", true); xmlhttp.send(); } 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("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>" + "</ul>"; } </pre> <p class="tiy"><a target="_blank" href="/te/tiy/t.html?f=eg_js_ajax_app_display_music">స్వయంగా ప్రయత్నించండి</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); } } function previous() { // ముంది పాటను ప్రదర్శించండి అని వాడుకరుడు మొదటి పాటకు చేరుకున్నా కాదు అయితే if (i > 0) { i--; displayMUSIC(i); } } </pre> <p class="tiy"><a target="_blank" href="/te/tiy/t.html?f=eg_js_ajax_app_navigate_list">స్వయంగా ప్రయత్నించండి</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("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>" + "</ul>"; } </pre> <p class="tiy"><a target="_blank" href="/te/tiy/t.html?f=eg_js_ajax_app_display_table_music">స్వయంగా ప్రయత్నించండి</a></p> </div> <div class="prenextnav"> <ul> <li> పూర్వ పేజీ <a href="/te/js/js_ajax_database.html" title="ఏజాక్స్ డేటాబేస్ ఇన్స్టాన్స్">AJAX డేటాబేస్</a></li> <li> తదుపరి పేజీ <a href="/te/js/js_ajax_examples.html" title="ఏజాక్స్ ఇన్స్టాన్స్">ఏజాక్స్ ఇన్స్టాన్స్</a></li> </ul> </div><div style="background-color:#fcfdf8; padding:0;"> </div> </div> <!-- maincontent end --> <div id="sidebar"> <div><h3><center> టూల్స్ బ్యాగ్ </center><h3> <h5 id="tools_reference"><a href="/te/jsref/index.html">జావాస్క్రిప్ట్ మరియు హెచ్ఎంఎల్ డామిన్ ఓబ్జెక్ట్ పరిచయం</a></h5> <h5 id="tools_example"><a href="/te/js/js_examples.html">జావాస్క్రిప్ట్ ఉదాహరణ</a></h5> <h5 id="tools_quiz"><a href="/te/js/js_quiz.html">జావాస్క్రిప్ట్ పరీక్ష</a></h5> <h5 id="tools_professional"><a href="/te/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"> CodeW3C.com అందించిన కంటెంట్ శిక్షణ మరియు పరీక్షకు ఉపయోగపడుతుంది, కంటెంట్ యొక్క కరుణతను హామీ ఇవ్వబడలేదు. ఈ సైట్ కంటెంట్ ఉపయోగించడం ద్వారా వచ్చే అపాయాలు ఈ సైట్ తో సంబంధం లేవు. అధికారిక లైసెన్సింగ్, అన్ని హక్కులు ప్రత్యేకించబడినవి. </p> <p id="p2"> <a href="/te/about/index.html" title="గురించి CodeW3C.com">గురించి CodeW3C.com</a> <a href="/te/about/about_helping.html" title="CodeW3C.com సహాయం">CodeW3C.com సహాయం</a> <a href="/te/about/about_use.html" title="ఉపయోగం గురించి">ఉపయోగ నిబంధనలు</a> <a href="/te/about/about_privacy.html" title="గోప్యత గురించి">గోప్యత నిబంధనలు</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="పవర్డ్ చేసిన సీ4ఈ కం"></a> </p> </div> </div> <!-- wrapper end --> <script src="/myjs/tongji.js"></script> </body> </html>