معمولا ، تابع ajax جی کوئری برای یک درخواست ایجکسی استفاده می شود.تابع Ajax فقط برای ایجاد یک درخواست ایجکسی استفاده می شود.در این مقاله قصد توضیح یک روش ارائه شده توسط جی کوئری برای نمایش دادن متد callback بر اساس درخواست چندگانه ایجکس را دارد.این روش بر اساس مفهومی از Deferred object ( شیء متوقف شده) داریم.

تابع callback زمانیکه فراخوانی ایجکسی با موفقیت انجام شد اجرا می شود.به صورت اختیاری ، یک تابع callback  دیگر زمانیکه فراخوانی ایجکس خطایی را باز میگرداند فراخوانی میشود.با این حال، این تابع نمی تواند چندین درخواست ایجکس را ایجاد کند و توابع callback براساس نتیجه این درخواست ها نمایش دهد.یک سناریو این است که یک صفحه وب چند درخواست ایجکسی برای گرداوری داده برای قسمت های مختلف صفحه در زمانیکه user interaction غیرفعال است ، ایجاد کند.صفحه user interaction را فقط در زمانی فعال میکند که تمام داده ها را دریافت کرده باشد.این مقاله قصد توضیح یک روش ارائه شده توسط جی کوئری برای نمایش دادن متد callback بر اساس درخواست چندگانه ایجکس را دارد.

با استفاده از کد

ابتدا ، دو تابع ASP.NET Web API که برای پذیرش فراخوانی های ایجکسی سرور استفاده میشوند را مینویسیم.

public class ValuesController : ApiController
{
    // GET api/values
    public IEnumerable<string> Get()
    {
        return new string[] { "value1", "value2" };
    }

    // GET api/values/5
    public string Get(int id)
    {
        string s = "Id is " + Convert.ToString(id);
        return s;
    }
}

برای ایجاد یک درخواست ایجکسی از تابع ajax جی کوئری استفاده می کنیم.در زیر یک مثال ساده آورده ایم.

$.ajax({
    url: 'api/values',
    dataType: 'json',
    type: 'GET',
    success: function (data) {
        alert(data[0]);
    },
    error: function () {
        alert('Error!');
    }
});

تابع callback برای موفقیت و خطا منتظر فراخوانی درخواست ایجکس است.کتابخانه جی کوئری یک راه برای ایجاد هر گونه تابع callback که در انتظار چند فراخوانی ایجکسی هستند را ارائه داده است.این روش بر اساس یک شیء به نام Deferred است.

یک شیء Deferred می تواند توابع callback را بر اساس اینکه آیا شیء Deferrred  حل شده یا رد شده است، نمایش دهد.

در زیر یک مثال ساده از شی Deferrred را قرار داده ایم.

// Create a Deferred object.
var def1 = $.Deferred();
// Add a function to be called when the Deferred object is resolved.
def1.done(function (data) {
    alert(data);
});
// Resolve the Deferrd object.
def1.resolve('Resolved!');

// Create a Deferred object.
var def2 = $.Deferred();
// Add a function to be called when the Deferred object is rejected.
def2.fail(function (data) {
    alert(data);
});
// Reject the Deferrd object.
def2.reject('Rejected!');

توجه داشته باشید که شیء Deferred  را می توان زنجیر کرد.

در زیر مثالی از شی Deferred را قرار داده ایم.

var def = $.Deferred();
def.done(function (data) {
    alert(data);
}).fail(function (data) {
    alert(data);
});
// Reject the Deferrd object.
def.reject('Rejected!');

شی Deferred  یک متد به نام promise دارد.که این متد یک شی promise را برمیگرداند.یک شی Promise یک زیرمجموعه از متدهای Deferred را برای جلوگیری از تغییر وضعیت آن به نمایش می گذارد.این بدان معنی است که برای جلوگیری از قرار گرفتن در معرض اخطار به صورت دستی حل یا رد شود.یک شی promise متدهای Deferred  زیر را نمایش میدهد.

