کاربرد 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