متد ajax

متد $.ajax() راهی برای فرستادن درخواست از صفحه وب به سرور و دریافت پاسخ است. این درخواست معمولاً بدون بارگذاری دوباره کل صفحه انجام می‌شود؛ بنابراین می‌توان بخشی از محتوای صفحه را به‌روزرسانی کرد، اطلاعات فرم را فرستاد یا نتیجه یک عملیات را به کاربر نشان داد.

بسیاری از متدهای ساده‌تر jQuery برای ارتباط با سرور، در نهایت از قابلیت‌های اصلی Ajax استفاده می‌کنند. وقتی به کنترل دقیق‌تری بر آدرس مقصد، روش درخواست، داده‌های ارسالی، زمان انتظار یا مدیریت نتیجه نیاز دارید، $.ajax() گزینه‌ای انعطاف‌پذیر است. ساختار پایه آن به این صورت است:

$.ajax({
  name: value,
  name: value
});

هر گزینه به شکل یک جفت نام و مقدار نوشته می‌شود. نام گزینه مشخص می‌کند چه بخشی از درخواست را کنترل می‌کنید و مقدار آن می‌تواند رشته، عدد، مقدار بولی یا تابع باشد. در کد واقعی، معمولاً به جای عبارت‌های عمومی بالا، گزینه‌هایی مانند url و success قرار می‌گیرند.

گزینه url آدرسی را تعیین می‌کند که درخواست به آن فرستاده می‌شود. اگر مسیر نسبی باشد، مرورگر آن را بر اساس آدرس صفحه فعلی تفسیر می‌کند؛ پس بهتر است مسیر را با توجه به ساختار پروژه انتخاب کنید. در برنامه‌های بزرگ‌تر، نگهداری آدرس‌ها به شکل روشن و یکدست، بررسی و اصلاح کد را ساده‌تر می‌کند.

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

گزینه type یا در نسخه‌های جدیدتر و رایج jQuery گزینه method، روش HTTP را مشخص می‌کند. برای دریافت اطلاعات معمولاً از GET استفاده می‌شود و برای فرستادن یا تغییر اطلاعات، اغلب POST انتخاب مناسبی است. انتخاب نهایی باید با قرارداد API یا کدی که در سمت سرور نوشته‌اید هماهنگ باشد.

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

گزینه data برای تعیین اطلاعاتی است که همراه درخواست به سرور فرستاده می‌شوند. این داده‌ها ممکن است از یک فرم، یک شیء جاوااسکریپت یا متغیرهای موجود در صفحه به دست بیایند. پیش از ارسال، مطمئن شوید نام فیلدها با چیزی که سرور انتظار دارد یکسان است.

گزینه dataType نوع پاسخ مورد انتظار را مشخص می‌کند؛ برای نمونه، می‌توانید انتظار پاسخ JSON یا متن داشته باشید. در مقابل، contentType نوع محتوایی را معرفی می‌کند که در درخواست ارسال می‌شود. این دو گزینه کاربرد متفاوت دارند و نباید با یکدیگر اشتباه گرفته شوند. اگر پاسخ JSON است، بهتر است ساختار دریافتی و امکان تبدیل آن را نیز بررسی کنید.

تابع success زمانی اجرا می‌شود که درخواست با موفقیت تکمیل شود. پاسخ سرور به این تابع می‌رسد و می‌توانید بر اساس آن، بخشی از صفحه را تغییر دهید یا پیامی مناسب نمایش دهید. بهتر است به جای نشان دادن پاسخ خام، آن را متناسب با هدف صفحه پردازش کنید.

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

درخواست شبکه ممکن است به دلایل مختلف بیشتر از حد انتظار طول بکشد. گزینه timeout برای تعیین زمان انتظار بر حسب میلی‌ثانیه به کار می‌رود. مقدار مناسب به نوع عملیات و شرایط برنامه بستگی دارد؛ برای یک جست‌وجوی سبک، انتظار طولانی معمولاً تجربه خوبی ایجاد نمی‌کند، اما عملیات زمان‌بر ممکن است به فرصت بیشتری نیاز داشته باشد.

تابع beforeSend پیش از ارسال درخواست اجرا می‌شود و می‌تواند برای آماده‌سازی رابط کاربری، مانند غیرفعال کردن موقت دکمه، استفاده شود. تابع complete پس از پایان درخواست، چه موفق باشد و چه ناموفق، اجرا می‌شود. از آن می‌توان برای بازگرداندن وضعیت دکمه یا جمع کردن نشانگر بارگذاری استفاده کرد.

در نمونه زیر، با کلیک روی دکمه، یک درخواست به فایل متنی فرستاده می‌شود. اگر درخواست موفق باشد، محتوای دریافتی در عنصری با شناسه div1 قرار می‌گیرد. این مثال برای آشنایی با روند کلی مناسب است؛ در پروژه واقعی باید آدرس و نوع پاسخ را با سرویس خود هماهنگ کنید.

