استفاده از تابع Ajax در جی‌کوئری

استفاده از تابع Ajax در جی‌کوئری

jQuery’s Ajax Function

استفاده از تابع Ajax کتابخانه جی کوئری

 

تعریف تابع ایجکس در جی کوئری

در این مقاله قصد داریم نحوه استفاده از تابع ajax واقع در جی کوئری را در یک مثال کاربردی مشاهده کنیم. لطفا برای مشاهده سورس کد و دموی مثال این مقاله به وب سایت codePen.io مراجعه نمائید.

 

ساختار کلی یک صفحه وب:

برای داشتن یک ایده کلی از ساختار صفحه وب این مثال، کدهای زیر را در نظر بگیرید:

<section>
    <!– content here –>
</section>
<main>
    <!– content here –>
</main>
<section>
    <!– content here –>
</section>
<div class="modal">
    <!– content here –>
</div>
<div class="loader">
    <!– content here –>
</div>
 

کدهای المان main در پایین تعریف شده اند:

<main>

  <h2>Popular front-end frameworks</h2>

  <p>Click each one to load details via AJAX.</p>

  <div class="boxes">

    <a href="#">Bootstrap</a>

    <a href="#">Foundation</a>

    <a href="#">UIkit</a>

    <a href="#">Semantic UI</a>

    <a href="#">Skeleton</a>

    <a href="#">Material Design Lite</a>

  </div>

</main>

 

به تکست لینک های فوق دقت کنید. این لینک ها مربوط به فریم ورک های مختلف سمت کاربر (Front-end Frameworks) می باشد. در بخش بعدی خواهیم دید که هر بار که بر روی لینک های فوق کلیک می کنیم، یک درخواست آژاکسی (Ajax Request) اجرا می شود و المان با کلاس modal به حالت نمایش درمی آید و محتوای این modal بطور داینامیک از طریق response دریافتی آپدیت می شود.

المان main بصورت تصویر زیر نمایش داده خواهد شد:

المان main بصورت این تصویر نمایش داده خواهد شد

 

سورس کد HTML پیغام Modal:

قدم بعدی آزمایش ساختار Modal می باشد. کد HTML آن بصورت زیر است:

<div class="modal">

  <button class="close" aria-label="Close">✕</button>

  <div class="m-content">

    <ul class="m-info">

      <li>Framework</li>

      <li></li>

      <li>Current Version</li>

      <li></li>

      <li>Number of Github Stars</li>

      <li></li>

      <li>Official Page</li>

      <li></li>

    </ul>

    <p class="m-message"></p>

  </div>

</div>

 

همانطور که در کد بالا مشاهده می کنید، Modal شامل چند المان خالی می باشد. ما خودمان این جاهای خالی را طراحی کرده ایم زیرا قرار است بعدا با توجه به لینک کلیک شده (اینکه لینک چه فریم ورکی توسط کاربر کلیک شده است) جای خالی را پر کنیم. تصویر زیر المان Modal را به همراه جاهای خالی نمایش می دهد.

المان Modal را به همراه جاهای خالی نمایش می دهد

 

بصورت پیش فرض، Modal نمایش داده نمی شود و از دید کاربران پنهان می باشد. و همچنین تصویر loading gif نیز مخفی می باشد. این دو مورد تنها زمانی نمایش داده می شوند که یک درخواست ajax داده شود. نگاهی به استایل های ساده زیر بیاندازید:

.modal {

    opacity: 0;

}

.loader {

    display: none;

}

 

دقت کنید که ما برای پنهان کردن modal از دید کاربر، بجای استایل display: none از opacity: 0 استفاده کرده ایم. به این دلیل که opacity یکی از property های قابل انیمیشن می باشد. در این صورت ما می توانیم حالت نمایش modal را از مخفی به پیدا یعنی از opacity:0 به opacity:1 تبدیل کنیم.

 

تولید پاسخ با فرمت جی‌سون (Generating the JSON Response):

برای رسیدن به اهدافی که از این مثال داریم، فرمت پاسخ دریافتی از سرور را JSON در نظر گرفته ایم. بطور مشخص، پاسخ مورد انتظار آرایه ای از آبجکت ها خواهد بود. هر آبجکت شامل جزئیاتی در زمینه فریم ورک کلیک شده خواهد بود. علاوه بر این، name property برای هر آبجکت، برابر با تکست لینک های المان main می باشد.

ساختار پاسخ دریافتی (Response Structure) بصورت زیر خواهد بود:

