نحوه کار Ajax – آموزش Ajax

how ajax works 3077 تصویر

نحوه کار Ajax

در این بخش نحوه کار AJAX را به صورت مرحله به مرحله بررسی می کنیم.

مراحل یک عملیات AJAX

  • یک رویداد در سمت کاربر رخ می دهد.
  • یک شیء از نوع XMLHttpRequest ایجاد می شود.
  • شیء XMLHttpRequest پیکربندی می شود.
  • شیء XMLHttpRequest یک درخواست ناهمزمان (Asynchronous) را به وب سرور ارسال می کند.
  • وب سرور نتیجه درخواست را در قالب یک سند XML باز می گرداند.
  • شیء XMLHttpRequest تابع callback را فراخوانی می کند تا نتیجه دریافتی از سرور را پردازش کند.
  • HTML DOM به روز می شود.

بیایید این مراحل را یکی پس از دیگری انجام دهیم.

یک رویداد در سمت کاربر رخ می دهد

  • یک تابع جاوا اسکریپت به عنوان نتیجه رخداد یک رویداد فراخوانی می شود.
  • مثال: تابع validateUserId() به عنوان یک پردازنده رویداد onkeyup برای یک فیلد ورودی با شناسه “userid” تنظیم شده است.
  • <input type = “text” size = “20” id = “userid” name = “id” onkeyup = “validateUserId();”>

یک شیء از نوع XMLHttpRequest ایجاد می شود

شیء XMLHttpRequest پیکربندی می شود

در این مرحله، یک تابع ایجاد می کنیم که توسط رویداد onkeyup فراخوانی می شود و یک تابع نیز برای پردازش نتیجه دریافتی از سمت وب سرور ثبت می کنیم.

ایجاد درخواست ناهمزمان (Asynchronous) به وب سرور

تابعی که در بالا سورس کد آن را مشاهده می کنید، مسئولیت ارسال درخواست به وب سرور را به عهده دارد و این کار را با استفاده از شیء ajaxRequest که از نوع XMLHttpRequest می باشد، انجام می دهد.

بخشی از کد بالا که با سرور کار می کند در کد زیر به صورت bold نشان داده شده است:

زمانی که شما در فیلد ورودی یک مقدار (مثلا ali) را وارد می کنید، تابع فوق فراخوانی می شود و یک درخواست به صورت “validate?id=ali” به سرور ارسال می شود.

وب سرور نتیجه درخواست را در قالب یک سند XML باز می گرداند

شما می توانید اسکریپت سمت سرور خود را در هر زبان پیاده سازی کنید، اما منطق آن باید به صورت زیر باشد:

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

مانند کد زیر:

فراخوانی تابع callback برای پردازش نتیجه دریافتی

شیء XMLHttpRequest که در بالا ایجاد کرده ایم، تابع processRequest() را زمانی فراخوانی می کند که وضعیت شیء به حالت readyState تغییر کند. اکنون این تابع، نتایج پاسخ سرور را دریافت می کند و در صورت لزوم پردازش مورد نیاز را بر روی آن انجام می دهد. در مثال زیر مقدار متغیر message بر اساس پاسخ دریافتی از سرور بر روی true یا false تنظیم می شود.

HTML DOM به روز می شود

این مرحله، مرحله آخر کار AJAX است و در آن صفحه HTML شما به روز می شود. به روز رسانی صفحه به صورت زیر اتفاق می افتد:

  • انتخاب عنصری که می خواهیم مقدار آن را به روز کنیم، با استفاده از تابع getElementById().

بعد از انتخاب عنصر، می توانید با استفاده از جاوا اسکریپت صفات آن را تغییر دهید.

مثال

اگر در درک هفت مرحله گفته شده مشکلی نداشته اید، تقریبا نحوه کار AJAX را یاد گرفته اید. در بخش بعدی XMLHttpRequest را با جئیات بیشتر بررسی خواهیم کرد.

ثبت نظر
ریفریش کنید!
نظرات کاربران (۰ مورد)

هیچ نظری ثبت نشده است