پارت دو : مثالی از ایجکس با Vanilla JAVA Script

در ادامه مقاله قبلی (آشنایی مختصری با AJAX برای طراحان فرانت-اند), در این قسمت مثالی می سازیم که از XMLHttpRequest API استفاده می کند تا یک درخواست ایجکس را راه اندازی کند.

 

مثال ایجکس

نگاهی به ساختار ساده ی زیر بیاندازید.

<div>

    <img data-src=”Einstein.jpg” alt=”Einstein”>

    <button id=”request”>Learn more about Einstein</button>

    <div id=”bio”></div>

</div>

۱

۲

۳

۴

۵

دموی مربوط به ساختار بالا را در تصویر زیر می بینید.

آشنایی با AJAX(پارت دو)

کاری که می خواهیم انجام بدهیم بدین صورت است:وقتی بر روی دکمه زیر عکس کلیک می کنیم, یک درخواست ایجکس راه اندازی شود. سپس عنصر با آیدی (bio) ظاهر شده و محتوای آن به همراه پاسخ دریافتی به نمایش گذاشته شود. این اطلاعات static و ثابت بوده و در فایل bio.txt ذخیره شده اند.

کد ایجکس لازم برای انجام چنین کاری را در زیر مشاهده می کنید:

 

var btn = document.getElementById(‘request’);

var bio = document.getElementById(‘bio’);

var request = new XMLHttpRequest();

request.onreadystatechange = function() {

  if(request.readyState === 4) {

    bio.style.border = ‘1px solid #e8e8e8’;

    if(request.status === 200) {

      bio.innerHTML = request.responseText;

    } else {

      bio.innerHTML = ‘An error occurred during your request: ‘ +  request.status + ‘ ‘ + request.statusText;

    }

  }

}

request.open(‘Get’, ‘Bio.txt’);

btn.addEventListener(‘click’, function() {

  this.style.display = ‘none’;

  request.send();

});

۰۱

۰۲

۰۳

۰۴

۰۵

۰۶

۰۷

۰۸

۰۹

۱۰

۱۱

۱۲

۱۳

۱۴

۱۵

۱۶

۱۷

۱۸

۱۹

۲۰

۲۱

۲۲

بررسی جزء به جزء فرایند

حال بیایید گام های لازم برای ایجاد این درخواست را بررسی کنیم.

-ایجاد یک آبجکت XMLHttpRequest

-ساخت تابعی که به هنگام دریافت دیتای پاسخ از سوی سرور اجرا می شود. شی XMLHttpRequest دارای ویژگی (onreadystatechange) است که تابع مذکور را ذخیره می کند. هر بار که حالت(state) درخواست تغییر می کند, این تابع اجرا می شود.

-بررسی کردن برخی از دیگر ویژگی های شی XMLHttpRequest . ابتدا, ویژگی (readyState) حالت درخواست ما را مشخص می کند. در طول درخواست ایجکس, مقدار این ویژگی تغییر کرده و می تواند مقادیر از ۰ تا ۴ را دریافت کند.(برای مثال, عدد ۴ بدین معناست که دیتای پاسخ در دسترس است). مورد دوم, ویژگی (status) مشخص می کند که آیا درخواست موفقیت آمیز بوده یا خیربرای مثال مقدار ۲۰۰ مشخص می کند که درخواست موفقیت آمیز بوده است.) در مثال مورد بررسی, با فرض اینکه ما اطلاعات پاسخ را دریافت کرده و درخواست ایجکس موفقیت آمیز بوده است, محتوای عنصر مربوطه(bio) را بروز رسانی می کنیم. در غیر اینصورت, پیامی نمایش می دهیم حاوی اطلاعات استخراج شده از شی XMLHttpRequest .

-مشخص کردن نوع درخواست با استفاده از تابع (open) . این تابع دو پارامتر ضروری و سه پارامتر اختیاری می پذیرد. اولین پارامتر ضروری تابع HTTP را تعریف می کند. (برای مثال (Get) یا (Post) .) دومی URL ای که به آن درخواست را ارسال می کنیم مشخص می کند. به طور اختیاری, یک پارامتر سوم از نوع Boolean را قرار می دهیم که مشخص می کند آیا درخواست ناهمگام (Asynchronous) است یا همگام(Synchronous) . ذو پارامتر اختیاری دیگر می توانند برای مقاصد اعتبار سنجی (authentication) استفاده شوند.

-ارائه کردن درخواست از طریق تابع (send) هنگامی که دکه آن کلیک می شود و علاوه بر آن مخفی کردن خود دکمه.

تصویر زیر بدنه درخواست ما را به شکلی که در کنسول مرورگر نمایش داده می شود نشان می دهد.

آسنایی با AJAX(پارت دو)

دموی نهایی بدین صورت خواهد بود:

آشنایی با AJAX(پارت دو)

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

آشنایی با AJAX(پارت دو)

نکته: در صورتی که مثال مورد بررسی را در سیستم لوکال خود اجرا می کنید, ( و فایل bio.txt را در آن ذخیره کرده اید) پیغام ارور به احتمال زیاد متفاوت خواهد بود. به طور مثال, ممکن است نتیجه زیر را ببینید.

آسنایی با AJAX(پارت دو)

جمع بندی

در این مقاله بررسی کردیم که چگونه می توانیم یک درخواست ایجکس را مستقیما با استفاده از Vanilla JavaScript پیاده سازی کنیم. در قسمت بعدی این سری, بر روی متد ها و توابع مرتبط با ایجکس jQuery  تمرکز می کنیم. سپس در پارت نهایی, بر روی یک مثال پیچیده تر کار می کنیم.

0 پاسخ

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

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

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

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