AJAX (AJAX Reference)

اینجا رفرنس متدهای AJAX در jQuery را داریم؛ یعنی لیستی از توابعی که کمک می کنند بدون رفرش کل صفحه، با سرور حرف بزنیم و فقط یک بخش از صفحه را به روزرسانی کنیم. وقتی می گوییم AJAX در jQuery یعنی همین گفت وگوی پشت صحنه با سرور.

AJAX در jQuery چیست؟

AJAX یعنی «فرستادن و گرفتن داده از سرور بدون رفرش صفحه». در jQuery متدهای AJAX این کار را برایت ساده می کنند. مثلا می توانی نمره های دانش آموزان را بفرستی و فقط جدول نمره ها را به روزرسانی کنی، نه کل صفحه را.

این رفرنس فقط اسم متدها و کارشان را لیست می کند. برای آموزش قدم به قدم بهتر است بعدا سراغ صفحه های آموزشی مثل AJAX در jQuery بروی تا مثال های بیشتری ببینی.

متدهای اصلی درخواست AJAX

در این جدول چند متد اصلی برای فرستادن درخواست به سرور داریم.

$.ajax() یک درخواست AJAX غیرهم زمان می فرستد؛ همه کاره و قابل تنظیم است.
$.get() داده را با روش HTTP GET می گیرد؛ مناسب گرفتن اطلاعات ساده.
$.post() داده را با روش HTTP POST می فرستد؛ برای فرم ها خیلی کاربردی است.
$.getJSON() داده JSON را با GET می گیرد؛ JSON یک فرمت متنی برای تبادل داده است.
$.getScript() یک فایل جاوااسکریپت را لود و همان جا اجرا می کند.
load() داده را می گیرد و مستقیم داخل یک عنصر صفحه می ریزد.

نکته: معمولا برای کارهای روزمره از $.get()، $.post()، $.getJSON() و load() استفاده می شود و $.ajax() برای تنظیمات پیچیده تر است.

تنظیمات و کنترل رفتار AJAX

چند متد دیگر هستند که روی رفتار کلی AJAX در jQuery تاثیر می گذارند.

$.ajaxSetup() مقادیر پیش فرض برای همه درخواست های AJAX آینده را تنظیم می کند.
$.ajaxPrefilter() قبل از هر درخواست، تنظیمات را بررسی و اصلاح می کند.
$.ajaxTransport() مسئول بخش انتقال واقعی داده در پشت صحنه است.
$.param() یک آبجکت یا آرایه را به رشته querystring تبدیل می کند.
$.parseJSON() نسخه قدیمی برای تبدیل رشته JSON به مقدار جاوااسکریپتی است و در نسخه 3 منسوخ شده است.

هشدار: طبق رفرنس، به جای $.parseJSON() باید از JSON.parse() استاندارد جاوااسکریپت استفاده کنی.

رویدادهای سراسری AJAX در jQuery

گاهی می خواهی قبل، بعد یا هنگام خطا در تمام درخواست های AJAX کاری انجام دهی. این متدها برای همین هستند.

ajaxStart() وقتی اولین درخواست AJAX شروع می شود اجرا می شود.
ajaxSend() درست قبل از ارسال هر درخواست اجرا می شود.
ajaxSuccess() وقتی یک درخواست موفق تمام می شود اجرا می شود.
ajaxError() وقتی درخواست با خطا تمام می شود اجرا می شود.
ajaxComplete() بعد از تمام شدن هر درخواست، چه موفق چه خطا، اجرا می شود.
ajaxStop() وقتی همه درخواست های AJAX تمام شدند اجرا می شود.

مثلا می توانی با این رویدادها یک لودر سراسری بسازی؛ وقتی درخواست شروع شد، لودر نشان بده و وقتی ajaxStop() رخ داد، لودر را مخفی کن.

کار با فرم ها: serialize و serializeArray

برای فرستادن فرم با AJAX باید داده ها را به شکل مناسب تبدیل کنی. این دو متد دقیقا برای همین هستند.

serialize() همه فیلدهای فرم را به یک رشته مناسب ارسال می کند.
serializeArray() همان فیلدها را به یک آرایه از name و value تبدیل می کند.

مثلا در یک فرم ثبت نام مدرسه می توانی با serialize() همه فیلدها را به صورت رشته برای $.post() بفرستی. یا با serializeArray() ابتدا ساختار دقیق تری از داده ها ببینی.

مثال ساده AJAX در jQuery

در این مثال با استفاده از serialize() فرم را جمع می کنیم و با $.post() برای سرور می فرستیم. نتیجه هم در یک دیو نمایش داده می شود.

$("#scoreForm").on("submit", function(event) {
  event.preventDefault();
  var formData = $(this).serialize();
  $.post("/api/save-score", formData, function(response) {
    $("#result").text(response.message);
  });
});

مشاهده در ادیتور

در این کد از رویداد submit فرم استفاده کردیم. با event.preventDefault() جلوی رفرش صفحه را گرفتیم. سپس داده های فرم را با serialize() تبدیل کردیم و با $.post() برای سرور فرستادیم. جواب سرور هم در عنصر #result نشان داده شد.

گام های تمرین برای AJAX در jQuery

برای تمرین AJAX در jQuery این سه گام ساده را امتحان کن.

یک فرم ساده با دو فیلد در صفحه بساز.
با serialize() داده ها را در کنسول چاپ کن تا شکل رشته ای را ببینی.
بعد آدرس یک API تستی بگذار و با $.post() داده را ارسال کن.

نکته: هنگام آزمایش روی API حواست باشد از آدرس های امن یا سرویس های تست مثل mock API استفاده کنی تا داده حساس نفرستی.

اتصال AJAX به بقیه رفرنس های jQuery

معمولا همراه AJAX در jQuery، از پیمایش عناصر هم استفاده می شود. برای پیدا کردن و به روزرسانی بخش های مختلف صفحه می توانی سراغ رفرنس پیمایش (Traversing Reference) بروی.

همچنین بعد از دریافت داده از سرور، برای تغییر HTML و ظاهر صفحه از متدهای صفحه HTML/CSS (HTML/CSS Reference) کمک بگیر. ترکیب این سه بخش یعنی انتخاب، پیمایش و AJAX باعث می شود رابط های کاربری پویا بسازی.

اگر توضیح جداگانه برای متد load() می خواهی، صفحه AJAX در jQuery می تواند آموزش کامل تری نسبت به این رفرنس خلاصه به تو بدهد.

جمع بندی سریع

AJAX در jQuery یعنی صحبت با سرور بدون رفرش کامل صفحه.
$.get()، $.post()، $.getJSON() و load() مهم ترین متدهای روزمره هستند.
$.ajaxSetup() و $.ajaxPrefilter() رفتار پیش فرض همه درخواست ها را کنترل می کنند.
رویدادهای ajaxStart() تا ajaxStop() برای لودرها و مدیریت وضعیت کلی کاربرد دارند.
serialize() و serializeArray() بهترین ابزار برای فرستادن فرم با AJAX هستند.

قبلی: پیمایش (Traversing Reference) بعدی: متفرقه (Misc Reference)

فهرست سرفصل‌های jQuery

jQuery — AJAX (AJAX Reference)