[
  {
    "url": "http://getbootstrap.com/",
    "numberOfStars": "88.260+",
    "currentVersion": "3.3.5",
    "name": "Bootstrap"
  },
  {
    "url": "http://foundation.zurb.com/",
    "numberOfStars": "21.180+",
    "currentVersion": "5.5.3",
    "name": "Foundation"
  },
  // 4 more objects here
]
 

مقادیر پارامترهای numberOfStars و currentVersion برای نمونه می باشند و واقعیت ندارند ( فقط به منظور دمو مقداردهی شده اند ). ما در این مثال از تابع ajax برای درخواست یک فایل استاتیک استفاده می کنیم. در صورتی که بخواهیم محتوای سایر وب سایت ها مانند Flickr و Google Map را بخوانیم و در modal نمایش دهیم، باید ابتدا مستندات API مربوط به آن سرویس را مطالعه کرده و در صورت لزوم از یک API key استفاده نمائیم.

 

پیاده سازی درخواست آژاکسی (Implementing the Ajax Request):

در این بخش، ما از تابع ajax() برای راه اندازی اولیه درخواست Ajax استفاده خواهیم کرد. پیش از انجام اینکار، بهتر است تمام المان هایی که نیاز است را بصورت سلکتور جی کوئری تعریف کنیم:

var $list    = $('.m-info'),

var $message = $('.m-message');

var $modal   = $('.modal');

var $loader  = $('.loader');

var $framework;

 

وقت آنست که دستورات لازم برای اجرای درخواست آژاکسی را تعریف کنیم:

$('.boxes a').on('click', function(e) {

  e.preventDefault();

  $framework = $(this).text();

  $.ajax({

    url: 'Demo.json',

    dataType: 'json',

    beforeSend: function() {

        $loader.show();

    }

  }).done(successFunction)

    .fail(errorFunction)

    .always(alwaysFunction);

});

دقت کنید که ساختار تابع ajax بطور کلی بصورت زیر است:

$.ajax([settings])

پارامتر setting یک آبجکت پیکربندی می باشد که حاوی اطلاعات لازم برای درخواست ما است. تعداد property هایی که در این آبجکت می توان تعریف کرد بسیار زیاد است (حدود ۳۴ تا!) بدلیل ساده نگه داشتن مثال این مقاله، ما تنها از پارامترهایی استفاده می کنیم که در این مثال موردنیاز و ضروری است. به جدول زیر دقت کنید:

Property

توضیح

URL

یک رشته است که درخواست آژاکسی به آن آدرس ارسال می شود.

dataType

فرمت داده های پاسخ دریافتی (مانند JSON و HTML و XML)

beforeSend

یک تابع callback است که قبل از ارسال درخواست ما اجرا می شود. در اینجا، این تابع، تکه کدی که باعث نمایش loading gif می شود را فراخوانی می کند.

 

 

قبل از اینکه ادامه دهیم، سه نکته قابل ذکر است:

  • تابع Ajax فرمت دیگری بصورت روبرو دارد: $.ajax(url[, settings])
  • تمام property های مربوط به تنظیمات (setting) اختیاری می باشند.
  • متد HTTP پیش فرض برابر GET می باشد.

 

متدهای Promise:

تابع Ajax آبجکت XMLHttpRequest و یا jqXHR را برمی گرداند. این آبجکت یک Promise Interface را پیاده سازی می کند. بنابراین تمام property ها و method ها و رفتار یک Promise را شامل می شود.

در این مثال، ما از سه متد promise زیر استفاده می کنیم:

  • Done
  • Fail
  • Always

 

متد done:

متد done هنگامی صدا زده می شود که درخواست با موفقیت انجام شود. یک یا چند آرگومان می گیرد. هر کدام از این آرگومان ها می توانند یک تابع و یا آرایه ای از توابع باشد. در مثال ما، successFunction() بعنوان یک آرگومان پاس داده می شود.

تابع callback (مانند successFunction) تعداد ۳ آرگومان می گیرد: اولین آرگومان داده بازگشتی است. دومین آرگومان یک رشته می باشد که مشخص کننده وضعیت درخواست (request status) است و سومین آرگومان نیز آبجکت jqXHR می باشد.

 

متد fail:

متد fail زمانی اجرا می شود که درخواست با شکست مواجه شود. یک یا چند آرگومان می گیرد. هریک از آرگومان ها می توانند یک تابع و یا آرایه ای از چندین تابع باشد. بعنوان مثال، در دموی این مقاله، تابع errorFunction() بعنوان یک آرگومان پاس داده می شود.

تابع callback (مانند errorFunction) سه آرگومان قبول می کند: آبجکت jqXHR ، رشته مشخص کننده وضعیت درخواست و رشته ای حاوی پیام خطای مربوطه . این رشته خطا شامل خطای HTTP status می باشد مانند Not Found یا Forbidden .

 

