از آژاکس می توان برای برقراری ارتباط صفحه وبی که کاربر در حال مشاهده ان است با فایل xml ای که در سرور سایت قرار دارد استفاده کرد
 
مثال زیر نشان خواهد داد که چگونه می توان اطلاعات مورد نیاز صفحه وب را از فایل xml دریافت کرد
 
فرض کنید فایل cd_catalog.xml  حاوی تمام مشخصات مربوط به cd های مختلف است
 می خواهیم کاربر با کلیک روی دکمه مشخصات cd ها را ببیند
 فایل cd_catalog.xml در سرور سایت قرار دارد نه روی کامپیوتر کاربر

 

مشاهده و اجرای برنامه کامل

گام اول - طراحی مقدماتی برنامه
 دکمه ای روی صفحه با عنوان get cd info قرار دهید
برنامه تا این لحظه :

 

<html>

<body>

<div id="txtCDInfo">
<button > Get CD info </button>
</div>

</body>
</html>

 
گام دوم - فراخوانی تابع
 دستوری می نویسیم که با کلیک روی این دکمه تابعی خود ساخته به نام loadXMLDoc فراخوانی شود در ضمن نام فایل xml را برای این تابع ارسال می کنیم
 برنامه تا این لحظه :

 

<html>

<body>

<div id="txtCDInfo">


       <button onclick="loadXMLDoc('cd_catalog.xml')">Get CD info</button>


</div>

</body>
</html>

 
گام سوم - تعریف تابع loadXMLDoc
ما می خواهیم از دستورات جاوا اسکریپت استفاده کنیم
 پس تابع loadXMLDoc را در تگ script موجود در تگ head با یک پارامتر به نام url تعریف می کنیم

شکل تابع تا این لحظه :

 

<head>
<script>


function loadXMLDoc(url)
{

    
     
}


</script>
</head>

گام چهارم - تعریف متغیر xmlhttp با توجه به نوع مرورگر کاربر
 قبلا در این باره کاملا صحبت شده است
 تابع تا این لحظه :

 

function loadXMLDoc(url)
{
var xmlhttp;

if (window.XMLHttpRequest)
  {
  xmlhttp=new XMLHttpRequest();
  }
else


{  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}
 

 

}

 

 
گام پنجم - بررسی اینکه ایا سرور پاسخ داده یا نه
 با کد زیر بررسی می کنیم ایا پاسخ سرور به تقاضای ما اماده است ؟

 

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {

       .......

     }

}

 در صورت اماده بودن دستورات بازخوانی داده های مورد نظر ازفایل xml و نمایش انها با یک table روی صفحه وب را می نویسیم
 پس از این جا به بعد هرچه می گویم به ترتیب اموزش ،  درون دستور if بالا  نوشته خواهد شد
گام ششم - ایجاد کردن عنوان جدول خروجی
 سطر اول جدول را برای نمایش عنوان خروجیها ایجاد می کنیم
 البته دستوراتش را بصورت یک رشته در متغیر txt قرار می دهیم

 

 txt="<table border='1'><tr><th>Title</th><th>Artist</th></tr>";

 
گام هفتم - دریافت تمام تگ های cd و محتویات انها از فایل xml
 با استفاده از مدل dom و با فرمول زیر تمام تگ های cd و محتویات درون ان را از فایل xml خوانده در x قرار می دهیم
 از انجا که چندین تگ cd در فایل xml وجود دارد لذا x یک ارایه خواهد شد

 

x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");

 

 
گام هشتم - حلقه
 برای تمام Cd های یافت شده از فایل xml باید دستورات ایجاد سطر جدید در جدول و نمایش اطلاعات تگ های titile , artist موجود در تگ های Cd تکرار شود
 حلقه for :

 

for (i=0;i<x.length;i++)
      {

 length : تعداد خانه های ارایه x است 
 

 نکته مهم :

قبل از ادامه کار باید بگویم که ما الان نمی خواهیم جدولی که اطلاعات را نشان می دهد نشان دهیم

بلکه دستورات این جدول را به همراه اطلاعات مربوط به  titile , artist در یک رشته قرار می دهیم بعد از تمام شدن کار ، ان رشته را اجرا می کنیم

 تا این مرحله درون متغیر txt ، دستورا ایجاد سطر اول جدول بصورت عنوانی قرار گرفته بود
 حالا ما دستور ایجاد سطر جدید را به ان می افزائیم :

 

txt=txt + "<tr>";

گام نهم - استخراج مقدار تگ های title
خانه های ارایه x به  تمام تگ های cd اشارهمی کند
 می دانیم که درون تگ های cd تگ های titile قرار دارند
 حالا ارایه دیگری به نام xx ایجاد می کنیم
 که هر خانه ان به تگ title موجود در تگ های cd اشاره کند ( فقط به خود تگ نه به مقدار ان )

 

xx=x[i].getElementsByTagName("TITLE");

 

گام دهم - دستور try , catch
 دستور try : به ما اجازه میدهد بررسی کنیم ایا دستورات درون اکولاد باز و بسته اش بدون خطا اجرا می شوند یا نه
 دستور catch : در صورت بروز خطا در دستورات قسمت try ، دستورات قسمت catch اجرا خواهند شد
 
 حالا کاربرد این دو دستور در برنامه ما چه خواهد بود ؟
 ممکن است درون تگ های titile , artist هیچ مقداری وجود نداشته باشد
 لذا برای جلوگیری از بروز خطا از try , catch بصورت زیر استفاده می کنیم
 ما می خواهیم سلول جدیدی ایجاد شده و در ان مقدار node ای که نام ان title است از ارایه xx استخراج شده در این سلول قرار گیرد

 {

 

        try
          {
          txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
          }
        catch (er)
          {
          txt=txt + "<td>&nbsp;</td>";
          }

}

 
در صورتی که هیچ مقداری در دورن تگ titile نباشد قسمت catch اجرا شده و یک سلول با مقداری که برابر یک جای خالی است ایجاد می شود
 
 همین کار را برای تگ artist تکرار می کنیم

 

xx=x[i].getElementsByTagName("ARTIST");
      {
        try
          {
          txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
          }
        catch (er)
          {
          txt=txt + "<td>&nbsp;</td>";
          }
        }

گام دهم
حالا تگ ها و اکولاد باز حلقه for را می بندیم

 

 txt=txt + "</tr>";
      }
    txt=txt + "</table>";

 

 
گام یازدهم - اجرای هر انچه در txt است
 در بدنه body برنامه
 یک تگ div داشتیم که مقدار id ان برابر txtCDInfo است
 درون ان با یک دستور html  دکمه ای قرار دادیم
 با فشردن این دکمه دستورات تابع بالا انجام می شود
 در انتهای تابع ، هر انچه در txt است باید به جای دکمه ، در تگ div قرار گیرد
 پس دستور زیر را می نویسیم :

 

  document.getElementById('txtCDInfo').innerHTML=txt;

 
گام دوازدهم - پایان کار
 و در نهایت دستورات ارسال تقاضا و خاتمه دادن به ان

 

}
  }
xmlhttp.open("GET",url,true);
xmlhttp.send();
}

 
 مشاهده و اجرای برنامه کامل