نرم‌افزارهای XML
پرش به ناوبری
پرش به جستجو
این فصل به شما برخی از نرم‌افزارهای HTML که با استفاده از XML ,HTTP ,DOM و جاوا اسکریپت ساخته شده‌اند را نمایش می‌دهد.[۱]
فایل XML استفاده شده
در این فصل ما از یک فایل XML به نام "cd_catalog.xml". استفاده خواهیم کرد.
نمایش اطلاعات XML در یک جدول HTML
این مثال یک حلقه در بین عنصر <CD> ایجاد می‌کند، و مقادیر عناصر <ARTIST> و <TITLE> را درون یک جدول HTML نمایش می‌دهد:
مثال
1 <html>
2 <head>
3 <style>
4 table, th, td {
5 border: 1px solid black;
6 border-collapse: collapse;
7 }
8
9 th, td {
10 padding: 5px;
11 }
12 </style>
13 </head>
14 <body>
15
16 <table id="demo"></table>
17
18 <script>
19 function 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 }
29 function 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"
مثال
1 displayCD(0);
2
3 function 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
14 function 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() بسازید:
مثال
1 function 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
9 function 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 کلیک می‌کند را نشان می‌دهد:
مثال
1 function 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 }
منابع آموزشی