۲۵
آبان

جلسه ۹۵ : AJAX XML در جاوا اسکریپت

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

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

فهرست

مقدمه

با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن ، تاکنون در بخش های قبلی فصل جاری به مقدمات کار با AJAX و برخی قابلیت های آن پرداخته ایم. همچنین مباحث درخواست و پاسخ از سرور و کار با شیء XMLHttp ر انیز مرور کردیم، در این بخش قصد داریم تا به چگونگی دسترسی به فایل XML با استفاده از AJAX جاوا اسکریپت بپردازیم. با ما همراه باشید.

دسترسی به فایل XML با استفاده از AJAX جاوا اسکریپت

در این بخش با استفاده از نمونه مثال هایی چگونگی دسترسی به فایل XML با استفاده از AJAX جاوا اسکریپت را ارائه خواهیم کرد.

از AJAX می توان برای ارتباط تعاملی با یک فایل XML استفاده کرد.

مثالی از چگونگی دسترسی به فایل XML با استفاده از AJAX جاوا اسکریپت

مثال زیر نشان می دهد که چگونه یک صفحه وب می تواند اطلاعات را از یک فایل XML با استفاده از AJAX استخراج کند:

مثال : استخراج فایل XML با استفاده از AJAX جاوا اسکریپت

<!DOCTYPE html>
<html>
<style>
table,th,td {
  border : 1px solid black;
  border-collapse: collapse;
}
th,td {
  padding: 5px;
}
</style>
<body>

<h2>The XMLHttpRequest Object</h2>

<button type="button" onclick="loadDoc()">Get my CD collection</button>
<br><br>
<table id="demo"></table>

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myFunction(this);
    }
  };
  xhttp.open("GET", "cd_catalog.xml", true);
  xhttp.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>

<!DOCTYPE html>

<html>

<style>

table,th,td {

border : 1px solid black;

border-collapse: collapse;

}

th,td {

padding: 5px;

}

</style>

<body>

<h2>The XMLHttpRequest Object</h2>

<button type="button" onclick="loadDoc()">Get my CD collection</button>

function loadDoc() {

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

myFunction(this);

}

};

xhttp.open("GET", "cd_catalog.xml", true);

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

تشریح مثال فوق :

هنگامی که یک کاربر بر روی دکمه “Get CD info” در بالا کلیک می کند، تابع ()loadDoc اجرا می شود.

تابع ()loadDoc یک آبجکت XMLHttpRequest را ایجاد می کند.

هنگامی که پاسخ سرور آماده است، تابع را اجرا می کند و درخواست را به سرور ارسال می کند.

هنگامی که پاسخ سرور آماده است، یک جدول HTML ساخته شده است.

گره ها (عناصر) از فایل XML استخراج می شوند.

در نهایت عنصر “demo” را با جدول HTML پر از داده های XML به روز می کند:

مثال :

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
    myFunction(this);
    }
  };
  xhttp.open("GET", "cd_catalog.xml", true);
  xhttp.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;
}

function loadDoc() {

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

myFunction(this);

}

};

xhttp.open("GET", "cd_catalog.xml", true);

xhttp.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;

}

کلام آخر

فایل های XML یکی از فایل هایی طراحی رابط کاربری هستند که ممکن است در صفحات وب خود به آن نیاز داشته باشید، از این رو این بخش را به چگونگی دسترسی به فایل XML با استفاده از AJAX جاوا اسکریپت اختصاص دادیم.

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

AJAX XML در جاوا اسکریپت

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

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

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

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

جلسه ۹۵ : AJAX XML در جاوا اسکریپت

مقدمه

دسترسی به فایل XML با استفاده از AJAX جاوا اسکریپت

مثالی از چگونگی دسترسی به فایل XML با استفاده از AJAX جاوا اسکریپت

کلام آخر

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

کار با فرم ها

اشیا

توابع

HTML DOM

BOM

AJAX

JSON

مقایسه ی جاوا اسکریپت با jQuery

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