XML التطبيقات

يوضح هذا الفصل بعض تطبيقات HTML باستخدام XML، HTTP، DOM، وجافا سكريبت.

وثيقة XML المستخدمة

في هذا الفصل سوف نستخدم ملف XML تسمى "cd_catalog.xml" .

بيانات عرض XML في جدول HTML

هذا المثال حلقات عبر كل <CD> عنصر، وعرض قيم <ARTIST> و <TITLE> العناصر في جدول HTML:

مثال

<html>
<head>
<style>
table, th, td {
border: 1px solid black;
  border-collapse:collapse;
}
th, td {
  padding: 5px;
}
</style>
</head>
<body>

<table id="demo"></table>

<script>
function loadXMLDoc() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      myFunction(xmlhttp);
    }
};
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>

انها محاولة لنفسك »

لمزيد من المعلومات حول استخدام جافا سكريبت وXML DOM، انتقل إلى DOM مقدمة.

عرض CD الأولى في شعبة عنصر HTML

يستخدم تي إتش إس سبيل المثال وظيفة لعرض أول عنصر CD في عنصر HTML مع معرف = "showCD":

مثال

displayCD(0);

function displayCD(i) {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            myFunction(xmlhttp, 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;
}

انها محاولة لنفسك »