در کد نویسی سنتی جاوا اسکریپت, در صورتی که قصد داشته باشد از دیتابیس و یا فایلی بر روی سرور اطلاعات بگیرید, و یا ارسال اطلاعات کاربر به سرور, شما می بایست برای ارسال اطلاعات به دو روش get و post فرم طراحی می نمودید. و کاربر مجبور بود بر روی کلید ارسال کلیک نماید تا اطلاعات ارسال گردد, و منتظر پاسخ سرور باقی می ماند, و سپس صفحه جدید با نتایج لود می شود.
زیرا زمانی که کاربر بر روی کلید ارسال کلیک می نماید صفحه جدید باز می شود, طراحی سایت سنتی مدت زمان بیشتری را از کاربر می گرفت و مورد پسند کاربران نیز نبود. توسط ajax سایت توسط javascript به صورت مستقیم با سرور در ارتباط می باشد, که این کار از طریق آبجکت JavaScript XMLHttpRequest انجام می شود.
با یک درخواست HTTP, صفحه وب سایت می تواند درخواست خود را ارسال نماید, و سپس از وب سرور پاسخ بگیرد, بدون نیاز به بارگذاری مجدد صفحه. کاربر در همان صفحه اول باقی می ماند, و کاربر متوجه این موضوع نخواهد گردید که در پس زمینه برنامه در حال انجام است.
تصویر زیر نحوه عملکرد Ajax را نمایش می دهد:
کاربر درخواستی را انجام می دهد و در پس زمینه فرآیندها انجام می شود و سپس در لایه ای به درخواست کاربر پاسخ داده می شود, که محعمولا توسط ID شناخته می شود, بدون لود کامل صفحه. به عنوان مثال یک لایه با این آی دی:
در مرحله بعدی ما می بینیم که چطور یک درخواست XMLHttpRequest ارسال می شود و پاسخ گرفته می شود.
1. ساخت XMLhttpRequest
مرورگرهای مختلف روش های متفاوتی برای ساخت XMLHttpRequest دارند. اینترنت اکسپلورر از ActiveXObject استفاده می نماید, در صورتی که سایر مرورگرها از XMLHttpRequest که تابع داخلی جاوا اسکریپت می باشد استفاده می نمایند.
برای آنکه این آبجکت ساخته شود و با مرورگرهای مختلف سازگاری کامل داشته باشد می بایست از “try and catch” استفاده نمایید.
function ajaxFunction()
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”);
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
catch (e)
{
alert(“Your browser does not support AJAX!”);
return false;
}
}
}
2. ارسال درخواست به سرور
برای ارسال درخواست به سرور, ما از متدهای open() و send() استفاده می نماییم.
متد open() سه آرگومان می پزیرد. ا.ولین آرگومان تعیین می نماید از چه روشی درخواست ارسال می گردد (GET یا POST). دومین آرگومان مکان اسکریپت را برای اجرا مشخص می نماید. سومین آرگومان مشخص می نماید درخواست چگونه می بایست اجرا شود. متد send() درخواست را به سرور ارسال می نماید.
xmlHttp.send(null);
3. نوشتن اسکریپت سمت سرور
responseText داده هایی که از سرور پاسخ داده می شود را نگهداری می نماید. در اینجا ما می خواهیم زمان حال را نمایش دهیم. کد سایت “time.php” چیزی است شبیه به این:
response.expires=-1
response.write(time)
%>
4. استفاده از پاسخ
سپس ما پاسخ را دریافت می کنیم و نمایش می دهیم.
{
if(xmlHttp.readyState==4)
{
document.myForm.time.value=xmlHttp.responseText;
}
}
xmlHttp.open(“GET”,”time.asp”,true);
xmlHttp.send(null);
}
5. کامل کردن کد
و شما می بایست تصمیم بگیرید چه زمانی AJAX اجرا می شود. در این مثال AJAX اجرا خواهید شد زمانی که کاربر در باکس متن تایپ می نماید. مثال در کد پایین می باشد:
<html>
<body>
<script type=”text/javascript”>
function ajaxFunction()
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”);
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);
}
catch (e)
{
alert(“Your browser does not support AJAX!”);
return false;
}
}
}
xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4)
{
document.myForm.time.value=xmlHttp.responseText;
}
}
xmlHttp.open(“GET”,”time.asp”,true);
xmlHttp.send(null);
}
</script>
<form name=”myForm”>
Name: <input type=”text”
onkeyup=”ajaxFunction();” name=”username” />
Time: <input type=”text” name=”time” />
</form>
</body>
</html>
نویسنده این مقاله Ahmad Balavipour می باشد که از سال 1381 تا کنون در زمینه طراحی و بهینه سازی وب سایت فعالیت دارد.
- ۹۶/۱۰/۰۳