XML एप्लीकेशन
- पिछला पृष्ठ AJAX डाटाबेस
- अगला पृष्ठ एज़ैक्स इस्टेंस
इस चाप में, हम XML, HTTP, DOM और JavaScript के उपयोग से HTML एप्लिकेशन का उपयोग करने का प्रदर्शन करेंगे.
उपयोग करने वाला XML दस्तावेज़
इस चाप में, हम एक नाम "music_list.xml" के XML फ़ाइल.
XML डाटा को HTML तालिका में दिखाया जाता है
इस उदाहरण में, हम हर एक <TRACK> एलीमेंट को चकार करते हैं और फिर <ARTIST> और <TITLE> एलीमेंट के मालिकीकरण को 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>
जिससे JavaScript और XML DOM के बारे में अधिक जानकारी प्राप्त करना है, इस लिंक पर जाएं: DOM व्याख्या。
id="displayMUSIC" के HTML div एलिमेंट में पहला गाना दिखाना
इस उदाहरण में id="displayMUSIC" के HTML एलिमेंट में पहला गाना दिखाने के लिए एक फ़ंक्शन का उपयोग किया जाता है:
उदाहरण
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>";
}
गानों के बीच नेविगेशन
यदि उपरोक्त उदाहरण में गानों के बीच नेविगेशन करना है, तो next() और previous() फ़ंक्शन जोड़ें:
उदाहरण
function next() {
// अंतिम गाने तक पहुंचने तक अगले गाने को दिखाएं
if (i < x.length-1) {
i++;
displayMUSIC(i);
}
}
function previous() {
// पहले गाने को दिखाएं जब तक कि पहला गाना नहीं हो
if (i > 0) {
i--;
displayMUSIC(i);
}
}
गाने पर क्लिक करके एल्बम की जानकारी दिखाना
अंतिम इस उदाहरण में इस बात को दिखाया गया है कि जब उपयोगकर्ता किसी गाने पर क्लिक करता है तो एल्बम की जानकारी कैसे दिखाई जाती है:
उदाहरण
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>";
}
- पिछला पृष्ठ AJAX डाटाबेस
- अगला पृष्ठ एज़ैक्स इस्टेंस
