بارگذاری با AJAX (Load)

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

تابع load در jQuery چیست؟

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

ساختار کلی تابع به شکل زیر است:

$(selector).load(URL, data, callback);

در این ساختار:

• selector: انتخاب کننده المنت هدف در صفحه است؛ مثلا #div1.
• URL: آدرس فایلی است که می خواهیم از سرور بخوانیم.
• data: داده های اضافی است، به صورت query string؛ مثل ?id=5.
• callback: تابعی است که بعد از تمام شدن درخواست اجرا می شود.

نکته: پارامترهای data و callback اختیاری هستند. یعنی می توانی فقط URL را بدهی و بقیه را حذف کنی.

مثال ساده از تابع load در jQuery

در فایل نمونه، یک فایل متنی به نام demo_test.txt داریم. داخل آن یک عنوان و یک پاراگراف است. حالا می خواهیم کل محتوای این فایل را داخل یک <div> با شناسه div1 در صفحه قرار دهیم.

$("#div1").load("demo_test.txt");

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

در این مثال:

• "#div1" المنت هدف را انتخاب می کند.
• "demo_test.txt" فایلی است که از سرور خوانده می شود.
• محتوای فایل، مستقیماً داخل <div id="div1"> قرار می گیرد.

این یعنی فقط همین بخش صفحه عوض می شود؛ بقیه صفحه ثابت می ماند. مثل این است که فقط متن داخل یک کارت را عوض کنیم، نه کل دفتر را.

بارگذاری بخشی از فایل با selector

گاهی لازم داریم فقط یک بخش از فایل را لود کنیم، نه کل آن را. در مثال منبع، داخل فایل demo_test.txt یک پاراگراف با شناسه p1 وجود دارد. می توانیم فقط همان پاراگراف را لود کنیم.

$("#div1").load("demo_test.txt #p1");

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

اینجا رشته آدرس شامل دو بخش است:

• demo_test.txt: فایلی که از سرور خوانده می شود.
• #p1: انتخاب کننده بخشی از محتوای فایل.

jQuery اول کل فایل را از سرور می گیرد. بعد فقط المنتی را که با #p1 هماهنگ است برمی دارد. در نهایت همان بخش را داخل #div1 قرار می دهد. این کار مثل این است که یک صفحه دفتر را بگیری و فقط یک جمله از آن را در دفتر خودت بنویسی.

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

کار با callback در تابع load در jQuery

پارامتر callback یک تابع است که بعد از تمام شدن درخواست AJAX اجرا می شود. یعنی وقتی داده از سرور آمد، می توانیم وضعیت را چک کنیم و به کاربر پیام بدهیم؛ مثلا بگوییم «موفق بود» یا «خطا رخ داد».

در مثال منبع، برای یک دکمه کلیک تعریف شده است. وقتی روی دکمه کلیک می کنی، فایل demo_test.txt لود می شود و بعد از آن، تابع callback وضعیت را بررسی می کند.

$("button").click(function() {
  $("#div1").load("demo_test.txt", function(responseTxt, statusTxt, xhr) {
    if (statusTxt == "success") {
      alert("External content loaded successfully!");
    }
    if (statusTxt == "error") {
      alert("Error: " + xhr.status + ": " + xhr.statusText);
    }
  });
});

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

در این تابع callback سه پارامتر مهم داریم:

• responseTxt: شامل محتوایی است که از سرور برگشته است.
• statusTxt: وضعیت درخواست را نگه می دارد؛ مثلا "success" یا "error".
• xhr: شیء اصلی XMLHttpRequest است که جزئیات فنی درخواست را دارد.

در مثال بالا، اگر وضعیت success باشد، یک alert با پیام موفقیت نشان داده می شود. اگر وضعیت error باشد، کد خطا و متن خطا نمایش داده می شود. این کار برای دیباگ کردن و فهمیدن مشکل درخواست خیلی کمک می کند.

نکته: می توانی در تابع callback به جای alert، محتوا یا استایل صفحه را هم عوض کنی. مثلا یک پیام خطا را داخل یک <div> مخصوص خطا نشان بدهی.

پارامتر data در تابع load

در متن منبع توضیح آمده که پارامتر data برای فرستادن داده های اضافی است. این داده ها به شکل جفت key/value در query string فرستاده می شوند؛ مثل وقتی که در آدرس می نویسی ?page=2&sort=asc. این کار برای فیلتر کردن یا صفحه بندی داده ها خیلی کاربردی است.

مثلا می توانی تصور کنی یک لیست محصولات داری. با پارامتر data می توانی به سرور بگویی «صفحه دوم محصولات، مرتب شده بر اساس قیمت» را برگردان.

جمع بندی سریع

• تابع load() در jQuery محتوای یک فایل را داخل المنت می ریزد.
• می توانی کل فایل یا فقط یک بخش مشخص مثل #p1 را لود کنی.
• پارامتر data برای فرستادن query string به سرور استفاده می شود.
• تابع callback بعد از پایان درخواست اجرا می شود و وضعیت را بررسی می کند.
• برای ادامه مباحث AJAX، صفحه تابع load در jQuery و متدهای GET/POST را هم ببین.