تعداد بازدید: 142

تکنولوژی ایجکس Ajax

ایجکس Ajax (Asynchronous JavaScript and XML) مجموعه ای از استانداردها و تکنولوژی های وب است که با استفاده از زبان جاوا اسکریپت می توان درخواست های ناهمگام با برنامه جاری ( بدون referesh شدن صفحه وب ) به سرور فرستاد و پاسخ دریافت کرد و در صورت نیاز روی صفحه وب اعمال کرد.

XMLHttpRequest

روال کار این است که با استفاده از شئ XMLHttpRequest درخواستی را به سرور ارسال می کنیم و در سرور با استفاده از پارامتر های ارسال شده یک پردازشی را انجام می دهیم و پاسخ را به کلاینت برمیگردانیم.

نمونه یک درخواست ایجکس را به صورت شماتیک می توانید در سایت ویکی پدیا مشاهده کنید. همان طور که می بینید در درخواست های معمولی (سمت چپ ) یک Http Request به صورت غیر ایجکسی ارسال شده و در درخواست سمت راست یک Http Request ایجکسی ارسال شده است .

نوع داده برگشتی در درخواست های ایجکسی نیز در دو تصویر متفاوت است. فرمت پاسخ ارسالی از سرور به کلاینت در ایجکس :

  • Text
  • XML
  • Json

نکته : ایجکس از جاوا اسکریپت استفاده می کند. پس برای برای استفاده از ایجکس باید جاوا اسکریپت مرورگر فعال باشد و همچنین مرورگر از کلاس XMLHttpRequest پشتیبانی کند.

ساختار اصلی یک درخواست ایجکس با استفاده از زبان جاوا اسکریپت و کلاس XMLHttpRequest به شکل زیر می باشد:

در کد بالا یک شئ از کلاس XMLHttpRequest ایجاد کردیم و با استفاده از متد open یک درخواست از نوع POST به مقصد ajax.php ارسال کردیم.

چون متد مورد استفاده ما POST است لذا و نیاز داریم تا پارامتر هایی به سرور ارسال کنیم. برای این کار باید نوع بدنه درخواست Http خود را در هدر ها تعیین کنیم. دستور سوم هدر Content-Type یا نوع بدنه درخواست را تعیین می کند.

در دستور بعدی با استفاده از متد send پارامتر ها ارسال می کنیم. در دستور آخر در زمان تغییر وضعیت شئ xht به آماده ( ready ) یک تابع را اجرا می کنیم که پارامتر ورودی آن پاسخ درخواست است.

ساختار handle کردن پاسخ در فایل سرور ajax.php به شکل زیر می باشد. همان طور که می بینید در پاسخ از فرمت text استفاده شده است.

نکته : با استفاده از تابع json_encode در پی اچ پی می توانید یک آرایه را به صورت یک شئ json به پاسخ درخواست ajax ارسال کنید :

xhr Properties

Property Description
onreadystatechange Stores a function (or the name of a function) to be called automatically each time the readyState property changes
readyState Holds the status of the XMLHttpRequest. Changes from 0 to 4:
0: request not initialized
1: server connection established
2: request received
3: processing request
4: request finished and response is ready
responseText Returns the response data as a string
responseXML Returns the response data as XML data
status Returns the status-number (e.g. “404” for “Not Found” or “200” for “OK”)
statusText Returns the status-text (e.g. “Not Found” or “OK”)
onreadystatechange = when state property change to ready = 4.

علاوه بر موارد فوق شئ xhr یک متد با نام abort دارد که برای لغو درخواست جاری استفاده می شود. این متد در jQuery Ajax نیز کاربرد دارد.

jQuery Ajax

کتابخانه jQuery نیز ساختار درخواست Ajax را به صورت ساده تری پیاده سازی کرده است ، در حقیقت jQuery نیز از شئ XMLHttpRequest استفاده می کند(XMLHttpRequest behind the scenes).

jQuery متدهایی را جهت استفاده از ایجکس در اختیار ما قرار می دهد . به طور مثال سه متد زیر برای ارسال درخواست از انواع مختلف درخواست های HTTP Verb می باشد.

  • $.ajax : ارسال درخواست به سرور . در این متد نوع درخواست در درون پارامتر های متد تعیین می گردد.
  • $.get : ارسال درخواست به صورت GET.
  • $.post : ارسال درخواست به صورت POST .

در زیر نمونه ای از یک درخواست ajax با استفاده از متد ajax می باشد :

این متد یک شئ دریافت می کند که هر کلید از آن می تواند یک مقدار یا تابع دریافت کند. بدین شکل ما یک درخواست با متد post به سرور ارسال می کنیم.

beforeSend مربوط به زمانی است که درخواست ارسال شده ولی پاسخی دریافت نشده. success مربوط به زمانی است که پاسخ با موفقیت دریافت شده است. error مربوط به زمانی است که پاسخ با شکست رو به رو شده (‌به هر دلیلی از جمله timeout خطا در سرور … )data به صورت یک شئ به سرور ارسال گردیده است. url هم آدرس جایی است که قرار است درخواست با پارامتر های خود به آن ارسال شود ( همان سرور دریافت کننده درخواست که پاسخ می دهد )

در کد بالا درخواست را در متغیر Req ریختیم که متد هایی دارد و می توان در پارامتر های از نوع تابع در شئ استفاده کرد. به طور مثال با استفاده از متد abort می توانیم از درخواست صرف نظر کنیم. ( Req.abort ).

تابع serialize : با استفاده از این تابع می توانیم پارامتر های یک فرم را به صورت کامل به سرور بفرستیم و در سرور تمامی پارامتر های فرم را در متغیر $_POST داشته باشیم.

$.get : نمونه ای از درخواست به سرور :

متد done همان success و متد always مربوط به زمان اتمام درخواست و متد fail همان error می باشد.

$.post : نمونه ای از درخواست post به سرور :

در کنار افزونه curl , form با استفاده از جاوا اسکریپت (‌ شئ XMLHttpRequest ) نیز می توان درخواست هایی در متدهای http متفاوت درخواست هایی به سرور یا وب سرویس ها ارسال کرد و نتیجه را دریافت کرد.

مطالب مشابه

Ecma Script 6 یا جاوا اسکریپت ۶

نسخه ای زبان جاوا اسکریپت که از استاندارد های بین المللی ecma استفاده می کند را ecma script می نامیم. نمی توان ecma...

اشتراک گذاری :

مدیر وب سایت گنوتک . برنامه نویسی رو با زبان C در هفده سالگی شروع کردم . در حال حاضر به برنامه نویسی php برپایه معماری MVC , HMVC و همچنین سیستم مدیریت محتوای WordPress و فریم ورک محبوب لاراول علاقه مند هستم و دوست دارم اطلاعاتم رو با شما به اشتراک بگذارم.

۰ دیدگاه برای تکنولوژی ایجکس Ajax

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *