طراحی سایت, ساخت ربات تلگرام, آموزش php , سورس کد php ,سورس ربات تلگرام , سورس فروشگاه اینترنتی , آموزش طراحی وب

متد $.ajax() در jQuery


متد $.ajax() در jQuery

در سری مقالات قبلی معرفی متدهای ایجکس در jQuery بعضی از متدهای پراستفاده مثل $.get() , $.post() و $.load() برای ارسال درخواست های AJAX را دیدیم.

در این مقاله به طور خاص قصد داریم در مورد متد $.ajax() در jQuery آموزش بدیم.

 

متد $.ajax() در jQuery

متد $.ajax() در jQuery برای ارسال درخواست های HTTP غیرهمزمان (asynchronous) استفاده می شود.این متد از همان اوایل در ورژن ۱ به کتابخانه جی کویری اضافه شده است.

تابع $.ajax() تمام کارهایی که در مقاله قبل صحبت کردیم را انجام می دهد و بصورت زیر نوشته می شود

پارامتر url یک رشته حاوی URLی که درخواست ایجکس را ارسال می کنیم دریافت می کند. درحالی که option یک آبجکت است که شامل تنظیمات درخواست AJAX ما را مشخص می کند.

لیست گزینه های option بسیار طولانی است که بصورت مختصر توضیحاتی در مورد هر کدام قرار می دهیم. برای خواندن عمیق توضیحات می توانید به داکیومنت رسمی متد $.ajax() در jQuery مراجعه کنید.

 

پارامتر option

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

  • Accepts : نوع محتوا (content-type) ارسالی در هدر درخواست که برای سرور مشخص می کند که نوع پاسخ دریافتی قابل قبول چیست
  • Async : به منظور ارسال درخواست های asynchronous استفاده می شود که بطور پیش فرض true است.
  • beforeSend : یک تابع callback قبل از ارسال درخواست اصلی ajax است که می تواند قبل از ارسال نهایی آبجکت jqXHR را ویرایش کند
  • cache : برای کش نشدن صفحه درخواست شده می توانید false قرار بدید.
  • Complete : یک تابع که می تواند بعد از تمام شدن درخواست (بعد از error و success) اجرا شود.
  • Contents : آبجکتی که تعیین می کند که کتابخانه جی کوئری به چه صورت پاسخ دریافتی را تفسیر (parse) کند.
  • contentType : نوع محتوای داده های ارسال شده به سرور را مشخص می کند.
  • Context : آبجکتی برای به عنوان یک this می تواند برای توابع بازگشتی مربوط به ajax استفاده شود.
  • Converters : آبجکتی شامل مبدل های انواع نوع داده (dataTypes)
  • crossDomain : با true قرار دادن این مقدار می تواند درخواست های بین دامنه ای مثل JSONP را ارسال کنید (مثلا درخواست ایجکس از دامنه netparadis.ir به netparadis.com) . به طور پیش فرض این امکان وجود ندارد.
  • Data : داده ی ارسالی به سرور برای انجام عملیات روی آن بصورت ایجکس
  • dataFilter : تابعی برای هندل پاسخ خام داده ی XMLHttpRequest
  • dataType : نوع داده قابل قبول بازگشتی از سرور.
  • Error : در صورتی که درخواست ایجکس با خطا مواجه شود این تابع اجرا می شود.
  • Global : ارسال یک رویداد گلوبال برای درخواست فعلی
  • Headers : آبجکتی برای افزودن هدرهای اضافی برای ارسال به سرور
  • ifModified : اگر می خواهید حتما نتیجه درخواست موفقیت آمیز باشد, این گزینه را true قرار بدید فقط در صورتی که پاسخ از آخرین درخواست تغییر کرده باشد.
  • isLocal : اگر می خواهید که jQuery محیط اجرایی فعلی را بصورت محلی (local) در نظر بگیرد true قرار بدید
  • Jsonp : یک رشته برای تغییر نام تابع بازگشتی در یک درخواست JSONP
  • jsonpCallbak : مشخص کردن نام تابع بازگشتی در یک درخواست JSONP
  • mimeType : یک رشته برای بازنویسی mime-type درخواست XHR
  • Username : نام کاربری که به همراه پاسخ XMLHttpRequest برای احراز هویت درخواست اصلی مشخص می شود
  • Password : پسوردی که به همراه پاسخ XMLHttpRequest برای احراز هویت درخواست اصلی مشخص می شود
  • proccessData : اگر این گزینه را false قرار بدید داده های پاس داده شده به گزینه data تجزیه و تبدیل به query-string نمی شوند (البته اگر از قبل یک رشته نباشند.)
  • scriptCharset : مقدار خاصیت charset را برای تگ scriptی که با آن درخواست را ارسال می کنید, مشخص می کند.
  • statusCode : آبجکتی از اعداد کدهای HTTP و توابعی که هنگام بازگشت درخواست با کد متناضر اجرا می شود.
  • Success : در صورتی که درخواست ایجکس موفقیت آمیز باشد این تابع اجرا می شود.
  • Timeout : یک شماره که مهلت دریافت پاسخ برای یک درخواست را بر حسب میلی ثانیه مشخص می کند.
  • Traditional : اگر قصد دارید از استایل سنتی سریال کردن پارامتر ها (param serialization) استفاده کنید, true قرار بدید.
  • Type : نوع درخواست ارسالی را مشخص می کند (POST یا GET)
  • url : رشته حاوی آدرس URLی که درخواست برای آن ارسال می شود.
  • Xhr : یک callback که برای ساخت آبجکت XMLHttpRequest استفاده می شود.
  • xhrFields : یک آبجکت برای ست کردن آبجکت native XHR
