Setting variable outside of function and object

Question

I'm trying to set the variable result but it remains undefined.

        if (window.XMLHttpRequest)
        {// code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp=new XMLHttpRequest();
        }
        else
        {// code for IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
            {
                if(xmlhttp.responseText)
                {
                    result = true
                    alert(xmlhttp.responseText+" here1")
                }
                else
                {
                    document.getElementById("report").innerHTML = "wrong password/username"
                    alert(xmlhttp.responseText+" here2")
                    result = false
                }
            }
        }
        xmlhttp.open("POST", "process.php", true);
        xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xmlhttp.send("name="+encodeURIComponent(name.value));
        alert("final value: "+result)
        return result//always undefined

How do I get the object to affect a variable outside of the function it is in? The question is a bit more complex than I had let on. This function is called when a user attempts to submit a form. When true is returned the form should be submitted but if false is returned the form should not be submitted. I now have the code (thanks sweetamylase)

   var result
   var checkResult = function(result) {
         alert("final value: " + result);
         return result
   };

    xmlhttp.onreadystatechange=function()
    {
        var result = null;
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
        {
            if(xmlhttp.responseText)
            {
                result = true
                alert(xmlhttp.responseText+" here1")
            }
            else
            {
                document.getElementById("report").innerHTML = "wrong password/username"
                alert(xmlhttp.responseText+" here2")
                result = false
            }
            checkResult(result);     // pass result to another function
        }
    }
    xmlhttp.open("POST", "process.php", true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.send("name="+encodeURIComponent(name.value));

But the form is always submitted, even before "final value..." is displayed. If I add return false at the end of the code then the form is never submitted.

AJAX is *asynchronous*! This means that the `return result;` runs *before* your AJAX call finishes. `xmlhttp.send` runs in the background, and the script continues on. All work relating to `result` just be done in the callback. — gen_Eric, Apr 04 '13 at 19:15

score 2 · Answer 1 · answered Apr 04 '13 at 19:22

AJAX is asynchronous so you need to modify your onreadystatechange() function, you can for pass result to another function to handle your logic:

   var checkResult = function(result) {
         alert("final value: " + result);
         /* handle your result here */
   };
   ...

    xmlhttp.onreadystatechange=function()
    {
        var result = null;
        if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
        {
            if(xmlhttp.responseText)
            {
                result = true
                alert(xmlhttp.responseText+" here1")
            }
            else
            {
                document.getElementById("report").innerHTML = "wrong password/username"
                alert(xmlhttp.responseText+" here2")
                result = false
            }
            checkResult(result);     // pass result to another function
        }
    }
    xmlhttp.open("POST", "process.php", true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.send("name="+encodeURIComponent(name.value));

score 0 · Answer 2 · answered Apr 04 '13 at 19:20

Use callback

    function callServer(callback){
         if (window.XMLHttpRequest)
                ------------------- code ------------
            xmlhttp.open("POST", "process.php", true);
            xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xmlhttp.send("name="+encodeURIComponent(name.value));
             xmlhttp.onreadystatechange = function(){
                 if (xmlhttp.readyState==4 && xmlhttp.status==200)
                 {
                 callback(xmlhttp.responseText);
                 }
             }
         }   
  }

score 0 · Answer 3 · answered Apr 04 '13 at 19:21

The "onreadystatechange" function is assynchronous, thats why you set a callback function to be executed when the event is triggered. What you are doing is saying to javascript: "When you change your ready state do this.". Then your code keep running e return the value of result (that is undefined because the ready state didn't change yet)..

So if you need to use the value of result you should do this inside your callback function.

Hope it helps..

Setting variable outside of function and object

3 Answers3