JavaScript AJAX Call OnComplete function

Question

I have to build an ajax site without the use of JQuery (which is a pain), So I have been trying to build ajax requests in a similar fashion.

Currently I have this:

function $ajax(json) {
    var xmlhtml;

    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhtml = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhtml = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhtml.onreadystatechange = function () {
        if (xmlhtml.readyState == 4) {
            if (xmlhtml.status == 200) {
                alert(xmlhtml.responseText);
            }
            else if (xmlhtml.status == 400) {
                alert('There was an error 400');
            }
            else {
                alert('something else other than 200 was returned');
            }
        }
    };

    xmlhtml.open(json.type, json.url, true);
    xmlhtml.send();
};

and I call it like so:

(function () {
    $ajax({
        type: "GET",
        url: "/api/stock"
    });
})();

which is fine, it returns my records. What I need to do is create callback functions for complete (status == 200) and error (status != 200). How can I do this?

Please note, I can not use jQuery.

So...why can't you use jQuery? It's just a free library of functions that makes many tasks easier. You're going to need to do much more to build a sea-worthy ajax routine if you're gonna write it yourself. — Jonathan M, Sep 18 '14 at 19:09
It's great that you're not jumping off bridges by forcing 70KB down people's throats but please explain what `$ajax({`... is if it is not jQuery? — John, Sep 18 '14 at 19:14
because this application has to work on a scanner which has ie5.5 on it. Trust me when I say I can't use jQuery, I am not just saying it for the sake of it. — r3plica, Sep 18 '14 at 20:00

score 2 · Accepted Answer · answered Sep 18 '14 at 19:10

Well, the simplest way would be for your function to accept another parameter which is the function:

function $ajax(json, callback) {
    var xmlhtml;

    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhtml = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhtml = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhtml.onreadystatechange = function () {
        if (xmlhtml.readyState == 4) {
            if (xmlhtml.status == 200) {
                callback(xmlhttp.responseText)
            }
            else if (xmlhtml.status == 400) {
                // don't ignore an error!
            }
            else {
                alert('something else other than 200 was returned');
            }
        }
    };

    xmlhtml.open(json.type, json.url, true);
    xmlhtml.send();
}

Which would let you do

$ajax({...}, function(response){
    // done here
})

As for your function itself, if you can use modern web browsers I'd do this slightly differently using promises. Like the above code this requires no external references but it does require a modern browser:

function xhr(params){
   var xhr = new XMLHttpRequest()
   xhr.open(params.type || "GET", params.url);

   return new Promise(function(resolve, reject){ 
       xhr.onload = function(e){
          if(xhr.status === 200) return resolve(xhr.responseText);
          return reject(new Error("XHR response not 200 " + xhr.status);
       };
       xhr.onerror = reject;
       xhr.send(params.data)
   });
}

thanks, this looks like it is just what I need. Going to test it out before I mark it and +1 it :d — r3plica, Sep 18 '14 at 20:02
@r3plica if this helped you - see if my more general answer here is useful http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call/16825593#16825593 Good luck and happy coding :) — Benjamin Gruenbaum, Sep 18 '14 at 20:03
this is what I did : http://jsfiddle.net/1q39qme9/ I know it returns an error but you should get the idea from that — r3plica, Sep 18 '14 at 20:17

JavaScript AJAX Call OnComplete function

1 Answers1