پارت چهار: نحوه استفاده از تابع “ajax” jQuery

در طول سه مقاله قبلی, باید به دیدگاه و درک مناسبی از AJAX رسیده باشید. در آخرین مقاله از این سری, با بررسی کردن مثالی پیچیده تر مبحث را پوشش کامل می دهیم.

برای اینکه ایده ای کلی از ساختار مثالی که قصد ایجاد آن را داریم بدست آورید نگاهی به کد زیر بیاندازید.

<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 متفاوتی متناظرند. همانطور که در بخش بعدی خواهیم دید, هر بار که برروی یکی از لینک ها کلیک می کنیم یک درخواست ایجکس راه اندازی می شود. سپس عنصر با کلاس modal ظاهر شده و محتوای آن با داده های دریافت شده از پاسخ دریافتی بروزرسانی می شود.

عنصر main به شکل زیر دیده می شود.

آشنایی با AJAX (پارت چهار)

ساختار طرح نمونه

قدم بعدی این است که ساختار طرح نمونه مان را مشخص کنیم. کد 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>

۱

۲

۳

۴

۵

۶

۷

۸

۹

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

همان طور که میبینید, طرح نمونه حاوی تعدادی عنصر خالی است. این عنصر ها را به این علت در HTML می گذاریم که متنشان با توجه به اینکه کدام لینک انتخاب شود و پاسخی که دریافت میشود, تغییر می کند.

تصویر زیر نشان می دهد که طرح نمونه در آغاز چگونه ظاهر میشود.

آشنایی با AJAX (پارت چهار)

به طور پیشفرض, طرح نمونه پنهان است. علاوه بر آن ما بارگذار را نیز پنهان می کنیم و فقط وقتی ظاهر میشود که درخواست ایجکس راه اندازی شود.

نگاهی به قواعد CSS مربوط به آن بیاندازید.

.modal {

    opacity: 0;

}

.loader {

    display: none;

}

۱

۲

۳

۴

۵

۶

۷

توجه داشته باشید که ما از ویژگی opacity استفاده می کنیم (و نه ویژگی display) تا نمونه مان را پنهان کنیم. زیرا این ویژگی متعلق به animatable CSS properties است. به این ترتیب, قادر خواهیم بود تا حالت های طرح نمونه مان را تغییر دهیم. (یعنی (state) های باز و بسته)

ایجاد JSON Response

برای مثالی که در این مقاله قصد ایجاد آن را داریم, ساخت JSON Response را انتخاب می کنیم. به طور ویژه , پاسخ دریافتی مورد نظر (یعنی فایل Demo.json ) آرایه ای از اشیاء خواهد بود و هر شی حاوی جزییات مربوط به فریم ورک های front-end متناظر.

علاوه بر این, مقدار ویژگی name با تکست لینک های عنصر main مطابق خواهد بود . با در نظر گرفتن این موضوع ساختار response  به صورت زیر خواهد بود.

[

  {

    “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”

  },

  // ۴ more objects here

]

۱

۲

۳

۴

۵

۶

۷

۸

۹

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

توجه: مقادیری که برای ویژگی های numberOfStars و currentVersion استفاده کردیم غیر واقعی و صرفا برای شرح دادن بود.

مشابه مثال های قبلی این سری, ما از ایجکس استفاده می کنیم تا یک فایل استاتیک را درخواست کنیم. اگر بخواهیم محتوایی از سایت های دیگر را جای گذاری کنیم,(Google maps,Flicker,…) باید اسناد و مدارک API آن ها را بررسی کنیم و در صورت لزوم یک کلید API درخواست کنیم.

علاوه بر این, داده های مورد نظر ما در همان سروری که خود دمو بر روی آن قرار دارد, ذخیره شده اند. لذا, از محدودیت هایی که به هنگام کار کردن با سرویس های جانبی ممکن است بوجود آید, اجتناب می کنیم. (بخش محدودیت های درخواست های ایجکس مقاله اول را ببینید.)

اجرا کردن درخواست ایجکس

در این بخش, از تابع (jQuery: (ajax استفاده می کنیم تا یک درخواست ایجکس را اجرا کنیم. اما قبل از انجام این کار بیایید ابتدا متغیر هایمان را با اخذ پر استفاده ترین گزینشگر های jQuery تعیین کنیم.

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])

۱

پارامتر settings یک شی پیکربندی است که اطلاعات درخواست ما را نگهداری می کند. تعدادویژگی هایی که این شی می تواند نگهداری کند بسیار زیاد است(حدود ۳۴ ویژگی). برای رعایت سادگی, بحث را محدود به آن هایی می کنیم که در این دمو استفاده شده اند.

توضیحات ویژگی

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

url

قالب یا فرمت response data یعنی(json,xml,html) dataType
یک تابع فراخوان که قبل از اینکه درخواست ارسال شود, اجرا می شود. در اینجا این تابع کد نمایش دهنده بارگذار را راه اندازی می کند. beforeSend

قبل از ادامه کار, بهتر است به سه نکته زیر توجه کنید.

-برای تابع ajax علامت گذاری دیگری نیز وجود دارد: 

 $.ajax(url[settings])

-تمام ویژگی های پیکربندی پارامتر settings اختیاری هستند.

