اپلیکیشن ها (AJAX Applications)
اینجا با XML و آژاکس کار می کنیم. آژاکس یعنی دریافت داده بدون رفرش. مثل دیدن لیست آهنگ ها با یک کلیک ساده.
نمایش XML داخل جدول HTML
با کلیک دکمه، فایل XML خوانده می شود. سپس جدول از تگ های CD ساخته می شود. DOM یعنی همان درخت عناصر صفحه.
<button type="button" onclick="loadXMLDoc()">Get my CD collection</button>
<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>
نمایش اولین CD در یک div
تابع displayCD یک اندیس می گیرد. سپس مقدار هنرمند و عنوان را در div نشان می دهد. onchange یا کلیک می تواند آن را صدا بزند.
<div id="showCD"></div>
<script>
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;
}
<\/script>
جابجایی بین CDها
با دکمه های بعدی و قبلی حرکت کن. متغیر i شاخص CD فعلی است. شرط ها جلوی خطا را می گیرند.
<button onclick="previous()">Prev</button>
<button onclick="next()">Next</button>
<script>
function next() {
if (i < x.length - 1) {
i++;
displayCD(i);
}
}
function previous() {
if (i > 0) {
i--;
displayCD(i);
}
}
<\/script>
نمایش جزئیات با کلیک روی CD
وقتی روی یک CD کلیک می کنی، همان لحظه اطلاعات آلبوم نمایش می شود. این تعامل سریع، تجربه را بهتر می کند.
<div id="showCD"></div>
<script>
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;
}
<\/script>
نکات کاربردی
- XML یعنی داده ساخت یافته با تگ ها.
- HTTP درخواست ها را به سرور می فرستد.
- DOM درخت عناصر صفحه است.
- JavaScript منطق تعامل را می نویسد.
جمع بندی سریع
- XML را با آژاکس می خوانیم.
- DOM کمک می کند مقدارها را بگیریم.
- جدول را با رشته HTML می سازیم.
- دکمه ها بین آلبوم ها جابجا می شوند.