$("button").click(function () {
  $.ajax({
    url: "demo_test.txt",
    success: function (result) {
      $("#div1").html(result);
    },
    error: function () {
      $("#div1").text("دریافت اطلاعات انجام نشد.");
    }
  });
});

در این کد، رویداد کلیک، درخواست را آغاز می‌کند و تابع موفقیت نتیجه را در صفحه قرار می‌دهد. تابع خطا نیز در صورت ناموفق بودن درخواست، پیامی جایگزین نمایش می‌دهد. برای نمایش متن ساده، استفاده از .text() می‌تواند از تفسیر ناخواسته پاسخ به عنوان HTML جلوگیری کند؛ اگر قرار است HTML نمایش داده شود، منبع و محتوای آن را با دقت بررسی کنید.

در بسیاری از صفحه‌ها، بهتر است هنگام شروع درخواست یک وضعیت بارگذاری نشان داده شود و پس از پایان کار، آن وضعیت برداشته شود. این کار را می‌توان با beforeSend و complete انجام داد. اگر کاربر بتواند چند بار روی دکمه کلیک کند، کنترل درخواست‌های تکراری نیز اهمیت پیدا می‌کند.

جدول زیر تعدادی از گزینه‌های متداول متد Ajax در jQuery را خلاصه می‌کند. بعضی گزینه‌ها مقدار ساده می‌گیرند و بعضی دیگر تابع هستند. لازم نیست همه آن‌ها را در هر درخواست وارد کنید؛ فقط گزینه‌هایی را بنویسید که برای سناریوی موردنظر لازم هستند.

هنگام ساخت درخواست، ابتدا مشخص کنید سرور چه چیزی دریافت می‌کند و چه پاسخی برمی‌گرداند. سپس آدرس، روش HTTP و داده‌های لازم را انتخاب کنید. جدا کردن این تصمیم‌ها از کد مربوط به نمایش نتیجه، خوانایی برنامه را بالا می‌برد و تغییرات بعدی را آسان‌تر می‌کند.

اگر داده‌ها به شکل فرم ساده ارسال می‌شوند، jQuery معمولاً آن‌ها را برای درخواست آماده می‌کند. برای ارسال محتوای JSON یا فایل، ممکن است به تنظیمات دیگری در contentType و processData نیاز داشته باشید. در این حالت، مستندات API و رفتار سمت سرور را بررسی کنید؛ تنظیم نادرست این گزینه‌ها می‌تواند باعث شود سرور داده‌ها را به شکل مورد انتظار دریافت نکند.

در مستندات قدیمی یا نمونه‌کدهای پراکنده ممکن است نام یک گزینه با غلط املایی نوشته شده باشد. برای نمونه، شکل درست گزینه ذخیره‌سازی پاسخ در حافظه مرورگر cache است و نام درست گزینه پردازش داده‌ها processData است. استفاده از نام نادرست ممکن است باعث شود تنظیم موردنظر اعمال نشود.

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

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

قرار دادن پاسخ سرور در صفحه با .html() زمانی مناسب است که واقعاً می‌خواهید محتوای HTML نمایش دهید و منبع پاسخ قابل اعتماد باشد. برای متن ساده، .text() انتخاب محتاطانه‌تری است. پیش از نمایش داده‌های دریافتی، نوع پاسخ و نحوه استفاده از آن را مشخص کنید.

اگر با هر کلیک درخواست تازه‌ای ارسال شود، کلیک‌های سریع ممکن است درخواست‌های تکراری ایجاد کنند. برای جلوگیری از این وضعیت، می‌توانید هنگام پردازش درخواست دکمه را موقتاً غیرفعال کنید و پس از پایان کار، آن را دوباره فعال کنید. این رفتار را با توجه به نوع عملیات و امکان ارسال مجدد طراحی کنید.

متد Ajax در jQuery زمانی کاربرد دارد که صفحه باید بدون بارگذاری کامل با سرور ارتباط برقرار کند. با تعیین درست آدرس، روش درخواست و داده‌ها می‌توانید اطلاعات را ارسال یا دریافت کنید و با توابع موفقیت، خطا و پایان درخواست، رفتار برنامه را مدیریت کنید.

پیش از استفاده، قالب داده و پاسخ را با سرویس سمت سرور هماهنگ کنید، املای گزینه‌ها را بررسی کنید و برای خطاها پیام مناسبی در نظر بگیرید. اگر برنامه شما از ساختارهای جدیدتر جاوااسکریپت استفاده می‌کند، می‌توانید در کنار jQuery راهکارهایی مانند Fetch API را نیز بررسی کنید؛ اما انتخاب ابزار باید بر اساس نیاز پروژه و محیط موجود انجام شود.