نرم‌افزارهای 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 (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>


مشاهدهٔ نتیجه


برای اطلاعات بیشتر در مورد استفاده جاوا اسکریپت و XML DOM، به فصل مقدمه‌ای بر DOM مراجعه کنید.

نمایش اولین CD درون یک عنصر div در HTML

این مثال از یک تابع برای نمایش اولین عنصر CD در یک عنصر با id برابر با "showCd" استفاده می‌کند. id="showCD"

مثال

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;
}


مشاهدهٔ نتیجه


پیمایش بین CDها

برای پیمایش بین CDها درون مثال‌های بالا، یک تابع 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: " +
  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;
}


مشاهدهٔ نتیجه



منابع آموزشی