ajax چگونه کار میکند؟

AJAX استانداردهایی دارد که توسط توسعه دهندگان به مدت چندین سال استفاده شده اند. چگونگی استفاده از این استانداردها و نیز چگونگی ارسال درخواست بوسیله آژاکس و پاسخ از طرف سرور به این صورت است:
♦ AJAX - ایجاد یک شی XMLHttpRequest
گامی مهم از AJAX، شی ء XMLHttpRequest است. همه مرورگرهای مدرن این شی را ساپورت میکنند ( IE5 و IE6 از ActiveXObject استفاده میکنند) . شی XMLHttpRequest برای تبادل اطلاعات با سرور در پشت صحنه استفاده میشود، این یعنی ممکن است بخش هایی از یک صفحه وب بدون بارگذاری مجدد کل صفحه، به روز رسانی شوند.
تمام مرورگرهای مدرن (+IE7 ، فایرفاکس، کروم، سافاری و اپرا) یک شی XMLHttpRequest توکار دارند. دستور ایجاد این شی بصورت زیر است:
نسخه های قدیمی اینترنت اکسپلورر (IE5 و IE6) از شی ActiveX استفاده میکنند:
برای مدیریت تمام مرورگرهای مدرن ، از جمله IE5 و IE6 ، چک کنید که اگر مرورگر از شی XMLHttpRequest حمایت میکند، شی XMLHttpRequest را ایجاد کنید، وگرنه شی ActiveX ایجاد کنید:
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
♦ AJAX - ارسال درخواست به سرور
برای ارسال درخواست به سرور ما از متدهای ()open و ()send از شی XMLHttpRequest استفاده میکنیم:
xmlhttp.send();
• تابع (open(method,url,async :
نوع درخواست و url را تعیین میکند و اینکه درخواست به صورت غیر همزمان به کار گرفته شود یا نه.
method : نوع درخواست: GET یا POST
URL : محل فایل بر روی سرور
true : async (آسنکرون) یا false (همزمان)
• تابع (send(string :
درخواست را برای سرور میفرستد.
string : فقط برای درخواست های POST استفاده می شود.
GET یا POST ??
GET ساده تر و سریع تر از POST است، و می تواند در بسیاری از موارد استفاده شود. با این حال در موارد زیر از POST استفاده کنید:
• فایل ذخیره سازی یک گزینه نیست ( به روز رسانی یک فایل یا پایگاه داده بر روی سرور)
• ارسال مقدار زیادی از داده ها به سرور (POST محدودیت اندازه ندارد)
• ارسال ورودی کاربر ( که میتواند شامل حروف ناشناخته باشد) ، POST خیلی قوی تر و امن تر از GET است.
یک درخواست ساده GET :
xmlhttp.send();
اگر میخواهید برای ارسال اطلاعات از روش GET استفاده کنید، اطلاعات را به URL اضافه کنید :
xmlhttp.send();
یک درخواست POST :
xmlhttp.send();
URL - فایلی روی سرور :
پارامتر url از تابع ()open ، آدرس فایلی روی سرور میباشد. فایل میتواند از هر نوعی مثل txt. و xml. یا فایل های اسکریپت نویسی سرور مانند asp. و یا php. باشد (که میتواند اقداماتی روی سرور قبل از بازگرداندن پاسخ انجام دهد.)
آسنکرون - true یا false :
AJAX مخفف Asynchronous JavaScript and XML است و برای اینکه شی XMLHttpRequest بعنوان AJAX عمل کند ، باید پارامتر async در متد ()open بصورت true تنظیم شود. ارسال درخواست ناهمزمان بهبود عظیمی برای توسعه دهندگان وب است. بسیاری از وظایفی که بر روی سرور اجرا میشوند بسیار وقت گیر هستند. قبل از ajax، این عملیات میتوانست منجر به متوقف شدن و یا هنگ کردن برنامه شوند.
با AJAX، لازم نیست جاوا اسکریپت منتظر پاسخ سرور بماند، میتواند به جای آن:
• در حالیکه منتظر پاسخ سرور است، دیگر اسکریپت ها را اجرا کند
• زمانیکه پاسخ آماده شد، با پاسخ مقابله کند
♦ AJAX - پاسخ سرور
برای دریافت پاسخ از سرور، از صفت responseText یا responseXML از شی XMLHttpRequest استفاده کنید.
• responseText : اطلاعات پاسخ را به عنوان یک رشته برمیگرداند و شما میتوانید بر این اساس از آن استفاده کنید:
• responseXML : اگر پاسخ دریافتی از سرور XML است و شما میخواهید آنرا بعنوان یک شی XML تجزیه کنید از این صفت استفاده کنید :
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i
{
txt=txt + x[i].childNodes[0].nodeValue + "
";
}
document.getElementById("myDiv").innerHTML=txt;