Calling JavaScript function after AJAX Call

This is a common problem for any JavaScript developer. If you are also facing this problem then i have a solution for you.

The solution for this is Callback functions.

In JavaScript we can pass function name as parameter to any function.

In JavaScript given below i am using two functions:

1.  ajax(String url,String callback_function_name) - this is actual AJAX function which will do the desired AJAX task for you

2.  postAJAX() - this is function which will be called after AJAX function is completed.

Example JavaScript Code

var output=null;

function ajax(url,callback){
    var req=new XMLHttpRequest();

    req.onreadystatechange=function(){
        if(req.readyState==4 && req.status){
            output=req.responseText;
            callback();
        }
    }

    req.open('GET',url,true);
    req.send(null);
}

function postAJAX(){
    alert(output);                
}

ajax('http://sachinpuri.com/rest/articles/1',postAJAX);            

In following JS ajax() function will complete it's task and it will save the output in "output" variable after completing it's task it will call 'callback' function which is postAJAX in our current example. postAJAX will alert the output (you can do whatever you want in this function).

Warning

This ajax() function will not work in Internet Explorer, but you can write IE specific AJAX code to make it IE compatable. Please use Mozilla or Chrome to run this example code.

That's it enjoy the coding :-)