-متد HTTP پیشفرض Get است.

توابع Promise

تابع ajax, شی jqXHR یا jQueryXMLHttpRequest را بازگردانی می کند. این شی اینترفیس Promise را پیاده سازی کرده و لذا شامل تمام ویژگی ها, توابع و عملکرد های یک Promise است.

در این مثال, از توابع Promise زیر استفاده می کنیم.

– done

– fail

– always

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

تابع فراخوان ( ()successFunction ) سه آرگومان می پذیرد.

۱-داده های بازگردانده شده.

۲-یک رشته که وضعیت درخواست را دسته بندی میکند. (برای مشاهده مقادیر ممکن برای آن, مقاله قبلی را ببینید.)

۳-شی jqHXR متد fail در صورتی اجرا می شود که درخواست موفقیت آمیز نباشد. این متد تعدادی آرگومان می پذیرد که تمامی شان می توانند یک تابع یا آرایه ای از توابع باشند. به عنوان مثال , در دموی مورد نظر ما, ()errorFunction به عنوان یک آرگومان در نظر گرفته می شود.

تابع فراخوان (()errorFunction) سه آرگومان را می پذیرد.

۱-شی jqXHR

۲-یک رشته که وضعیت درخواست را دسته بندی می کند.

۳-یک رشته دیگر که خطای ایجاد شده را معین می کند.این خطا قسمت متنی وضعیت HTTP را دریافت می کند. به عنوان مثال :Forbidden یا Not Found

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

وضعیت یک درخواست آرگومان های توابع را مشخص می کند. در صورت موفقیت آمیز بودن درخواست, آرگومان های تابع فراخوان (()alwaysFunction) همان آرگومان های تابع فراخوان متد done خواهند بود. در حالت برعکس, اگر درخواست موفقیت آمیز نباشد, آرگومان های آن همان آرگومان های تابع فراخوان متد fail خواهد بود.

توجه: به جای متد های  (Promise (done,fail,always  که در این مثال استفاده شده اند, می توانیم معادلا از توابع فراخوان success,error,complete استفاده کنیم. این توابع در پارامتر settings تعریف شده اند.

نمایش داده ها

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

کد تابع فراخوان ()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=”‘%20+%20data%5Bi%5D.url%20+%20′” 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!’);

  }

}

۱

۲

۳

۴

۵

۶

۷

۸

۹

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

۲۳

با وجود بروز رسانی محتوای نمونه مان, این محتوا هنوز پنهان است. هنگامی که درخواست به پایان میرسد, این محتوا ظاهر شده و بارگذار ناپدید می شود و فقط در این هنگام است که تابع فراخوان ()alwaysFunction اجرا می شود.

function alwaysFunction() {

    $loader.hide();

    $modal.addClass(‘active’);

}

۱

۲

۳

۴

کلاس active به صورت زیر خواهد بود.

.active {

  opacity: 1;

  z-index: 10;

  transform: scale(1);

}

۱

۲

۳

۴

۵

در تصویر زیر, می توانید شکل مورد نظر طرح نمونه را هنگامی که روی تکست لینک bootstrap کلیک می کنیم ببینید.

آشنایی با AJAX (پارت چهار)

چند سناریو

توانایی درک کدی که تحت شرایطی معین اجرا می شود بسیار مهم است.

بیایید دو سناریوی رایج را بررسی کنیم.

  • مقدار ویژگی name با تکست لینک های عنصر main مطابقت نمی کند. به عنوان مثال فرض کنید ما یک URL مشخص می کنیم که مقدار ویژگی name شی ای که مرتبط با فریم ورک پایه است به جای Foundation2 , Foundation است.

در چنین حالتی ما بر روی تکست لینک Foundation کلیک کرده و نمونه زیر ظاهر می شود.

آشنایی با AJAX (پارت چهار)

 

  • پاسخ دریافتی خالی است. به عنوان مثال, ما یک URL تعریف می کنیم که به یک آرایه خالی اشاره می کند. در این حالت طرح نمونه به شکل زیر خواهد بود:

آشنایی با AJAX (پارت چهار)

مدیریت خطاها

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

کد تابع ()failFunction که نحوه عملکرد را معین می کند مشاهده کنید.

function failFunction(request, textStatus, errorThrown) {

   $list.hide();

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

}

۱

۲

۳

۴

برای آشنایی بیشتر با این کد, بیایید یک URL که وجود خارجی ندارد را تعیین کنیم. بنابراین متد fail اجراشده و طرح نمونه به صورت زیر خواهد بود.

آشنایی با AJAX (پارت چهار)

توجه: مجددا اگر این مثال را در سیستم لوکال خودتان اجرا می کنید ممکن است پیغام خطا متفاوت باشد.

جمع بندی

در این مقاله, بررسی مان از ایجکس- از زاویه دید یک طراح سایت – را به پایان رساندیم. امیدوارم که این سری مقالات برای شما مفید و سودمند واقع شده باشد و مهارت های جدید کسب کرده باشید.

0 پاسخ

دیدگاه خود را ثبت کنید

تمایل دارید در گفتگوها شرکت کنید؟
در گفتگو ها شرکت کنید.

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

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