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

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو
Main Page Tutorial
JavaScript-menu.png
موارد آموزشی
فرم‌ها در جاوا اسکریپت
تعریف شیء در جاوا اسکریپت
تابع در جاوا اسکریپت
HTML DOM در جاوا اسکریپت
Browser BOM در جاوا اسکریپت
AJAX در جاوا اسکریپت
۱مقدمه
۲ AJAX XMLHttp
۳درخواست AJAX
۴پاسخ سرور
۵مثال‌های XML در AJAX
۶مثال‌های PHP در AJAX
۷مثال‌های ASP در AJAX
۸مثال پایگاه داده در AJAX
۹نرم‌افزارهای XML
۱۰مثال‌های AJAX
JSON در جاوا اسکریپت
جی‌کوئری در برابر جاوا اسکریپت
مثال‌های جاوا اسکریپت
مرجع جاوا اسکریپت

این فصل به شما برخی از نرم‌افزارهای 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 }


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



منابع آموزشی