تستخدم AJAX مع تبادل البيانات من خلال ملفات XML .
أمثلة AJAX مع XML
في المثال التالي يشرح كيف يمكن لصفحة الويب إظهار البيانات من خلال ملف XML باستخدام AJAX :
شاهد المثال المباشر
شرح المثال باستخدام الوظيفة stateChange()
عند ضغط المستخدم على "الحصول على معلومات CD" في المثال السابق عندها سيعمل الكود الوظيفي
loadXMLDoc() .يقوم الكود
loadXMLDoc() بإنشاء كائن XMLHttpRequest ثم يضيف الكود الوظيفي ويتم استدعائه عندما يصبح استجابة السيرفر جاهزة ثم يرسل الطلب الى السيرفر .عندما تصبح استجابة السيرفر جاهزة سيتم إنشاء جدول HTML والذي سيتم استخراجه من ملف XML ثم يقوم بتحديث txtCDInfo مع جدول HTML المملوءة ببيانات XML :
<html dir="rtl">
<head>
<script type="text/javascript">
function loadXMLDoc(url)
{
var xmlhttp;
var txt,xx,x,i;
if (window.XMLHttpRequest)
{
/*
يعمل على IE7+, Firefox, Chrome, Opera, Safari
*/
xmlhttp=new XMLHttpRequest();
}
else
{
/*
يعمل على IE5 و IE6
*/
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
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-1.xml'">احصل على معلومات CD</button>
</div>
</body>
</html>
ليست هناك تعليقات:
إرسال تعليق