مقدمه‌ای بر AJAX

AJAX چیست، چرا مهم است و بارگذاری داده با متد load()

AJAX چیست؟

AJAX مخفف Asynchronous JavaScript And XML است؛ تکنیکی برای تبادل داده با سرور بدون رفرش صفحه. وقتی گوگل هنگام تایپ پیشنهاد جست‌وجو نشان می‌دهد یا اینستاگرام با اسکرول عکس جدید می‌آورد، پشت صحنه AJAX در حال کار است!

AJAX چه کاری انجام می‌دهد؟

مقایسه با روش سنتی

روش سنتی (بدون AJAX)روش AJAX
کلیک روی لینککلیک روی دکمه
رفرش کامل صفحهفقط بخش موردنظر تغییر می‌کند
کاربر منتظر می‌ماندکاربر به کارش ادامه می‌دهد
حجم انتقال زیادفقط داده لازم منتقل می‌شود

متد load(): ساده‌ترین روش AJAX

متد load() محتوای یک فایل یا URL را می‌گیرد و داخل عنصر قرار می‌دهد:

$(selector).load(URL, data, callback);
// بارگذاری محتوای یک فایل داخل div
$("#content").load("content.txt");

// بارگذاری فقط بخش مشخصی از صفحه (با سلکتور)
$("#content").load("article.html #main-part");

// با callback
$("#content").load("content.txt", function(response, status, xhr) {
    if (status === "success") {
        console.log("با موفقیت بارگذاری شد");
    }
});

مثال کاربردی: بارگذاری محتوای تب‌ها

$(".tab-btn").click(function() {
    var page = $(this).data("page");

    // نمایش «در حال بارگذاری...»
    $("#content").html("<p>⏳ در حال بارگذاری...</p>");

    // بارگذاری محتوا
    $("#content").load("pages/" + page + ".html");
});
به‌دلیل محدودیت امنیتی مرورگرها (Same-Origin Policy)، AJAX فقط با همان دامنه کار می‌کند. برای تست حتماً از سرور محلی (مثل WAMP یا Live Server) استفاده کنید، نه باز کردن مستقیم فایل!

رویدادهای AJAX

jQuery رویدادهایی برای نمایش وضعیت AJAX دارد:

// نمایش/مخفی لودر برای همه درخواست‌های AJAX
$(document).ajaxStart(function() {
    $("#loader").show();
}).ajaxStop(function() {
    $("#loader").hide();
});
نکته تاریخی: حرف X در AJAX از کلمه XML می‌آید، اما امروزه بیشتر داده‌ها به‌صورت JSON رد و بدل می‌شوند. اسم قدیمی مانده ولی فرمت مدرن JSON است.

جمع‌بندی

این مبحث بخشی از دوره آموزش کامل jQuery است.

ابزارهای مرتبط