در این بخش ازمقالات طراحی سایت در قسمت آموزش Ajax می خواهیم ساختار Ajax را توضیح دهیم.
همانطور که از معنی اسم ای جکس پیداست این فناوری از جاوا اسکریپت و xml تشکیل شده است . برای راحتی درک و ساختار ای جکس ابتدا مثالی را بیان می کنیم.در این مثال از تگ div و دکمه ی فرمان button در یک صفه اچ تی ام ال استفاده می کنیم و می خواهیم پس از کلیک کاربر بر روی دکمه ی فرمان متن جدید آن از سرور دریافت شده و به روز رسانی شود. به مثال توجه نمایید:
< 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 در جدول زیر قرار داده شده است .
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();
}
در مقالت بعدی طراحی سایت اطلاعات تکمیلی بیشتری را در زمینه طراحی سایت در اختیار شما کاربران عزیز قرار خواهیم داد.