ر این بخش قصد داریم تا با اراثه یک مثال ساده از دستورات Ajax و نمایش خروجی واقعی آن ، شما را با ساختار کلی این تکنیک و نحوه عملکرد آن آشنا نماییم .
در مثال زیر ، یک صفحه ساده HTML داریم که در آن یک تگ < div > و یک دکمه فرمان button قرار دارد .
تگ < div > در ابتدا یک متن را نمایش می دهد و قصد داریم کاری کنیم تا پس از کلیک کاربر بر روی دکمه فرمان ، متن جدید آن از سرور دریافت شده و به روز رسانی شود .
کد موجود در صفحه HTML به صورت زیر است :

 

 

 < html >< head >
< script type = ” text/javascript ” >
function loadXMLDoc ( )
{
…. کد ها و دستورات Ajax در اینجا قرار می گیرد …
}
< /script >
< /head >< body >
< div id=”myDiv” >
متن این قسمت را با Ajax تغییر دهید
< /div >
< button type=”button” onclick=” loadXMLDoc() “ > Change Content < /button >
< /body >< /html >

ر کد بالا ، هنگامی که کاربر بر روی دکمه فرمان کلیک می نماید ، تابع ( ) loadXMLDoc   که کد آن در بخش < head > صفحه قرار دارد ، فراخوانی و اجرا شده و یک درخواست را به سرور ارسال می کند .  سرور درخواست را دریافت کرده و آن را پردازش می کند . سپس خروجی تولید شده را به صفحه بر می گرداند . مرورگر این خروجی را دریافت کرده و محتویات تگ < div > را تغییر داده و به روز رسانی می کند .

کد تابع ( ) loadXMLDoc  در جدول زیر قرار داده شده است . در قسمت بعدی ، به تشریح و آموزش نوشتن این دستورات خواهیم پرداخت .

 function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest();
}
else
{
// code for IE6, IE5 xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById(“myDiv”).innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open(“GET”,”ajax_info.txt”,true);
xmlhttp.send();
}