1. مهمان گرامی، جهت ارسال پست، دانلود و سایر امکانات ویژه کاربران عضو، ثبت نام کنید.
    بستن اطلاعیه

کاربرد Ajax در XML

شروع موضوع توسط Amon Amarth ‏20/4/13 در انجمن Ajax

  1. کاربر ارشد

    تاریخ عضویت:
    ‏7/6/12
    ارسال ها:
    12,082
    تشکر شده:
    28,151
    امتیاز دستاورد:
    113
    جنسیت:
    مرد
    کاربرد Ajax در XML


    در این بخش قصد داریم ، تا با ارائه یک مثال عملی ، نحوه کار با فایل های XML در Ajax و دریافت اطلاعات از آنها را نمایش دهیم .
    در این مثال یک دکمه فرمان قرار داده شده است ، که در هنگام کلیک کاربر بر روی آن ، اطلاعات چند CD را از یک فایل XML خوانده و سپس در جدول نمایش می دهد .
    1 ) کد تابع ( ) loadXMLDoc :
    کد تابع ( ) loadXMLDoc که عملیات ساخت شی Ajax و دریافت اطلاعات از فایل XML را انجام می دهد ، به صورت زیر است . این تابع پارامتر url را به عنوان آدرس فایل XML در ورودی دریافت می کند . کد آن را مرور نمایید . سپس به تشریح خط به خط کد آن می پردازیم :
    [TABLE="class: ex"]
    [TR]
    [TD="class: prname"] کد فایل تابع
    loadXMLDoc ( ) [/TD]
    [TD="class: prdes, align: left"] <!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.getElementsByTagName("TITLE");
    {
    try {
    txt = txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
    }
    catch (er) {
    txt = txt + "<td> </td>";
    }
    }
    xx = x.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>
    [/TD]
    [/TR]
    [/TABLE]
    2 ) توضیح گام به گام کد مثال :
    هر یک از بخش های کد مثال که با یک رنگ خاص مشخص شده اند ، را توضیح می دهیم :

    • این بخش کد تابعی است ، که عملیات ساخت شی Ajax وخواندن اطلاعات از فایل XML را انجام می دهد .
    • این بخش از کد بررسی می کند که آیا وضعیت شی ساخته شده Ajax ، آماده بوده و جواب لازم نیز از سرور برگشت داده شده است یا خیر.
    • این بخش از کد ، بر پایه اطلاعات دریافتی از فایل XML ، جدول لازم را برای نمایش اطلاعات ساخته و آن را در تگ <div> قرار می دهد .
    • این بخش از کد ، دکمه فرمانی است که تابع ( ) loadXMLDoc را فراخوانی کرده و آدرس فایل XML را به آن ارسال می کند .
      همچنین شامل تگ <div> ای است که ، محتویات اطلاعات خروجی از فایل XML را در خود جای می دهد .
    3 ) مشاهده خروجی مثال :
    برای مشاهده خروجی مثال ، بر روی دکمه فرمان زیر کلیک نمایید . همچنین کد فایل XML نیز در آخر صفحه به شما نمایش داده شده است .
    [TABLE="class: ex"]
    [TR]
    [TD="class: prname"] خروجی مثال [/TD]
    [TD="class: prdes, align: left"]

    [/TD]
    [/TR]
    [/TABLE]
    4 ) کد فایل XML :
    کد فایل XML مورد استفاده در مثال : [TABLE="class: ex"]
    [TR]
    [TD="class: prname"] XML کد فایل [/TD]
    [TD="class: prdes, align: left"] <?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>
    [/TD]
    [/TR]
    [/TABLE]



    منبع: developer1
     
    یک شخص از این تشکر کرد.