آموزش استفاده از Ajax در jQuery

how to use ajax in jquery 4973 تصویر

آموزش استفاده از Ajax در jQuery

AJAX مخفف عبارت (Asynchronous JavaScript And XML) می باشد که شامل فناوری ها و استانداردهای وب است و به منظور ایجاد صفحات وب داینامیک استفاده می شود. در حالت عادی ماهیت صفحات وب به گونه ای است که به ازای هر کنش و واکنش میان کاربر و سایتی که با آن در حال کار است، کل صفحه ای که در آن قرار دارد به طور کامل بارگذاری (Refresh) می شود. اما به کمک Ajax می توان صفحات را به گونه ای طراحی کرد که در هنگام کار با آن ها فقط بخش های مورد نیاز بارگذاری شوند و این بارگذاری ها باعث لود شدن دوباره صفحه نمی شود.

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

تابع ajax()

تابع ajax() به منظور انجام درخواست های HTTP به صورت ناهمگام (Asynchronous) استفاده می شود. در زیر الگوی این تابع را مشاهده می کنید:

پارامتر URL آدرسی که می خواهید درخواست HTTP به آن ارسال کنید را مشخص می کند و پارامتر دوم شامل گزینه هایی است که به منظور پیکربندی درخواست استفاده می شود.

پارامتر options

لیست گزینه هایی که توسط تابع ajax() می تواند پذیرفته شود را می توایند به همراه توضیحات کامل در مستندات رسمی Ajax مشاهده کنید.

به دلیل این که این توضیحات ارائه شده در لینک بالا بسیار زیاد است، ما آن ها را به صورت مختصر برای شما توضیح می دهیم.

  • accepts :  محتوای هدر درخواست را مشخص می کند و به سرور می گوید که پاسخ او باید در چه فرمتی باشد.
  • async : زمانی که می خواهید درخواست شما به صورت همگام (Synchronous) باشد، این گزینه به صورت false تنظیم کنید.
  • beforeSend : یک تابع callback است که قبل از ارسال درخواست، می تواند برای تغییر شیء jqXHR استفاده شود.
  • cache : زمانی که می خواهید آدرسی که به آن درخواست ارسال کرده اید در مرورگر به صورت Cache ذخیره نشود، این گزینه را به صورت false تنظیم کنید.
  • complete : زمانی که درخواست به صورت کامل پایان یابد این تابع فراخوانی می شود (بعد از اجرا شدن Callback های success و errror).
  • contents : این شیء تعیین می کند پاسخ دریافتی چگونه باید تجزیه (Parse) شود.
  • contentType : نوع داده های ارسالی به سرور را مشخص می کند.
  • context : این شیء context تمامی callback های مرتبط با Ajax را مشخص می کند.
  • converters : یک شیء که شامل مبدل های dataType به dataType دیگر است.
  • crossDomain : زمانی که به صورت false تنظیم گردد، درخواستی ارسالی به سرور فقط باید از دامنه اصلی ارسال شود.
  • data : داده هایی که در هنگام درخواست باید به سرور ارسال شوند را مشخص می کند.
  • dataFilter : تابعی که برای handle کردن پاسخ خام XMLHttpRequest استفاده می شود.
  • dataType : نوع داده های دریافتی از سرور را مشخص می کند.
  • error : تابعی که هنگام ناموفق بودن درخواست فراخوانی می شود.
  • global : اگر برابر با false باشد، رویدادهای ajax غیرفعال می شوند. پیشفرض true می باشد.
  • headers : شیء که شامل هدرهای اضافی برای ارسال به سرور است.
  • ifModified : یک هدر HTTP است که یک درخواست مشروط به سرور می ‌فرستد. اگر محتوا تغییرات نداشته باشد سرور تنها یک هدر با کد وضعیت ۳۰۴ را به عنوان پاسخ باز می گرداند. اگر محتوا تغییرات داشته باشد سرور پاسخ به یک درخواست را با ارائه کد وضعیت ۲۰۰ پاسخ می‌دهد و درخواست منابع/سند را می‌دهد.
  • isLocal : برای آن که jQuery محیط فعلی را به عنوان محلی شناسایی کند، این گزینه را به صورت true تنظیم کنید.
  • jsonp : یک رشته که برای override کردن نام تابع callback در یک درخواست JSONP استفاده می شود.
  • jsonpCallback : نام تابع callback برای یک درخواست JSONP مشخص می کند.
  • mimeType : یک رشته که mimeType شیء XHR را override می کند.
  • password : یک پسورد که با XMLHttpRequest در پاسخ به یک درخواست احراز هویت HTTP استفاده می شود.
  • processData: اگر برابر true باشد، پارامترهای ارسالی در data قرار می گیرند و در غیر این صورت به صورت رشته ارسال می شوند.
  • scriptCharset : صفت charset را بر روی تگ اسکریپت مورد استفاده در درخواست تنظیم می کند.
  • statusCode : یک شیء که شامل کد های HTTP و توابعی برای handle کردن آن ها است.
  • success : تابعی که هنگام موفق بودن درخواست فراخوانی می شود.
  • timeout : یک عدد است که زمان timeout درخواست را بر حسب میلی ثانیه مشخص می کند.
  • traditional : برای استفاده از سبک param serialization این گزینه را به صورت true تنظیم می شود.
  • type : متد ارسال درخواست را مشخص می کند. می تواند به صورت GET یا POST تنظیم شود.
  • url : رشته ای که شامل URL که درخواست به آن ارسال شده است.
  • username : یک نام کاربری که با XMLHttpRequest در پاسخ به یک درخواست احراز هویت HTTP استفاده می شود.
  • xhr : یک callback برای ایجاد شیء XMLHttpRequest است.
  • xhrFields : یک شیء برای تنظیم بر روی شیء XHR است.

مثال

مثال زیر یک درخواست به آدرس http://api.joind.in/v2.1/talks/10889 ارسال می کند و نتیجه دریافتی که به صورت JSON است در صفحه نمایش می دهد.

how to use ajax in jquery 4973 1 تصویر

محتوای فایل script.js :

محتوای فایل style.css :

 محتوای فایل index.html :

سورس کامل مثال بالا را می توانید در انتهای این مطلب دانلود کنید.


باکس دانلود
شناسه:
۴۹۷۳
فرمت فایل:
rar
اندازه فایل:
۱٫۷۱ کیلوبایت
لینک دانلود:
روی دکمه G+1 برای محبوب کردن سایت کلیک کرده سپس از لینک زیر دانلود را انجام دهید
مطالب مرتبط
ثبت نظر
ریفریش کنید!
نظرات کاربران (۰ مورد)

هیچ نظری ثبت نشده است