نرم‌افزارهای XML

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو

این فصل به شما برخی از نرم‌افزارهای HTML که با استفاده از XML ,HTTP ,DOM و جاوا اسکریپت ساخته شده‌اند را نمایش می‌دهد.[۱]

فایل XML استفاده شده

در این فصل ما از یک فایل XML به نام "cd_catalog.xml". استفاده خواهیم کرد.

نمایش اطلاعات XML در یک جدول HTML

این مثال یک حلقه در بین عنصر <CD> ایجاد می‌کند، و مقادیر عناصر <ARTIST> و <TITLE> را درون یک جدول HTML نمایش می‌دهد:

مثال

 1<html>
 2<head>
 3<style>
 4table, th, td {
 5  border: 1px solid black;
 6  border-collapse: collapse;
 7}
 8
 9th, td {
10  padding: 5px;
11}
12</style>
13</head>
14<body>
15
16<table id="demo"></table>
17
18<script>
19function loadXMLDoc() {
20  var xmlhttp = new XMLHttpRequest();
21  xmlhttp.onreadystatechange = function() {
22    if (this.readyState == 4 && this.status == 200) {
23      myFunction(this);
24    }
25  };
26  xmlhttp.open("GET", "cd_catalog.xml", true);
27  xmlhttp.send();
28}
29function myFunction(xml) {
30  var i;
31  var xmlDoc = xml.responseXML;
32  var table="<tr><th>Artist</th><th>Title</th></tr>";
33  var x = xmlDoc.getElementsByTagName("CD");
34  for (i = 0; i <x.length; i++) {
35    table += "<tr><td>" +
36    x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
37    "</td><td>" +
38    x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
39    "</td></tr>";
40  }
41  document.getElementById("demo").innerHTML = table;
42}
43</script>
44
45</body>
46</html>


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


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

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

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

مثال

 1displayCD(0);
 2
 3function displayCD(i) {
 4  var xmlhttp = new XMLHttpRequest();
 5  xmlhttp.onreadystatechange = function() {
 6    if (this.readyState == 4 && this.status == 200) {
 7      myFunction(this, i);
 8    }
 9  };
10  xmlhttp.open("GET", "cd_catalog.xml", true);
11  xmlhttp.send();
12}
13
14function myFunction(xml, i) {
15  var xmlDoc = xml.responseXML;
16  x = xmlDoc.getElementsByTagName("CD");
17  document.getElementById("showCD").innerHTML =
18  "Artist: " +
19  x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
20  "<br>Title: " +
21  x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
22  "<br>Year: " +
23  x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
24}


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


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

برای پیمایش بین CDها درون مثال‌های بالا، یک تابع next() و یک تابع previous() بسازید:

مثال

 1function next() {
 2  // display the next CD, unless you are on the last CD
 3  if (i < len-1) {
 4    i++;
 5    displayCD(i);
 6  }
 7}
 8
 9function previous() {
10  // display the previous CD, unless you are on the first CD
11  if (i > 0) {
12    i--;
13    displayCD(i);
14  }
15}


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


نمایش اطلاعات آلبوم هنگام کلیک روی یک CD

مثال آخر به شما نحوه نمایش اطلاعات آلبوم را زمانی که کاربر روی یک CD کلیک می‌کند را نشان می‌دهد:

مثال

1function displayCD(i) {
2  document.getElementById("showCD").innerHTML =
3  "Artist: " +
4  x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
5  "<br>Title: " +
6  x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
7  "<br>Year: " +
8  x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
9}


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



منابع آموزشی