XHRHttpRequest complete function

Question

How can I call a function when a XHRHttpRequest is completed or returned response seccuss. Without using jquery.

xmlhttp = new XMLHttpRequest();
xmlhttp.success()

this kind of a function which will be called after every request

That would be `onreadystate` etc. and it's explained in every ajax tutorial out there, all you have to do is search for `XMLHttpRequest` on Google. — adeneo, Oct 19 '14 at 20:44
You might want to have a look at [this question](http://stackoverflow.com/q/24196140/1048572), then just add a load/error handler to each sent request. — Bergi, Oct 19 '14 at 21:07

Sohel · Accepted Answer · 2014-10-20T10:47:38.527

You can use the following code.

var ajaxRequest;  

try{
    // Opera 8.0+, Firefox, Safari, Chrome
    ajaxRequest = new XMLHttpRequest();
} catch (e){
    // Internet Explorer Browsers
    try{
        ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try{
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e){
            // Something went wrong
            console.log('something went wrong. Check the error! '+ e);              
        }
    }
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
    if(ajaxRequest.readyState == 4){
        var response = ajaxRequest.responseText;
       // do something here with the response object
       // you could JSON.parse to parse the response if it is json string
    }
}
ajaxRequest.open("GET", "get_data.php", true); // true for asynchronous request
ajaxRequest.send(null);   // initiate a send(call)

What I need is a callback to run after every ajax call completion not for a specific/single request. — Yousha Rizvi, Oct 20 '14 at 08:31
it will be called for every request you send. ajaxRequest.open("GET", "get_data.php", true); ajaxRequest.send(null); // another call ajaxRequest.open("GET", "get_response.php", true); ajaxRequest.send(null); and so on. You can change the url and the callback will be executed. — Sohel, Oct 20 '14 at 10:57

Muhammad Ahsan Ayaz · Answer 2 · 2014-10-19T20:56:13.447

-1

xmlhttp.onreadystatechange = function(){
     if(request.status===200){
         var response = xmlhttp.responseText;
         //do something with response
     }
}

edited Oct 19 '14 at 20:56

answered Oct 19 '14 at 20:45

Muhammad Ahsan Ayaz

1,867
10
12

So just converting **Asynchronous** Javascript and XML to **Synchronous** is the solution? This is just about the worst thing you can do! – adeneo Oct 19 '14 at 20:48
Was already editing.. and edited my answer.. Yeah exactly that's the worst thing anyone can do :) – Muhammad Ahsan Ayaz Oct 19 '14 at 20:52
I don't want to send any request, I just want to set a function to execute after every existing request, just as ajaxComplete() but without jquery – Yousha Rizvi Oct 19 '14 at 20:54
@YoushaRizvi .. edited it again.. just use the xmlhttp.onreadystatechange function, it's the callback when the state of the request changes. just check the status and readyState(optional) and you're ready to go.. no need to use jQuery – Muhammad Ahsan Ayaz Oct 19 '14 at 20:57
@YoushaRizvi - There is no such function in native javascript, jQuery is able to do that because it short circuits XMLHttpRequest and can add the global ajax handlers directly to $.ajax instead. – adeneo Oct 19 '14 at 21:01
@adeneo .. You can still get the similar effect by checking if the readystate is 4 and the status is 200 in the onreadystatechange function. the dependency of jquery is not needed here. – Muhammad Ahsan Ayaz Oct 19 '14 at 21:06
1

But that has to be added for each request, it's not a global ajax handler, which is what Yousha is asking for. – adeneo Oct 19 '14 at 21:07
It could be done if I could bind a method in XMLHttpRequest.prototype – Yousha Rizvi Oct 20 '14 at 11:03

XHRHttpRequest complete function

2 Answers2