پارت سه: دستور العمل هایی در سطح مبتدی از AJAX با jQuery

در اولین مقاله از این سری,پایه ها و زیر ساخت های ایجکس را پوشش دادیم. در مقاله دوم, نگاهی به یک مثال کاربردی با استفاده از Vanilla JAVA Script انداختیم. در این مقاله با تعدادی از توابع و متد های مرتبط با ایجکس jQuery آشنا می شویم. بویژه نگاهی دقیق تر به متد load و تابع کلی ajax می اندازیم.

استفاده از متد load

این متد ساده اما با اینحال بسیار قدرتمند برای دریافت داده های دور از دسترس است.

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

$(selector).load(url[, data][, complete])

۱

جدول زیر پارامتر های امکان پذیر آن را نشان می دهد.

الزامی بودن

توضیحات

پارامتر

بله

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

url

خیر داده هایی(مانند یک رشته یا یک شیء خالی) که به همراه درخواست به سرور ارسال میشوند.  

data

 

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

 

در جدول زیر پارامتر های تابع را مشاهده می کنید.

توضیحات پارامتر
داده هایی که از درخواست دریافت می شود. responseText
رشته ای که وضعیت در خواست را دسته بندی می کند. textStatus
شیء jQuery XMLHttpRequest که ابر مجموعه ای از شیء XMLHttpRequest مرورگر است. jqXHR

لیست بعدی مقادیر ممکن برای پارامتر textStatus را به طور خلاصه بیان می کند.

  1. Success
  2. Notmodified
  3. Nocontent
  4. Error
  5. Timeout
  6. Abort
  7. Parsererror

برای اینکه درک بهتری از چگونگی کارکرد متد load داشته باشیم, بیایید نگاهی دوباره به مثالی که در مقاله قبل عنوان شد بیاندازیم.

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

<div>

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

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

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

</div>

۱

۲

۳

۴

۵

و این هم اجرا شده ی آن :

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

به خاطر داشته باشید که می خواهیم به محض کلیک شدن دکمه (learn more…) محتوای قسمت bio را با استفاده از دیتای دریافتی از سرور بروز رسانی کنیم .

کد jQuery لازم برای آن را در تصویر میبینید.

var $btn = $(‘#request’);

var $bio = $(‘#bio’);

$btn.on(‘click’, function() {

  $(this).hide();

  $bio.load(‘Bio.txt’, completeFunction);

});

function completeFunction(responseText, textStatus, request) {

  $bio.css(‘border’, ‘1px solid #e8e8e8’);

  if(textStatus == ‘error’) {

      $bio.text(‘An error occurred during your request: ‘ +  request.status + ‘ ‘

+ request.statusText);

  }

}

۱

۲

۳

۴

۵

۶

۷

۸

۹

۱۰

۱۱

۱۲

۱۳

آشنایی با AJAX(پارت سه)با فرض اینکه درخواست موفقیت آمیز بوده (یعنی وقتی textStatus وضعیت success یا modified دارد) نتیجه نهایی به این صورت خواهد بود :

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

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

قسمت چپ این تصویر , شی XHR را به شکلی که در کنسول مرورگر نمایش داده شده است (اگر فقط از JavaScript برای ایجاد درخواست استفاده کنیم) نمایش می دهد. از طرف دیگر سمت راست شی jqXHR مربوطه را اگر از متد load استفاده کنیم نشان می دهد.

در صورت موفقیت آمیز نبودن درخواست , باید یک پیغام مناسب ظاهر شود. برای انجام این کار , مقدار پارامتر textStatus را بررسی کرده و یک پیغام خطا نمایش می دهیم.

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

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

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

در آخر, لازم به ذکر است که به طور پیشفرض, متد load از متد اچ تی تی پی  Get استفاده می کند, مگر اینکه ما داده ها را به صورت یک شی به مرورگر ارسال کنیم. فقط در این صورت متد POST فراخوانی می شود.

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

$btn.on(‘click’, function() {

    // this line only changes

    $bio.load(‘Bio.html p:first-child’, completeFunction);

});

۱

۲

۳

۴

 

نحوه نمایش آن بدین صورت است.

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

جمع بندی

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

0 پاسخ

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

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

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

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