Issue in AJAX and JavaScript Object

Question

I am trying to write a JavaScript Object which has many Properties and Methods. The basic function of this code is to send an ajax call and get data from server. Code IS:

function restClient(options) {
    var _response;
    var _response_status;
    var _response_message;
    var _response_data;

    // Default Options
    var _default = {
        restCall: true,
        type: "GET",
        url: '',
        contentType: "application/json; charset=utf-8",
        crossDomain: false,
        cache: false,
        dataType: 'json',
        data: {},
        beforeSend: _ajaxBeforeSend,
        success: _ajaxSuccess,
        error: _ajaxError,
        complete: _ajaxComplete
    };

    // Extend default Options by User Options
    var ajaxOptions = $.extend(_default, options);

    // Private Methods
    function _ajaxBeforeSend() {

    }
    function _ajaxSuccess(response) {
        _response = response;
        _response_status = response.status;
        _response_message = response.message;
        _response_data = response.data;
    }
    function _ajaxError(xhr, status, error) {
        _response_status = xhr.status;
        _response_message = error;
    }

    function _ajaxComplete(xhr, status) {

    }

    // Send Ajax Request
    this.sendRequest = function() {
        $.ajax(ajaxOptions);
    };


    // Get Server Response Pack [status,message,data]
    this.getResponse = function() {
        return _response;
    };

    // Get Server Response Status: 200, 400, 401 etc
    this.getStatus = function() {
        return _response_status;
    };

    // Get Server Message
    this.getMessage = function() {
        return _response_message;
    };

    // Get Server Return Data
    this.getData = function() {
        return _response_data;
    };
}

Now I am trying to create object using new operator and call sendRequest(); method to send an ajax call and then I am calling getResponse(); to get server response like:

var REST = new restClient(options);
REST.sendRequest();
console.log(REST.getResponse());

Every thing is working properly But the problem is REST.getResponse(); call before to complete Ajax which give me empty result. If i do like this

$(document).ajaxComplete(function(){
        console.log(REST.getResponse());
    });

then it work But Still two problems are

If there are another ajax call its also wait for that
its looking bad I want to hide this ajaxComplete() some where within restClient(); Please Help me.

Thanks.

possible duplicate of [How to return the response from an AJAX call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call) — Musa, Feb 01 '14 at 15:06

score 3 · Accepted Answer · answered Feb 01 '14 at 15:08

3

You have to change method sendRequest to accept a callback, that you'll call on response completion.

this.sendRequest = function(cb) {
    this.cb = cb; 
    $.ajax(ajaxOptions);
};

this._ajaxComplete = function(xhr, status) {
    this.cb && this.cb();
}

Also, after defining this._ajaxComplete change the _default.complete handler, in order to bind the this object, otherwise you'll miss the cb property:

_default.complete = this._ajaxComplete.bind(this);

Your client code will become:

var REST = new restClient(options);
REST.sendRequest(function(){
    console.log(REST.getResponse());
});

answered Feb 01 '14 at 15:08

Andrea Parodi

5,173
24
44

Thanks a Lot works with a minor change _ajaxComplete.bind(this); instead of this._ajaxComplete.bind(this); and I am still thinking on this logic :) – Kalim Feb 01 '14 at 15:25
It's the same, if you declare `this._ajaxComplete = function()...` then you'll use `this._ajaxComplete.bind(this)`. If you declare `function _ajaxComplete() ...` then use _ajaxComplete.bind(this). The bind call return a function "binded" to the argument, it's `this` variable always refer to the argument you bind it. See [MDN bind page](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) – Andrea Parodi Feb 01 '14 at 15:40

Issue in AJAX and JavaScript Object

1 Answers1