حتما بخوانید  مرتب سازی سطرهای MySQL با Ajax

خب لیست طولانی است ولی مشکلی نیست در ادامه چندتا از مثال را با متد $.ajax() در jQuery می بینیم.

 

مثال اول از متد $.ajax() در jQuery

ابتدا یک مثال که در مقاله متدهای ایجکس در jQuery استفاده کردیم را این بار با $.ajax() پیاده می کنیم.

که با آپدیت آن کد ما به صورت زیر می شود :

مثال دوم از متد $.ajax() در jQuery

در این مثال یک درخواست JSONP را برای دریافت اطلاعاتی از سرویس Joind.in ایجاد می کنیم. در این وبسایت شرکت کنندگان در رویدادها می توانند نظرات خودشان را ثبت کنند.

پس ما استفاده از تابع $.ajax() عنوان و توضیحات را با ارسال درخواست به api آن دریافت می کنیم.

حتما بخوانید  انتخابگر رنگ در جی کوئری (Color Picker)

کد jQuery ما بصورت زیر خواهد بود.

در کد جی کوئری بالا, چندتا از گزینه هایی که در لیست بودند را استفاده کردیم. در ابتدا آدرس url مربوط به api را مشخص کردیم.

به دلیل اینکه api سایت موردنظر فقط درخواست های JSONPرا قبول می کند, در بالا از dataTypeبرای ست کردن این مقدار استفاده کردیم.

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

بعد از آن نوع متد درخواست HTTP را با استفاده از type بصورت GET قرار دادم.

و در نهایت از success برای نمایش عنوان و توضیحات و error برای اجرای تابع بازگشتی نمایش خطاا استفاده کردیم.

دموی آنلاین را می توانید در https://jsfiddle.net/2tqja09e/2577/ ببینید.

 

جمع بندی

در این آموزش در مورد قدرتمندترین تابع ایجکس در جی کوئری یعنی $.ajax() صحبت کردیم.

متد $.ajax() به شما امکان کنترل بیشتری روی نحوه ارسال درخواست به سمت سرور و همچنین تجزیه و تحلیل پاسخ دریافتی را می دهد.

واقعا استفاده از این تابع تمام نیازهای ما برای انجام عملیات AJAX در پروژه های مختلف را می دهد.

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

 

امیدوارم از آموزش متد $.ajax() در jQuery نهایت استفاده را برده باشید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق و پیروز باشید

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

دیدگاه کاربران

avatar

دانلود رایگان (هدیه ویژه)

کتاب آموزش زبان برنامه نویسی PHP را دانلود و همین امروز یادگیری را شروع کن و به جمع برنامه نویسان ملحق شو ;)

دانلود رایگان کتاب

سورس فروشگاهی دیجی کالا

بخش کاربران

هنوز عضو نیستید ؟ کلیک کنید

مجوزهای ما

logo-samandehi

دانلود کتاب

عضویت رایگان خبرنامه

تخفیف 150 هزار تومانی برای سورس فروشگاهی دیجی کالا تا پایان خردادماه - کد تخفیف : np150
ثانیه
دقیقه
ساعت
روز
خرید محصول