متد always:

متد always زمانی اجرا می شود که درخواست پایان یافته باشد. بدون درنظر گرفتن موفق بودن درخواست (که متد done اجرا می شود) و یا شکست خوردن آن (که متد fail اجرا می شود). مجددا مانند دو متد قبل (done و fail) یک یا چند آرگومان می گیرد که در این مثال تابع alwaysFunction() بعنوان آرگومان ارسال می شود.

نکته: بجای متدهای done , fail , always که در این مثال از آنها استفاده کرده ایم، می توانستیم از توابع callback مانند success و error و complete استفاده کنیم. این توابع باید در پارامتر setting تعریف شوند.

 

نمایش داده (Displaying the Data):

اگر درخواست با موفقیت انجام شد، ما قادر خواهیم بود داده بازگشتی را دریافت کنیم. سپس داده ها برای قرار دادن در جاهای خالی modal دستکاری (manipulate) می کنیم. دستورات زیر را برای تابع successFunction درنظر بگیرید:

 

function successFunction(data) {
  if (data.length > 0) {
    for (var i = 0; i < data.length; i++) {
      if ($framework === data[i].name) {
        $list.show();
        $message.hide();

        $list.find('li:nth-of-type(2)').text($framework);
        $list.find('li:nth-of-type(4)').text(data[i].currentVersion);
        $list.find('li:nth-of-type(6)').text(data[i].numberOfStars);
        $list.find('li:nth-of-type(8)').html('<a href="' + data[i].url + ‘” target=”_blank”>’ + data[i].url + '</a>');
        break;
      } else {
        $list.hide();
        $message.show().text('No data received for this framework!');
      }
    }
  } else {
    $list.hide();
    $message.text('No data received from your respose!');
  }
}
 

ما همچنین محتوای modal را آپدیت کرده ایم. اما modal همچنان مخفی (hidden) می باشد. در تابع زیر، به محض اینکه درخواست پایان می یابد، modal را نمایان و loader را پنهان می کنیم:

function alwaysFunction() {

    $loader.hide();

    $modal.addClass('active');

}

استایل active بصورت زیر می باشد:

.active {

  opacity: 1;

  z-index: 10;

  transform: scale(1); 

}

در تصویر زیر، شما می توانید modal دلخواه را وقتی روی لینک bootstrap کلیک می کنیم، مشاهده کنید:

شما می توانید modal دلخواه را وقتی روی لینک bootstrap کلیک می کنیم، مشاهده کنید

 

سناریوهای مختلف:

  • مقدار name property با تکست لینک واقع در المان main برابر نباشد بعنوان مثال تصور کنید ما یک url تعریف کنیم که در آن مقدار name بجای Foundation برابر Foundation2 باشد. اگر در اینصورت بر روی لینک مربوط به فریم ورک فاندیشن کلیک کنیم، المان modal مشابه تصویر زیر باید باشد:

مقدار name property با تکست لینک واقع در المان main برابر نباشد

  • داده پاسخ خالی باشد (empty response data): فرض کنید یک URL داریم که در آن به یک آرایه خالی اشاره دارد. در این حالت، المان modal مانند تصویر زیر خواهد بود:

داده پاسخ خالی باشد (empty response data)

 

مدیریت خطاها (Errors Handling):

تا بدین جا ما حالاتی را در نظر گرفتیم که درخواست آژاکس با موفقیت اجرا شود. اگر این درخواست با شکست مواجه شود چه اتفاقی می افتد؟ در صورت بروز خطا در حین اجرای درخواست، لیست فریم ورک ها را پنهان می کنیم و بجای آن، یک پیغام دلخواه و مناسب به کاربران نمایش می دهیم. دستورات تابع failFunction() بصورت زیر تعریف می شود:

function failFunction(request, textStatus, errorThrown) {

   $list.hide();

   $message.text('An error occurred during your request: ' + request.status + ' ' + textStatus + ' ' + errorThrown);

}

 

یکی از مواردی که ممکن است درخواست با خطا مواجه شود اینست که URL وجود نداشته باشد. در اینصورت تصویر زیر را مشاهده خواهیم کرد:

مدیریت خطاها (Errors Handling)

دموی این مثال را می توانید در وب سایت codepen.io مشاهده و ویرایش کنید.

 

منبع: https://webdesign.tutsplus.com/tutorials/how-to-use-jquerys-ajax-function–cms-25774


برچسب‌ها:

ajax در jqueryajax در جی کوئریایجکس در جی کوئریتابع Ajaxتابع ajax در جی کوئریتابع آژکستابع ایجکسجی کوئریکد جی کوئری

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

هفت + 11 =