then و done و fail و always و pipe و progress و state و promise.

و متدهای زیر را نمایش نخواهد داد:

resolve و reject و  notify و resolveWith و rejectWith  و notifyWith.

شی promise  میتواند مانند یک شی Deferred که حالت آن به صورت دستی قابل تغییر نیست ، رفتار کند.تابع ajax jQuery یک شی jqXHR را باز می گرداند.دو مورد مهم در رابطه با شیء jqXHR وجود دارد:

اول اینکه ، یک شیء jqXHR یک superset  از شی XMLHTTPRequest است.به عنوان مثال ، یک شی jqXHR  میتواند بر روی حالت XMLHTTPRequest با استفاده از ارجاع پراپرتی readyState آن query بزند.

اگر مقدار readyState آن برابر 4 باشد ، درخواست ایجکس کامل شده است.

ثانیا ، یک شی jqXHR  اینترفیس Promise  را پیاده سازی میکند و تمام متدهای Promise را به نمایش میگذارد.

اساسا ، یک شی jqXHR  میتواند مانند شی Promise  رفتار کند.به عنوان مثال ، متد done میتواند مانند متد CallBack برای شی jqXHR  مورد استفاده قرار گیرد.کتابخانه jQuery  یک تابع به نام when  برای پذیرفتن اشیاء چندگانه Deferred و بازگرداندن یک شی Promise  ارائه داده است.شی Promised زمانی حل خواهد شد که تمام اشیاء Deferred حل شوند.و این زمانیکه هر شی Deferred  رد بشه ، رد خواهد شد.اشیاء Deferred که به متد when پاس داده میشوند میتوانند اشیاء Deferred ، Promise  یا jqXHR  باشند. 

در اینجا یک مثال از کد انتظار برای درخواست های چندگانه ایجکس قرار داده ایم:

$(document).ready(function () {
    var j1 = $.ajax({
        url: 'api/values',
        dataType: 'json',
        type: 'GET'
    });

    var j2 = $.ajax({
        url: 'api/values',
        dataType: 'json',
        data: { id: 5 },
        type: 'GET'
    });

    $.when(j1, j2).then(function (a1, a2) {
        alert('Both j1 and j2 succeedeed!');
    }, function (jqXHR, textStatus, errorThrown) {
        var x1 = j1;
        var x2 = j2;
        if (x1.readyState != 4) {
            x1.abort();
        }
        if (x2.readyState != 4) {
            x2.abort();
        }
       alert('Either j1 or j2 failed!');
    });
});

اولا ، دو متغییر اشیاء jqXHR  را که از دو فراخوانی  jQuery Ajax  بازگشت داده شده اند را  ذخیره میکنند.سپس ، این دو شی به تابع when پاس داده میشوند.شی Promise از تابع when که به تابع then زنجیر یا متصل شده است بازخواهد گشت.تابع then کنترل کننده (handler) برای شی Promise اضافه میکند.اولین پارامتر تابع then یک تابع success است که زمانیکه Promise حل شد (resolved) فراخوانی میشود.پارامتر دوم از تابع then یک تابع fail  است که زمانیکه Promise رد شد (rejected) فراخوانی خواهد شد.

تابع fail حالت هر کدام از فراخوانی های ایجکس را چک میکند.اگر فراخوانی ایجکس کامل نبود ، این بی نتیجه (aborted) می ماند.

توجه داشته باشید که تابع fail هنوز می تواند به متغیرهای j1 و j2 که خارج از محدوده تابع when است زمانیکه تابع document ready اجرا شده و تمام شده است ،  دسترسی پیدا کند.که این به دلیل  JavaScript closures است.

یک closure یک تابع درونی است که به متغیرهای تابع خارجی و حتی تابع خارجی بسته شده دسترسی دارد.به عبارت دیگر ، تابع درونی میتواند محیطی را که در ابتدا در آن تعریف شده است را حفظ کند.