۲۸
اردیبهشت

جلسه ۲۷ : آموزش کار با Applications در AJAX

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزشی

فهرست

مقدمه

با سلام خدمت کاربران گرامی سایت پی وی لرن و علاقمندان و کاربرانی که علاقمند به یادگیری دوره XML هستند. در جلسه گذشته آموزش کار با Database در AJAX ارائه کردیم. در این جلسه که آخرین جلسه از فصل آموزش AJAX در سری آموزش XML است؛ آموزش کار با Applications در AJAX را به علاقمندان AJAX و XML ارائه می کنیم.

آموزش کار با Applications در AJAX

در آموزش کار با Applications در AJAX می آموزیم که چگونه برخی از HTML applications یا برنامه های HTML را با استفاده از XML، HTTP، DOM و جاوا اسکریپت نمایش دهیم.

استفاده از سند XML

در این جلسه ما از یک فایل XML با نام “cd_catalog.xml” استفاده می نماییم.

نمایش داده های XML در یک جدول HTML

این مثال از طریق هر عنصر <CD> حلقه Loop می شود و مقادیر <ARTIST> و <TITLE> را نمایش می دهد:

مثال :

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

<html>

<head>

<style>

table, th, td {

border: 1px solid black;

border-collapse:collapse;

}

th, td {

padding: 5px;

}

</style>

</head>

<body>

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>

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

در مثال زیر از یک تابع برای نمایش اولین CD در یک عنصر HTML از طریق 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;
}

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;

}

حرکت بین CDs ها

برای حرکت بین دیسک ها، در مثال بالا، یک تابع ()next و یک تابع ()previous اضافه کنید:

مثال :

function next() {
  // display the next CD, unless you are on the last CD
  if (i < x.length-1) {
    i++;
    displayCD(i);
  }
}

function previous() {
  // display the previous CD, unless you are on the first CD 
  if (i > 0) {
  i--;
  displayCD(i);
  }
}

function next() {

// display the next CD, unless you are on the last CD

if (i < x.length-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;
}

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;

}

کلام آخر

در این جلسه با آموزش کار با Applications در AJAX همراه شما بودیم.
این جلسه پایان فصل AJAX در XML بود اما دوره آموزش XML هنوز به پایان نرسیده و سلسله جلسات آموزش XML با فصل جدیدی یک DOM آغاز می شود.
پس با پی وی لرن همراه باشید.

QR: جلسه ۲۷ : آموزش کار با Applications در AJAX

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۲۷ : آموزش کار با Applications در AJAX

مقدمه

آموزش کار با Applications در AJAX

استفاده از سند XML

نمایش داده های XML در یک جدول HTML

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

حرکت بین CDs ها

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

کلام آخر

لیست مطالب دوره

XML AJAX

XML DOM

XPath Tutorial

XSLT Tutorial

XQuery

DTD

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