متد $.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

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

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

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

$('#main-menu a').click(function(event) {
   event.preventDefault();
 
   $('#main').load(this.href + ' #main *', function(responseText, status) {
      if (status === 'success') {
         $('#notification-bar').text('The page has been successfully loaded');
      } else {
         $('#notification-bar').text('An error occurred');
      }
   });
});

$('#main-menu a').click(function(event) {

event.preventDefault();

$('#main').load(this.href + ' #main *', function(responseText, status) {

if (status === 'success') {

$('#notification-bar').text('The page has been successfully loaded');

} else {

$('#notification-bar').text('An error occurred');

}

});

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

$('#main-menu a').click(function(event) {
   event.preventDefault();
 
   $.ajax(this.href, {
      success: function(data) {
         $('#main').html($(data).find('#main *'));
         $('#notification-bar').text('The page has been successfully loaded');
      },
      error: function() {
         $('#notification-bar').text('An error occurred');
      }
   });
});

$('#main-menu a').click(function(event) {

event.preventDefault();

$.ajax(this.href, {

success: function(data) {

$('#main').html($(data).find('#main *'));

$('#notification-bar').text('The page has been successfully loaded');

error: function() {

$('#notification-bar').text('An error occurred');

}

});

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

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

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

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

$.ajax({
   url: 'http://api.joind.in/v2.1/talks/10889',
   data: {
      format: 'json'
   },
   error: function() {
      $('#info').html('<p>An error has occurred</p>');
   },
   dataType: 'jsonp',
   success: function(data) {
      var $title = $('<h1>').text(data.talks[0].talk_title);
      var $description = $('<p>').text(data.talks[0].talk_description);
      $('#info')
         .append($title)
         .append($description);
   },
   type: 'GET'
});

$.ajax({

url: 'http://api.joind.in/v2.1/talks/10889',

data: {

format: 'json'

error: function() {

$('#info').html('<p>An error has occurred</p>');

dataType: 'jsonp',

success: function(data) {

var $title = $('<h1>').text(data.talks[0].talk_title);

var $description = $('<p>').text(data.talks[0].talk_description);

$('#info')

.append($title)

.append($description);

type: 'GET'

});

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

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

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

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

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

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

جمع بندی

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

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

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

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

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

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

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

لغو پاسخ

رضا ۳۰ اسفند ۱۳۹۹

با سلام!
خیلی ببخشید من اگر بخوام بعد از لود شدن صفحه مدام اطلاعات بین سرور و کلاینت جابه جا بشه میشه از ajax استفاده کرد و اگر میشه چطور مثلا شما گفتید که بعد از کلید، اما من میخوام بعد از لود کامل صفحه ای اتفاق بیوفته!
خیلی ممنون میشم راهنمایی کنید.

پاسخ

حسن شفیعی ۳۰ اسفند ۱۳۹۹

سلام. باید از document.ready استفاده کنید تا چک بشه بعد لود کامل صفحه کدها اجرا بشه

پاسخ

محمد ۲۲ شهریور ۱۳۹۸

سلام
میشه یک مثال با این کد زیر بزنید که چه جوری اطلاعات از طریق فرم به صفحه دیگر ارسال کنیم:
$.ajax({
url: ‘http://api.joind.in/v2.1/talks/10889’,
data: {
format: ‘json’
},
error: function() {
$(‘#info’).html(‘

An error has occurred

‘);
},
dataType: ‘jsonp’,
success: function(data) {
var $title = $(”).text(data.talks[0].talk_title);
var $description = $(‘

‘).text(data.talks[0].talk_description);
$(‘#info’)
.append($title)
.append($description);
},
type: ‘GET’
});

پاسخ

حسن شفیعی ۲۲ شهریور ۱۳۹۸

سلام. خیر باید با آزمایش و خطا یاد بگیرید و از کنسول هم کمک بگیرید.
موفق باشید.

پاسخ

متد $.ajax() در jQuery

متد $.ajax() در jQuery

پارامتر option

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

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

جمع بندی

قابلیت جستجو با فیلتر سفارشی در DataTables با پردازش سمت سرور

آموزش جی کوئری – Ajax چیست؟ Ajax در جی کوئری

بخش دوم معرفی متدهای ایجکس در jQuery – متد $.post و $.get

معرفی متدهای ایجکس در jQuery – بخش اول

لغو پاسخ

دوره آموزش ساخت دیجی کالا با php به همراه اپلیکیشن اندروید

آموزش ساخت ربات تلگرام با PHP (از پایه و پروژه محور)

دوره جامع آموزش طراحی سایت + پروژه قالب فروشگاه