XML အပလီကေးရှင်းများ
ဤအခန်းတွင် XML၊ HTTP၊ DOM နှင့် JavaScript ကိုအသုံးပြုထားသော HTML အပလီကေးရှင်းအချို့ကို သရုပ်ပြထားသည်။
XML စာရွက်စာတမ်းကို အသုံးပြုထားသည်။
ဤအခန်းတွင် ကျွန်ုပ်တို့သည် "cd_catalog.xml" ဟုခေါ်သော XML ဖိုင်ကို အသုံးပြုပါမည် ။
HTML Table တစ်ခုတွင် XML Data ကိုပြသပါ။
ဤဥပမာသည် <CD> ဒြပ်စင်တစ်ခုစီကို လှည့်ပတ်ပြီး HTML ဇယားတစ်ခုရှိ <ARTIST> နှင့် <TITLE> ဒြပ်စင်များ၏ တန်ဖိုးများကို ပြသသည်-
ဥပမာ
<table id="demo"></table>
<script>
function loadXMLDoc() {
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
const xmlDoc = xml.responseXML;
const cd = xmlDoc.getElementsByTagName("CD");
myFunction(cd);
}
xmlhttp.open("GET", "cd_catalog.xml");
xmlhttp.send();
}
function myFunction(cd) {
let table="<tr><th>Artist</th><th>Title</th></tr>";
for (let i = 0; i < cd.length; i++) {
table += "<tr><td>" +
cd[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue
+
"</td><td>" +
cd[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue
+
"</td></tr>";
}
document.getElementById("demo").innerHTML = table;
}
</script>
</body>
</html>
JavaScript နှင့် XML DOM ကိုအသုံးပြုခြင်းအကြောင်း နောက်ထပ်အချက်အလက်များအတွက်၊ DOM Intro သို့သွားပါ။
HTML div Element တစ်ခုတွင် First CD ကိုပြသပါ။
ဤဥပမာသည် id="showCD" ဖြင့် HTML ဒြပ်စင်တစ်ခုရှိ ပထမဆုံး CD ဒြပ်စင်ကို ပြသရန် လုပ်ဆောင်ချက်ကို အသုံးပြုသည်-
ဥပမာ
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
const xmlDoc = xhttp.responseXML;
const cd = xmlDoc.getElementsByTagName("CD");
myFunction(cd, 0);
}
xhttp.open("GET", "cd_catalog.xml");
xhttp.send();
function myFunction(cd, i) {
document.getElementById("showCD").innerHTML =
"Artist: " +
cd[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
"<br>Title: " +
cd[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
"<br>Year: " +
cd[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
}
CD များကြားတွင် သွားလာပါ။
အထက်ဖော်ပြပါ ဥပမာရှိ CDs များကြားတွင် သွားလာရန်၊ ဖန်တီးပြီး
next()လုပ်ဆောင်ချက် previous()-
ဥပမာ
function next()
{
// display the next CD, unless you are on the last CD
if (i < len-1) {
i++;
displayCD(i);
}
}
function previous()
{
// display the previous CD, unless you are on the first CD
if (i > 0) {
i--;
displayCD(i);
}
}
CD ကိုနှိပ်သည့်အခါ အယ်လ်ဘမ်အချက်အလက်ကို ပြပါ။
အသုံးပြုသူ CD ကို နှိပ်သောအခါ အယ်လ်ဘမ်အချက်အလက်များကို သင်ပြသနိုင်ပုံကို နောက်ဆုံးဥပမာတွင် ပြသသည်-
ဥပမာ
function displayCD(i) {
document.getElementById("showCD").innerHTML =
"Artist: " +
cd[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
"<br>Title: " +
cd[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
"<br>Year: " +
cd[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
}