آموزش جاوا اسکریپت – Ajax در جاوا اسکریپت

آموزش جاوا اسکریپت

در این بخش از سری آموزش جاوا اسکریپت قصد داریم به شما نحوه پیاده سازی Ajax در جاوا اسکریپت را آموزش بدیم.

 

ایجکس (Ajax) چیست؟

Ajax مخفف Asynchronous Javascript And Xml است که به معنای بارگذاری داده ها از سرور و بروزرسانی بخش هایی از صفحه وب بصورت انتخابی بدون لود مجدد کل صفحه وب است.

به زبان ساده, Ajax در جاوا اسکریپت مرورگر را مجبور به استفاده از شیٔ XMLHttpRequest (XHR) برای ارسال و دریافت اطلاعات از وب سرور بصورت غیرهمزمان (asynchronously) در پشت صحنه, بدون بلاک کردن صفحه یا ایجاد تداخل در رابط کاربری است.

Ajax آنقدری محبوب است که به سختی می توانید یک اپلیکیشن را پیدا کنید که در بعضی از قسمت ها از Ajax استفاده نکرده باشد. این مثال در مقایس های بزرگ اپلیکیشن های آنلاین می تواند : Gmail, Google Maps, Google Docs, YouTube, Facebook, Flickr و … بسیاری از اپ های دیگر.

نکته: Ajax یک تکنولوژی جدید نیست. در واقع, ایجکس در کل واقعا یک تکنولوژی نیست. Ajax فقط یک اصطلاح برای شرح فرایند تبادل داده از وب سرور بصورت غیرهمگام با جاوا اسکریپت بدون رفرش صفحه است.

نکته ۲: واژه x در Ajax را با بطور مثال XML اشتباه نگیرید. اینجا فقط بحث زمان مطرح است. چرا که فرمت های تبادل داده ای مثل JSON یا HTML یا متن ساده نیز می تواند به جای XML استفاده شود.

 

Ajax در جاوا اسکریپت چطور کار می کند

برای ایجاد ارتباط Ajax , جاوا اسکریپت از یک شیٔ در مرورگر به نام XMLHttpRequest استفاده می کند که باعث ارسال درخواست های HTTP به سمت سرور و دریافت داده ها در پاسخ (response) می شود.

همه مرورگر های مدرن و IE7+ از شیٔ XMLHttpRequest پشتیبانی می کنند.

تصویر زیر نحوه کار ارتباط AJAX را نشان می دهد.

از آنجا که درخواست های Ajax معمولا غیرهمزمان هستند, اجرای اسکریپت به محض ارسال درخواست ایجکس, ادامه می یابد. بنابراین اجرای اسکریپت تا زمانی که پاسخ دریافت شود, متوقف نخواهد شد.

در بخش زیر در مورد هر یک از فرایندهایی که با آن کار خواهیم کرد, بحث می کنیم.

ارسال درخواست و دریافت پاسخ

قبل از ایجاد ارتباط Ajax بین سرور و کلاینت, اولین کاری که باید انجام بدید این است که یک نمونه از شیٔ XMLHttpRequest بسازید.

حالا, در مرحله بعدی ارسال درخواست به سرور, ایجاد یک درخواست جدید با متد open() از شیٔ XMLHttpRequest است.

متد open() معمولا دو پارامتر دریافت می کند – نوع درخواست HTTP که می تواند GET, POST ,..  باشد و دومی نیز آدرس URLی که قصد ارسال درخواست را دارید.

نکته: فایل می تواند هر نوعی مثل .text, .xml یا اسکریپت های تحت سرور مثل .php, .asp باشد که بعضی عملیات را روی سرور انجام دهد (اضافه یا خواندن داده از دیتابیس)

در نهایت از متد send() برای ارسال درخواست به سرور استفاده می کنیم.

نکته: متد send() یک پارامتر اختیاری body که به شما اجازه می دهد بدنه درخواست را مشخص کنید, دریافت می کند. در درجه اول چون درخواست های GET بدنه درخواست ندارند, پس برای درخواست های POST استفاده می شود.

متد GET معمولا برای ارسال حجم کمی از اطلاعات به سرور استفاده می شود درحالی که متد POST برای ارسال حجم زیادی از داده ها مثل داده فرم ها استفاده می شود.

در متد GET داده به عنوان پارامترهای URL ارسال می شود اما در متد POST داده ها به عنوان بدنه درخواست ارسال می شود پس در URL مرورگر قابل نمایش نیستند.

آموزش زیر را برای مقایسه دو متد POST و GET با جزییات مطالعه کنید :

https://netparadis.com/post-get-variables-php

در بخش زیر نگاهی دقیق تر به نحوه کار درخواست های Ajax می اندازیم.

 

اجرای درخواست GET ایجکس

درخواست GET معمولا برای دریافت یا بازیابی بعضی اطلاعات از سمت سرور که نیاز به دستکاری یا ایجاد تغییر در دیتابیس نیست, استفاده می کنیم. برای مثال, دریافت نتایج جستجو, دریافت اطلاعات کاربر بر اساس id یا نام و … .

مثال زیر به شما نحوه ارسال درخواست GET برای Ajax در جاوا اسکریپت را نشان می دهد:

زمانی که درخواست غیرهمزمان است, متد send() سریعا یک مقدار را بعد از ارسال درخواست (request) برگشت می دهد.

