مثال‌های XML در AJAX

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو

از AJAX می‌توان برای تبادل داده با یک فایل XML استفاده کرد. [۱]

مثال XML در AJAX

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

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


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


توضیح مثال

زمانی که یک کاربر روی دکمه "Get CD info" بالا کلیک کند، تابع loadDoc() اجرا می‌شود.

تابع loadDoc() یک شیء XMLHttpRequest می‌سازد، توابعی را که می‌بایست بعد از آماده بودن پاسخ سرور اجرا شود را اضافه می‌کند و درخواست را به سمت سرور ارسال می‌کند.

هنگامی که پاسخ سرور آماده است، یک جدول HTML ای ساخته می‌شود، گره‌ها (عناصر) از فایل XML استخراج شده، و در نهایت عنصر "demo" را با جدول HTML ای که با داده‌های XML پر شده‌است، بروزرسانی می‌کند:

 1function loadDoc() {
 2  var xhttp = new XMLHttpRequest();
 3  xhttp.onreadystatechange = function() {
 4    if (this.readyState == 4 && this.status == 200) {
 5    myFunction(this);
 6    }
 7  };
 8  xhttp.open("GET", "cd_catalog.xml", true);
 9  xhttp.send();
10}
11function myFunction(xml) {
12  var i;
13  var xmlDoc = xml.responseXML;
14  var table="<tr><th>Artist</th><th>Title</th></tr>";
15  var x = xmlDoc.getElementsByTagName("CD");
16  for (i = 0; i <x.length; i++) {
17    table += "<tr><td>" +
18    x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
19    "</td><td>" +
20    x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
21    "</td></tr>";
22  }
23  document.getElementById("demo").innerHTML = table;
24}

فایل XML

فایل XML استفاده شده در مثال بالا، فایل به این شکل است: "cd_catalog.xml".


منابع آموزشی