JavaScript function to return AJAX response (no jQuery)?

Question

I need a pure JavaScript function (Sorry, no jQuery) that will return the response from a successful AJAX call. Here's the function I've got so far, I want to return the HTMLobject with the HTML from the response:

function getHtml(url) {
    var httpRequest;
    var HTMLobject;

    if (window.XMLHttpRequest) {
        httpRequest = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        try {
            httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
        }
    }

    if (!httpRequest) {
        console.error('Cannot create an XMLHTTP instance');
        return false;
    }

    httpRequest.onreadystatechange = function() {
        if (httpRequest.readyState === 4) {
            if (httpRequest.status === 200) {
                // OK, turn the string into HTML.
                var div = document.createElement('div');
                div.innerHTML = httpRequest.responseText;
                // Assign the converted HTML to HTMLobject.
                HTMLobject = div.childNodes[0];
            } else {
                console.debug('There was a problem with the request.');
            }
        }
    };

    httpRequest.open('GET', url);
    httpRequest.send();

    return HTMLobject;
}

I know why, HTMLobject returns undefined, but I need it to work. Is there a way to have the function return the object after the AJAX has completed?

The principles are the same whether you use a library or not. — Quentin
– Quentin, Commented Feb 28, 2013 at 11:47
Up-voted simply because you're trying to do it without a framework. :) — John
– John, Commented Nov 30, 2013 at 12:42

Arun P Johny · Accepted Answer · 2013-02-28 11:21:13Z

1

No, the solution is such a case is to use a callback function.

Ex:

function getHtml(url, callback) {
    ....
    ....
    callback(HTMLobject); //instead of returning the HTMLobject, call a callback function as pass the `HTMLobject` as a argument.
}

Usage:

getHtml('url', function(HTMLobject){
    //Do something with HTMLobject
});

instead of

var HTMLobject = getHtml('url');
//Do something with HTMLobject

Making a request async: false is a bad idea since it will block the page till the request is completed(UI will not get redrawn and ui interaction will not happen).

edited Feb 28, 2013 at 11:21

answered Feb 28, 2013 at 11:00

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

igneosaur Over a year ago

Aah, of course. Thanks for explaining about the synchronous option too, cheers!

Pranay Rana · Accepted Answer · 2013-02-28 11:03:09Z

1

make request synchronous , just by doing as below

httpRequest.open('GET', url,false);//false make request synchronous 
 httpRequest.send();

The "false" option says the call is synchronous, meaning that the code will hang until a response comes back

answered Feb 28, 2013 at 11:03

Pranay Rana

177k37 gold badges244 silver badges266 bronze badges

1 Comment

cazort Over a year ago

This can produce unintended consequences like freezing up the UI on the page until the response returns, which in the case of a glitch or problem with the server or connection, could be a long time.

Collectives™ on Stack Overflow

JavaScript function to return AJAX response (no jQuery)?

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related