在AJAX调用中使用“上下文：…”的正确方法是什么？

Question

So I'm aware that there are a big amount of threads about AJAX and the use of the context but after hours of reading and trying I open a new Thread.

So I have this (shorten version) javascript function:

this.CallService = function () {
    var Type = this.Type;
    var Url = this.Url;
    var Data = this.Data;
    var ContentType = this.ContentType;
    var DataType = this.DataType;
    var ProcessData = this.ProcessData;

    var ClipUrl = this.ClipUrl;
    var CountMax = this.CountMax;
    var Callback = this.Callback;

    var SucceededServiceCallback = this.SucceededServiceCallback;
    var FailedServiceCallback = this.FailedServiceCallback;


    return $.ajax({
        type: Type, //GET or POST or PUT or DELETE verb
        url: Url, // Location of the service
        data: Data, //Data sent to server
        contentType: ContentType, // content type sent to server
        dataType: DataType, //Expected data format from server
        processdata: ProcessData, //True or False
        context: this,
    }).done(function (msg) {//On Successfull service call
        SucceededServiceCallback(this, msg);
    }).fail(function (msg) {
        FailedServiceCallback(this, msg);
    });
}

The Important part here are the context: this and the two callbacks done and fail . Im those two callbacks I give the this context to my callback functions:

this.SucceededServiceCallback = function (context, result) {
    if (null != context) {
        UpdateDebugInfo(context, "succeeded: " + context.DataType + " URL: " + context.Url + " Data: " + context.Data + " Result: " +result);
    }
    if (context != null && context.DataType == "json" && result != null && context.Callback != null) {
        context.Callback(context, result);
    }
}

Here the important part is that I use the context to see access the variables DataType, Callback, Url etc.
The Problem now is that the context is set to the last context used (it's an asynchron call so all the variable are the variable from the last call). So I'm pretty sure something is wrong with that context: this, part. I just don't know how to use this right. Thanks for your help.

tl;dr:
I use context: this in an Ajax call. Context is always set to the last "this" called. I want to use the "this" of the call.

Answer 1

You are "caching" all your variables before you fire each request, but in your SucceededServiceCallback function you are inspecting this.XXX - which is not the var Type it looks like you are expecting, but the actual this.Type itself.

What you could do is put these properties into an object and pass it as context, rather than your main object:

this.CallService = function () {
    var context = {
        Type : this.Type,
        Url : this.Url,
        Data : this.Data,
        ContentType : this.ContentType,
        DataType : this.DataType,
        ProcessData : this.ProcessData,
        ClipUrl : this.ClipUrl,
        CountMax : this.CountMax,
        Callback : this.Callback
    };

    var SucceededServiceCallback = this.SucceededServiceCallback;
    var FailedServiceCallback = this.FailedServiceCallback;

    return $.ajax({
        type: Type, //GET or POST or PUT or DELETE verb
        url: Url, // Location of the service
        data: Data, //Data sent to server
        contentType: ContentType, // content type sent to server
        dataType: DataType, //Expected data format from server
        processdata: ProcessData, //True or False
        context: context,
    }).done(function (msg) {//On Successfull service call
        SucceededServiceCallback(this, msg);
    }).fail(function (msg) {
        FailedServiceCallback(this, msg);
    });
}