return value = undefined when i try to call a Ajax-function inside another Ajax-function

Question

i have a function with a XML-HTTP-Request. Unfortunately i don't get back my DB-result when i call this function getUserdataByToken() <-- working, via a second Function sendPost(wall).

I just want to have the return value (array) inside my second function but the value is always "undefined". Can someone help me?

function getUserdataByToken() {

    var token = localStorage.getItem("token");
    var userDataRequest;

    //-AJAX-REQUEST
        var xhttp;
        if (window.XMLHttpRequest) {
            xhttp = new XMLHttpRequest();
        } else {
        // code for IE6, IE5
            xhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

        var url= window.location.protocol+"//"+window.location.host+"/getuserdatabytoken";
        var param = "token=" + token;

        xhttp.onreadystatechange = function() {
            if (xhttp.readyState == 4 && xhttp.status == 200) {
                userDataRequest = JSON.parse(xhttp.responseText);

                if (userDataRequest.success === "false") {
                    warningMessage('homeMessage', false, userDataRequest.message);
                } else {
                    return userDataRequest;
                }
            }
        };

        xhttp.open("POST", url, true);
        xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhttp.send(param);
}

Function call via second Function (AJAX) leads too "undefined" Value for "userDataRequest" (return of function 1).

    function sendPost(wall) {

        var content;
        var token = localStorage.getItem("token");
        var userData = getUserdataByToken(); // PROBLEM

        console.log(userData); // "leads to undefined"
        alert(userData); // "leads to undefined"
… Ajax Call etc…

P.S. it's my first post here in stackoverflow, I'm always grateful for tips. Thanks!

you cannot return from async calls. XMLHTTPREQUEST is an async call. It'll always return undefined — Akshay Khandelwal, Jul 04 '16 at 12:14
you need to pass a callback function to the current function as such — Akshay Khandelwal, Jul 04 '16 at 12:15
This statement `return userDataRequest;` makes no sense. Replace it with `sendPost`. — , Jul 04 '16 at 12:17
[How do I return the response from an asynchronous call?](http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) The above link has the answer to your question I hope so. — Mano ranjan J, Jul 04 '16 at 12:23

score 2 · Accepted Answer · answered Jul 04 '16 at 12:15

The userdata value only exists within the anonymous Ajax callback function, and you only return it from there. That is pointless because there is nowhere for it to be returned to; certainly the value does not get returned from getUserdataByToken. Don't forget that Ajax calls are asynchronous; when sendPost calls getUserdataByToken the request won't even have been made.

Generally you'd be much better off using a library like jQuery for this whole thing. Apart from making your code much simpler, it will allow you to use things like Promises which are explicitly intended to solve this kind of problem.

(And, do you really need to support IE5? Are you sure?)

Plus one for the comment on IE! When will this crap be removed from the last computer in the world? — linusg, Jul 04 '16 at 12:19

return value = undefined when i try to call a Ajax-function inside another Ajax-function

1 Answers1