如何使用应用于XMLHttpRequest的ajaxComplete

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!

Answer 1

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

Answer 2

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.