How to make an efficient ajax based javascript script

Question

I usually structure my scripts in javascript like this or something similar when the script depends on some ajax or a server response in general. I really don't feel it's the most efficient way to do things, so what would be a better way to do these types of scripts?

function someclass() {

    //some internal variables here
    this.var1 = null;
    this.var2 = null;
    ...

    //some ajax function which gets some critical information for the other functions
    this.getAJAX = function() {
        self = this;
        urls = "someurlhere";
        //jquery ajax function
        $.ajax({
            type: "GET",
            url: url,
            dataType: 'json',
            complete: function (xhr, textStatus) {
                //get the response from the server
                data = JSON.parse(xhr.responseText);
                //call the function which will process the information
                self.processAJAX(data);
            }
         })

    this.processAJAX = function(data) {
        //set some of the internal variables here
        //according to the response from the server

        //now that the internal variables are set,
        //I can call some other functions which will
        //use the data somehow
        this.doSomething();
    }

    this.doSomething = function() {
        //do something here
    }

}

So I would use the script something like this:

//instantiate the class
foo = new someClass();

//get the information from the server
//and the processAjax function will eventually
//call the doSomething function
foo.getAjax();

So I really don't like this because it's not clear in the use of the script what is happening. I would like to be able to do something like this:

//instantiate the class
foo = new someClass();

//get info from the server
//in this example, the processAJAX function will not call the doSomething
foo.getAjax();

//do something
foo.doSomething();

This however does not work because usually the response from the server takes some time so when the doSomething is called, the necessary information is not there yet, therefore, the function does not do what it is suppose to do.

How to make this work?

I am sure the answer is already somewhere on StackOverflow, however I could not find anything, so I would appreciate both, either an answer or a link to a resource which would explain this, possible on StackOverflow. Any help is appreciated. Thank you.

Tobias Cohen · Accepted Answer · 2011-06-27 01:31:23Z

2

The standard pattern for this is to accept a callback function to your asynchronous method, which the class takes responsibility for calling when the operation is complete.

function someclass() {
    this.getAJAX = function(callback) {
        this.afterAJAXCallback = callback;
        ...
    });

    this.processAJAX = function(data) {
        ...
        if (this.afterAJAXCallback) this.afterAJAXCallback();
    }
}

Then you can use a closure callback in place to structure your code, much in the way you would when using jQuery's $.ajax:

foo = new someClass();
foo.getAjax(function() {
    foo.doSomething();
});

answered Jun 27, 2011 at 1:31

Tobias Cohen

20k8 gold badges56 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

miki725 Over a year ago

this seems a little clunky. is there a not so standard solution?

Andrew Over a year ago

Less verbose: foo.getAjax(foo.doSomething); This may also be "clunky" but it's the nature of asynchronous programming. The basic problem is that you can't be assured when the AJAX call will return, so you either need to provide a callback or establish some system of event listeners. Callbacks are by far the easier solution.

Trott · Accepted Answer · 2011-06-27 01:22:49Z

Sounds like you want an ajax event listener or a callback. Do some searches for that and you'll find some solutions. A lot of them will be jQuery-based, but it is certainly possible to do it without jQuery if that is a bad fit for your application.

For jQuery, the relevant documentation is at http://api.jquery.com/jQuery.ajax/. It doesn't call it an event listener, but see the part about context and the callback for succes.

Another possibility would be to do your ajax calls synchronously rather than asynchronously. (Again, do some searches and you'll find lots of stuff.) If you go that route, you want to be careful about making sure that the synchronous call doesn't basically hang your app waiting for a response.

Saxoier · Accepted Answer · 2011-06-27 01:25:00Z

0

If you use XMLHttpRequest() synchronous you can do it the way you prefer.

answered Jun 27, 2011 at 1:25

Saxoier

1,2871 gold badge8 silver badges8 bronze badges

1 Comment

Tobias Cohen Over a year ago

Doing this will cause the page, and maybe even the user's browser, to freeze completely while the request is carried out. I'd suggest you want to avoid doing that.

Collectives™ on Stack Overflow

How to make an efficient ajax based javascript script

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related