آموزش Ajax > مثال های عملی کار با Ajax > کاربرد Ajax در XML
کاربرد Ajax در XML :
در این بخش قصد داریم ، تا با ارائه یک مثال عملی ، نحوه کار با فایل های XML در Ajax و دریافت اطلاعات از آنها را نمایش دهیم .
در این مثال یک دکمه فرمان قرار داده شده است ، که در هنگام کلیک کاربر بر روی آن ،
اطلاعات چند CD را از یک فایل XML خوانده و سپس در جدول نمایش می دهد .
1 ) کد تابع ( ) loadXMLDoc :
کد تابع ( ) 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>
|
2 ) توضیح گام به گام کد مثال :
هر یک از بخش های کد مثال که با یک رنگ خاص مشخص شده اند ، را توضیح می دهیم :
- این بخش کد تابعی است ، که عملیات ساخت شی Ajax وخواندن اطلاعات از
فایل XML را انجام می دهد .
- این بخش از کد بررسی می کند که آیا وضعیت شی ساخته شده Ajax ، آماده
بوده و جواب لازم نیز از سرور برگشت داده شده است یا خیر.
- این بخش از کد ، بر پایه اطلاعات دریافتی از فایل XML ، جدول لازم
را برای نمایش اطلاعات ساخته و آن را در تگ <div> قرار می دهد .
- این بخش از کد ، دکمه فرمانی است که تابع ( ) loadXMLDoc
را فراخوانی کرده و آدرس فایل XML را به آن ارسال می کند .
همچنین شامل تگ <div> ای است که ، محتویات اطلاعات خروجی از فایل XML را در خود
جای می دهد .
3 ) مشاهده خروجی مثال :
برای مشاهده خروجی مثال ، بر روی دکمه فرمان زیر کلیک نمایید . همچنین کد فایل XML
نیز در آخر صفحه به شما نمایش داده شده است .
خروجی مثال
|
|
4 ) کد فایل XML :
کد فایل XML مورد استفاده در مثال :
XML کد فایل
|
<?xml version="1.0" encoding="utf-8" ?>
<catalog>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CD>
<TITLE>Greatest Hits</TITLE>
<ARTIST>Dolly Parton</ARTIST>
<COUNTRY>USA</COUNTRY>
<PRICE>9.90</PRICE>
<YEAR>1982</YEAR>
</CD>
</catalog>
|
راجع این مطلب
سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ...
>>>>> ورود به انجمن تخصصی
نطر خودتان درباره این صفحه را با ما در میان بگذارید :