एक्सएमएल एप्लीकेशन
यह अध्याय एक्सएमएल, एचटीटीपी, डोम और जावास्क्रिप्ट का उपयोग करते हुए कुछ एचटीएमएल अनुप्रयोगों को प्रदर्शित करता है।
प्रयुक्त XML दस्तावेज़
इस अध्याय में हम "cd_catalog.xml" नामक XML फ़ाइल का उपयोग करेंगे ।
HTML तालिका में XML डेटा प्रदर्शित करें
यह उदाहरण प्रत्येक <CD> तत्व के माध्यम से लूप करता है, और HTML तालिका में <ARTIST> और <TITLE> तत्वों के मान प्रदर्शित करता है:
उदाहरण
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse:collapse;
}
th, td {
padding: 5px;
}
</style>
</head>
<body>
<button type="button" onclick="loadXMLDoc()">Get my CD collection</button>
<br><br>
<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", "cd_catalog.xml", true);
xmlhttp.send();
}
function myFunction(xml) {
var i;
var xmlDoc = xml.responseXML;
var table="<tr><th>Artist</th><th>Title</th></tr>";
var x = xmlDoc.getElementsByTagName("CD");
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>
जावास्क्रिप्ट और एक्सएमएल डोम का उपयोग करने के बारे में अधिक जानकारी के लिए, डोम इंट्रो पर जाएं।
HTML div Element में पहली सीडी प्रदर्शित करें
यह उदाहरण id="showCD" के साथ HTML तत्व में पहला सीडी तत्व प्रदर्शित करने के लिए एक फ़ंक्शन का उपयोग करता है:
उदाहरण
displayCD(0);
function displayCD(i) {
var xmlhttp
= new XMLHttpRequest();
xmlhttp.onreadystatechange =
function() {
if (this.readyState
== 4 && this.status == 200) {
myFunction(this, i);
}
};
xmlhttp.open("GET", "cd_catalog.xml", true);
xmlhttp.send();
}
function myFunction(xml, i) {
var xmlDoc = xml.responseXML;
x =
xmlDoc.getElementsByTagName("CD");
document.getElementById("showCD").innerHTML =
"Artist: "
+
x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue
+
"<br>Title: " +
x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue
+
"<br>Year: " +
x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
}
सीडी के बीच नेविगेट करें
सीडी के बीच नेविगेट करने के लिए, ऊपर के उदाहरण में, अगला () और पिछला () फ़ंक्शन जोड़ें:
उदाहरण
function next()
{
// display the next CD, unless you are on the last CD
if (i < x.length-1) {
i++;
displayCD(i);
}
}
function previous()
{
// display the previous CD, unless you are on the first CD
if (i > 0) {
i--;
displayCD(i);
}
}
सीडी पर क्लिक करते समय एल्बम की जानकारी दिखाएं
अंतिम उदाहरण दिखाता है कि जब उपयोगकर्ता सीडी पर क्लिक करता है तो आप एल्बम की जानकारी कैसे प्रदर्शित कर सकते हैं:
उदाहरण
function displayCD(i) {
document.getElementById("showCD").innerHTML
=
"Artist: " +
x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue
+
"<br>Title: " +
x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue
+
"<br>Year: " +
x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
}