معرفی AJAX (AJAX Intro)
در این صفحه یک معرفی AJAX خیلی ساده می بینی. می فهمی چطور بدون رفرش کل صفحه، فقط یک بخش عوض شود و کاربر تجربه روان تری داشته باشد.
معرفی AJAX در jQuery
AJAX یعنی Asynchronous JavaScript and XML. یعنی مرورگر می تواند در پس زمینه با سرور حرف بزند و داده بگیرد، بدون اینکه کل صفحه دوباره لود شود.
وقتی از معرفی AJAX حرف می زنیم، منظور روشی است که فقط یک قسمت صفحه را آپدیت می کند؛ مثلاً فقط لیست پیام ها را تازه می کند، نه هدر و فوتر را.
سایت هایی مثل Gmail، Google Maps، YouTube و تب های Facebook از همین ایده استفاده می کنند تا صفحه یک دفعه عوض نشود و حس اپلیکیشن موبایل بدهند.
ایده اصلی معرفی AJAX
در معرفی AJAX همیشه دو کار اصلی داریم. یک، ارسال درخواست به سرور. دو، گرفتن پاسخ و نمایش آن در بخشی از صفحه.
همه این کارها بدون رفرش شدن کامل صفحه انجام می شود. پس کاربر وسط کارش گم نمی شود و دکمه ها و اسکرول همان جا می مانند.
- کاربر روی یک دکمه یا لینک کلیک می کند.
- جاوااسکریپت یک درخواست AJAX به سرور می فرستد.
- سرور جواب می دهد و فقط یک بخش صفحه به روزرسانی می شود.
در مثال صفحه منبع، داخل یک div متنی داریم و یک دکمه. وقتی روی دکمه کلیک می شود، محتوای div با محتوای خارجی عوض می شود.
چرا jQuery برای AJAX راحت تر است؟
خود AJAX در مرورگرها کمی دردسر دارد؛ چون هر مرورگر ممکن است نحو متفاوتی برای ساختن درخواست داشته باشد.
jQuery این تفاوت ها را پنهان می کند. یعنی به جای نوشتن کدهای طولانی برای مرورگرهای مختلف، یک دستور ساده jQuery می نویسی و کار انجام می شود.
نکته: تیم jQuery زحمت هماهنگ کردن مرورگرها را کشیده است. تو فقط با متدهای آماده AJAX کار می کنی و تمرکزت روی منطق برنامه می ماند.
jQuery و انواع داده در AJAX
با متدهای AJAX در jQuery می توانی از سرور متن ساده، HTML، XML یا JSON بگیری. JSON یک فرمت متنی شبیه آبجکت های جاوااسکریپت است و برای فرانت اند خیلی دوست داشتنی است.
jQuery می تواند این داده ها را مستقیم داخل المنت های HTML قرار بدهد. مثلاً پاسخ را در یک div، یک لیست یا حتی داخل یک جدول نمایش دهد.
همچنین می توانی با درخواست های HTTP GET و POST کار کنی. GET بیشتر برای گرفتن داده است و POST بیشتر برای ارسال فرم ها و اطلاعات حساس تر استفاده می شود.
نمونه عملی معرفی AJAX با jQuery
در صفحه منبع یک مثال ساده می بینی: یک div که نوشته داخلش قرار است عوض شود و یک دکمه که محتوای خارجی را می آورد.
گام ها را این طور تصور کن:
- کاربر صفحه را باز می کند و متن اولیه را می بیند.
- روی دکمه «Get External Content» کلیک می کند.
- jQuery در پس زمینه به سرور درخواست می زند و جواب را داخل همان div می گذارد.
برای دیدن کد کامل و امتحان کردن مثال، می توانی روی لینک مشاهده در ادیتور کلیک کنی و کد را مستقیم در مرورگر اجرا کنی.
ارتباط معرفی AJAX با بقیه درس های jQuery
قبل از معرفی AJAX بهتر است انتخاب المنت ها و پیمایش DOM را بلد باشی. چون معمولاً نتیجه AJAX را می خواهی در یک المنت دقیق در صفحه قرار بدهی.
اگر هنوز بخش فیلتر کردن (Filtering) یا خواهر و برادرها (Siblings) را خوب تمرین نکرده ای، پیشنهاد می کنم آن ها را هم مرور کنی.
این صفحه معرفی AJAX شروع کار است. در ادامه می توانی به درس متد load در jQuery بروی و ببینی چطور محتوای خارجی را مستقیماً به المنت ها تزریق کنی.
اگر دوست داری مفهوم کلی AJAX را عمیق تر بشناسی، آموزش AJAX در W3Schools هم منبع خوبی است.
جمع بندی سریع
- معرفی AJAX یعنی فهمیدن به روزرسانی بخش های صفحه بدون رفرش کامل.
- با jQuery می توانی متن، HTML، XML یا JSON را از سرور بگیری.
- jQuery دردسر تفاوت مرورگرها در AJAX را برایت حل می کند.
- سایت هایی مثل Gmail و Google Maps از ایده AJAX استفاده می کنند.
- این صفحه شروع کار است؛ بعدش سراغ متد load و متدهای دیگر برو.