آموزش Ajax - مثال کاربرد در XML

آموزش 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>

راجع این مطلب سوال یا اشکالی دارید ؟! آن را در انجمن سایت مطرح نمایید ... >>>>> ورود به انجمن تخصصی

نطر خودتان درباره این صفحه را با ما در میان بگذارید :

آیا مطالب این صفحه برای شما مناسب و مفید بوده است :
بلهخیر

نام :
آدرس Email :

نظر شما :
سوال امنیتی : پایتخت ایران ؟