معرفی متدهای ایجکس در jQuery

در این سری مقالات قصد معرفی متدهای ایجکس در jQuery را داریم. قبلا آموزش ajax با جاوااسکریپت را دیدیم.

ایجکس (ajax) مخفف Asynchronous Javascript and XML است, که یکی از پراستفاده ترین متدهای سمت کلاینت می باشد. که به ما امکان ساخت وبسایت و اپلیکیشن های Asynchronous را می دهد.

Asynchronous چیست ؟ با یک مثال این مورد رو توضیح میدم.

بطور مثال شما میخواید تو یه برنامه موبایل ، یه اهنگ دانلود کنید ، همچنین میخواید تا اتمام دانلود بقیه فایلها و اعضای برنامه در اختیارتون باشه ،

در حالت عادی ، درخواست Http یه مقدار زمان بر است ، که کامپایلر با رسیدن به اون تا اتمام Request و یا Respond منتظر میمونه و برنامه قفل میشه که به هیچ عضوی دیگه دسترسی نداریم

در برنامه نویسی غیر همزمان (Asynchronous ) و با استفاده از دستورات مربوطه به راحتی به کامپایلر میگیم که برو بقیه کارهارو انجام بده ،وقتی که نتیجه این خط برگشت یا درواقع این خط کارش به پایان رسید ، یک عملیاتی را انجام بده.!

قبلا در مورد ارسال درخواست AJAX با جاوااسکریپت خام را دیدیم.در این آموزش قصد داریم با متدهای ajax در جی کوئری آشنا بشیم.

جی کوئری به ما یک متد اصلی به نام $.ajax() را که بسیار قابل تنظیم برای هر موردی که نیاز دارید است, در اختیار ما قرار می دهد.

همچنین یک سری از متد های ساده برای عملیات تکی و همچنین تنظیمات پیش فرض را در اختیار ما قرار می دهد.

همه بجز متد $.ajax() یک قابلیت مشترک را دارند: بر روی مجموعه ای از المنت های DOM کار نمی کنند, اما بطور مستقیم از آبجکت جی کوئری فراخوانی می شوند.

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

$('p').ajax(...);

1	$('p').ajax(...);

می توانیم تمام پاراگراف (<p>) های صفحه را با متد ajax() به اینصورت فراخوانی کنیم.

$.ajax(...);

1	$.ajax(...);

در مقاله معرفی متدهای ایجکس در jQuery قصد داریم سه تا از پر استفاده ترین متدها را بررسی کنیم : load() , $.post() , $.get() .

متد load() در جی کوئری

این متد با ما امکان بارگذاری داده ها از سرور و قرار دادن داده بازگشتی (معمولا کد HTML) را درون یک المنت مشخص را می دهد.

قبل از دیدن آن در عمل, سینتکس کلی آن را ببینیم :

load(url[, data][, callback])

1	load(url[, data][, callback])

معنای هر پارامتر در زیر توضیح داده شده است :

Url : رشته ای از آدرس URL منبع که قصد ارسال درخواست به آن را دارید
Data : یک رشته اختیاری که می تواند در فرمت query string یا یک آبجکت باشد که به پارامتر درخواست پاس داده می شود.

در صورتی که یک رشته قرار بدیم, متد درخواست GET خواهد بود, اگر یک آبجکت قرار بدیم, بصورت خودکار متد POST می شود. اگر این پارامتر را حذف کنیم متد پیش فرض GET خواهد بود.

Callback : یک تابع بازگشتی اختیاری که بعد از تمام شدن درخواست AJAX اجرا می شود.

این تابع سه پارامتر قبول می کند : متن پاسخ (response) , رشته ای از وضعیت درخواست (request) , شی jqXHR

به نظر استفاده از متد load() در جی کوئری سخت باشد به هر حال یک مثال خوب را ببینیم.

فرض کنید یک المان در وب سایت با آی دی main که نشان دهنده محتوای اصلی است دارید. آنچه که می خوایم انجام بدیم, لود ناهمگام محتوای اصلی صفحه که در منوی اصلی توسط آی دی main-menu مشخص شده است.

ما فقط قصد دریافت محتوای داخل این المان را داریم چرا که دیگر بخش های قالب تغییر نمی کنند, بنابراین نیازی به لود آنها نداریم.

این رویکرد به عنوان یک مزیت در نظر گرفته می شود چرا که اگر کاربری که از وب سایت دیدن می کند جاوااسکریپت را غیرفعال کرده باشد, باز هم می تواند سایت را با مکانزیم عادی ببیند.

برای افزایش عملکرد وبسایت قصد داریم این قابلیت را پیاده سازی کنیم.

در این مثال در نظر داریم که تمام لینک های منو بصورت لینک داخلی هستند.

با استفاده از جی کوئری و متد load() , برای انجام این عملیات از کد زیر استفاده می کنیم.

$('#main-menu a').click(function(event) {
      // Prevents the default behavior which is
      // to load the page synchronously
      event.preventDefault();

      // Load the HTML code referenced by this.href
      // into the element having ID of #main
      $('#main').load(this.href);
   });

$('#main-menu a').click(function(event) {

// Prevents the default behavior which is

// to load the page synchronously

event.preventDefault();

// Load the HTML code referenced by this.href

// into the element having ID of #main

$('#main').load(this.href);

});

خب حتما در کد بالا متوجه شدید که ما تمام کدهای HTML صفحه مقصد را دریافت می کنیم نه محتوای اصلی را.

برای حل این مشکل, جی کوئری به ما اجازه استفاده از یک سلکتور بعد از آدرس URL را می دهد. با استفاده از این قابلیت متد load() , کد قبلی را ویرایش می کنیم :

$('#main-menu a').click(function(event) {
      event.preventDefault();

      $('#main').load(this.href + ' #main *');
   });

$('#main-menu a').click(function(event) {

event.preventDefault();

$('#main').load(this.href + ' #main *');

});

این بار ما محتوای صفحه را دریافت می کنیم اما بعد از آن کد HTML را به منظور دریافت فقط محتوای دارای آی دی main به همراه تمام فرزندان را فیلتر می کنیم.

ما از سلکتور عمومی (*) استفاده کریم چرا که قصد دریافت المنت #main داخل یک #main دیگر را نداریم. چرا که محتوای #main‌را می خواهیم نه خود #main‌ .

حالا کد دیگری از به همراه پارامترهای متد load() در جی کوئری را باهم دیگر می بیینم.

استفاده از تابع بازگشتی در load()

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

این بار از یک المان با آی دی notification-bar برای نوار اطلاع رسانی استفاده می کنیم.

$('#main-menu a').click(function(event) {
      event.preventDefault();

      $('#main').load(this.href + ' #main *', function(responseText, status) {
         if (status === 'success') {
            $('#notification-bar').text('The page has been successfully loaded');
         } else {
            $('#notification-bar').text('An error occurred');
         }
      });
   });

$('#main-menu a').click(function(event) {

event.preventDefault();

$('#main').load(this.href + ' #main *', function(responseText, status) {

if (status === 'success') {

$('#notification-bar').text('The page has been successfully loaded');

} else {

$('#notification-bar').text('An error occurred');

}

});

یک دمو آنلاین از آن را می توانید در https://codepen.io/SitePoint/pen/CwesD ببینید.

امیدوارم از بخش اول آموزش معرفی متدهای ایجکس در jQuery نهایت استفاده را برده باشید. در قسمت بعدی متدهای $.get و $.post در jQuery را بررسی می کنیم.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق و پیروز باشید