CODEWITHSUNDEEP
javascriptjqueryajax
Kalim
Kalim

Reputation: 347

Issue in AJAX and JavaScript Object

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

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

Thanks.

Upvotes: 2

Views: 78

Answers (1)

Andrea Parodi
Andrea Parodi

Reputation: 5614

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());
});

Upvotes: 3

Related Questions