در این قسمت از مقالات طراحی سایت در بخش آموزش Ajax می خواهیم کاربرد Ajax در XML را برای شما بیان کنیم .
با ذکر مثالی می خواهیم نحوه یکار با فایل های xml در Ajax و دریافت اطلاعات از آن ها را نمایش دهیم .کد تابع ( ) loadXMLDoc که عملیات ساخت شی Ajax و دریافت اطلاعات از فایل XML را انجام می دهد ، به صورت زیر است . این تابع پارامتر url را به عنوان آدرس فایل XML در ورودی دریافت می کند . کد آن را مرور نمایید .
loadXMLDoc ( ) <!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(url) { // شروع کد تابع
var xmlhttp; // Ajax ایجاد متغیر لازم برای شی
var txt, x, xx, i; // ایجاد سایر متغیر های لازم برای تابع
if (window.XMLHttpRequest) { // با این دستور ، تابع پشتیبانی مرورگر از ایجکس را می سنجد
xmlhttp = new XMLHttpRequest(); // سپس یک شی جدید ایجکس ایجاد می کند
}
xmlhttp.onreadystatechange = function ( ) {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
txt = "<table border='1'><tr><th>Title</th><th>Artist</th></tr>";
x = xmlhttp.responseXML.documentElement.getElementsByTagName( " CD " ) ;
for (i = 0; i < x.length; i++) {
txt = txt + "<tr>";
xx = x[i].getElementsByTagName("TITLE");
{
try {
txt = txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er) {
txt = txt + "<td> </td>";
}
}
xx = x[i].getElementsByTagName("ARTIST");
{
try {
txt = txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er) {
txt = txt + "<td> </td>";
}
}
txt = txt + "</tr>";
}
txt = txt + "</table>";
document.getElementById('txtCDInfo').innerHTML = txt;
}
}
xmlhttp.open("GET", url, true); // باز کردن فایل مقصد و خواندن اطلاعات
xmlhttp.send( );
}
</script>
</head>
<body>
<div id="txtCDInfo">
<button onclick="loadXMLDoc('cd_catalog.xml')"> ها CD مشاهده اطلاعات </button> // دکمه فرمان فراخوانی تابع
</div>
</body>
</html>