از این رو, شما باید قبل از پردازش آن بررسی کنید که پاسخ در حال حاضر کجای چرخه حیات قرار دارد که اینکار با خصوصیت readyState از شیٔ XMLHttpRequest انجام می شود.

readyState یک مقدار عددی است که وضعیت درخواست HTTP را مشخص می کند. همچنین, تابع اختصاص داده شده به هندلر رویداد onreadystatechange در هربار تغییر خصوصیت readyState صدا زده می شود.

مقادیر احتمالی خصوصیت readyState در زیر خلاصه شده اند.

ValueStateDescription
۰UNSENTAn XMLHttpRequest object has been created, but the open() method hasn’t been called yet (i.e. request not initialized).
۱OPENEDThe open() method has been called (i.e. server connection established).
۲HEADERS_RECEIVEDThe send() method has been called (i.e. server has received the request).
۳LOADINGThe server is processing the request.
۴DONEThe request has been processed and the response is ready.

نکته: از نظر تئوری رویداد readystatechange در هر بار تغییر خصوصیت readyState اجرا شود اما بیشتر مرورگرها زمانی که readyState به ۰ یا ۱ تغییر می کنند, این رویداد را ایجاد نمی کنند. به هر حال تمام مرورگرها این رویداد را زمانی که readyState به ۴ تغییر می کند, اجرار می کنند.

خصوصیت status یک مقدار عددی کد وضعیت HTTP را از پاسخ XMLHttpRequest برگشت می دهد.

بعضی از این کدهای معمول بصورت زیر هستند.

  • ۲۰۰ – OK . درخواست با موفقیت در سرور پردازش شد.
  • ۴۰۴ – Not Found . سرور نمی تواند صفحه درخواستی را پیدا کند.
  • ۵۰۳ – Service Unavailable . سرور بصورت موقت غیر قابل دسترس است.

برای دیدن لیست کامل می توانید مقاله کد وضعیت HTTP را مطالعه کنید

کد greet.php ما به سادگی یک نام کامل از اتصال نام و نام خانوادگی ایجاد و پیام خوش آمد گویی را برگشت می دهد.

 

اجرای درخواست POST ایجکس

متد POST اساسا برای ارسال داده های فرم به سمت وب سرور استفاده می شود.

مثال زیر به شما نحوه ارسال (submit) داده های فرم به سمت سرور را با Ajax در جاوا اسکریپت نشان می دهد.

اگر از آبجکت FormData برای ارسال داده ها استفاده نکنید. برای مثال, اگر داده ها را در فرمت query string مثل request.send(key1=value1&key2=value2) ارسال کنید, پس نیاز است که هدر درخواست را با متد setRequestHeader() بصورت زیر مشخص کنید :

متد setRequestHeader() باید بعد از open() و قبل از send() استفاده کنید.

بعضی از هدرهای درخواست معمول :

application/x-www-form-urlencoded, multipart/form-data, application/json, application/xml, text/plain, text/html

نکته: شیٔ FormData یک راه آسان برای ایجاد جفت کلید/مقدار برای نمایش فیلدهای فرم و مقادیر آنها که می توانند با متد XMLHttpRequest.send() ارسال شوند, ارایه می دهد.

کد فایل confirmation.php مقادیر ارسال شده توسط کاربر را در خرورجی برگشت می دهد.

بنابر دلایل امنیتی, مرورگرها اجازه ارسال درخواست های Ajax بین دامنه ها را نمی دهند. به این معنا که فقط می توانید یک درخواست Ajax را از آدرس های URL همان دامنه به عنوان صفحه اصلی ارسال کنید.

برای مثال, اگر اپلیکیشن شما روی دامنه “mysite.com” در حال اجرا است, نمی توانید یک درخواست ایجکس را از دامنه mysite.com به othersite.com یا هر دامنه دیگر ارسال کنید که به عنوان قانون same origin شناخته می شود.

به هر حال, می توانید تصاویر, استایل ها, فایل های JS و دیگر منابع را از هر دامنه ای لود کنید.

نکته: متد های Ajax در جی کویری را هم می توانید برای پیاده سازی سریع ایجکس بررسی کنید. فریمورک jQuery متدهای راحتی را برای پیاده سازی قابلیت Ajax ارایه داده است.

 

امیدواریم در این بخش آموزش جاوا اسکریپت, از آموزش Ajax در جاوا اسکریپت نهایت استفاده را برده باشد.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.

حسن شفیعی علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
مطالب زیر را حتما بخوانید
دیدگاه کاربران (۳)

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

  1. حسین ۳ آبان ۱۳۹۸

    سلام استاد شفیعی خسته نباشید. درجاوااسکریپت کدی هست است که بتونم شمارنده تعداد کلیک رو که با متغیر سشن ذخیره میکنه با هر بار کلیک دریک فایل tex ذخیره کنیم (درمرورگرذخیره نشه) ونتیجه رو از فایل نشون بدیم.

    پاسخ
    1. حسن شفیعی ۸ آبان ۱۳۹۸

      سلام. بفرمایید کد آماده این مورد :

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

      پاسخ
      1. حسین ۸ آبان ۱۳۹۸

        خیلی متشکرم از لطف شما

        پاسخ
دوره های آموزشی