How can I use ajaxComplete applied to a XMLHttpRequest

Question

I'm doing an asynchronous request to load a json file using XMLHttpRequest(). I would need to wait for the request completion before going on with the rest.

I saw the ajaxComplete() should do just this, but I can't apply it to my actual code and get it working.

Here I'm setting up the function that calls the json via asynchronous request

function ajaxCall(){

    xmlhttp.onreadystatechange = function(){

        if(xmlhttp.readyState==4 && xmlhttp.status==200){
            arrayImages = JSON.parse(xmlhttp.responseText);
            output(arrayImages);
        }
    }

    xmlhttp.open("GET", url, true);
    xmlhttp.send();

}

Here I'm calling that function

ajaxCall();

Now I want that it is completed

do other things

Any help ?

Thanks!

Make `ajaxCall` accept a callback that "does other things". See [How do I return the response from an asynchronous call?](http://stackoverflow.com/q/14220321/218196) for concrete examples. — Felix Kling, Nov 09 '16 at 14:20
*"I saw the ajaxComplete() should do just this"* That seems to be a jQuery thing. Since you are not using jQuery it doesn't apply to you. — Felix Kling, Nov 09 '16 at 14:21

score 1 · Answer 1 · answered Nov 09 '16 at 14:23

You have two options.

A Promise

function ajaxCall(){
    return new Promise(function(success){
        xmlhttp.onreadystatechange = function(){
            if(xmlhttp.readyState==4 && xmlhttp.status==200){
                arrayImages = JSON.parse(xmlhttp.responseText);
                output(arrayImages);
                success();
            }
        }
        xmlhttp.open("GET", url, true);
        xmlhttp.send();
    });
}

Then you can do stuff when it's done

ajaxCall().then(function(){
    // Do stuff after
});

Or you can use a callback...

function ajaxCall(callback){
    xmlhttp.onreadystatechange = function(){
        if(xmlhttp.readyState==4 && xmlhttp.status==200){
            arrayImages = JSON.parse(xmlhttp.responseText);
            output(arrayImages);
            callback();
        }
    }
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
}

Then do stuff after like this

ajaxCall(function(){
    // do stuff after
});

Thanks for the help, I tried all of them, in particular the second one, but it doesn't want togo into the function. So it runs ajaxCall() but it doesn't run the code inside... ajaxCall(function(){ alert('Hello!'); }); — rolfo85, Nov 10 '16 at 13:53
@rolfo85 - did you add the callback parameter to the function? did you call the callback parameter in the function? there are two places it needs to be added. post your updated code. — I wrestled a bear once., Nov 10 '16 at 14:09

score 1 · Answer 2 · answered Nov 09 '16 at 14:25

ajaxComplete is part of the jQuery library. It only binds itself to jQuery ajax requests. While these usually wrap XMLHttpRequest, they can't touch XMLHttpRequest when you use it manually.

To run some code after the response is back, you need to wait for a suitable event. You are already doing that here:

if(xmlhttp.readyState==4 && xmlhttp.status==200){

Place the code you want to run after the response is received inside that if statement.

If you want to make ajaxCall reusable, then pass a function to it as an argument, then call that function inside the if statement.

How can I use ajaxComplete applied to a XMLHttpRequest

2 Answers2