Ajax response works after two clicks?

I just wrote a basic user-login system where the html page uses javascript to send the ajax request to a servlet which accesses through database. Here's the js code

var res;
function getXMLObject()
{
   var xmlHttp = false;
   try {
     xmlHttp = new ActiveXObject("Msxml2.XMLHTTP")  // For Old Microsoft Browsers
   }
   catch (e) {
     try {
       xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")  // For Microsoft IE 6.0+
     }
     catch (e2) {
       xmlHttp = false   // No Browser accepts the XMLHTTP Object then false
     }
   }
   if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
     xmlHttp = new XMLHttpRequest();        //For Mozilla, Opera Browsers
   }
   return xmlHttp;  // Mandatory Statement returning the ajax object created
}

var xmlhttp = new getXMLObject();   //xmlhttp holds the ajax object


function handleServerResponse() {
   if (xmlhttp.readyState == 4) {        
               res=xmlhttp.responseText;
   }
     else {
                    return false;
        alert("Error during AJAX call. Please try again");
     }

}

function ajaxFunction() {
        var veid=document.getElementById("eid").value;
        var vpwd=document.getElementById("pwd").value;
        //window.alert('here inside ajaxFunction'+vconf+' '+vseid);
  if(xmlhttp) {
    xmlhttp.open("GET","check_login?eid="+ veid +"&pwd="+ vpwd,true); //this is the servlet name
    xmlhttp.onreadystatechange  = handleServerResponse;
    xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xmlhttp.send(null);
  }
}


    function def()
    {
        //window.alert('hi');
        ajaxFunction();            
        //alert('res:'+res);
        if(res=='y')
       {               
                    return true;
       }
       else
       {
                    doc开发者_如何转开发ument.getElementById("uhidden").style.color="#CC0000";
                    document.getElementById("uhidden").innerHTML="Invalid E-Mail ID or Password"
                    return false;                        
       }
    }

But the code works only after two clicks :( Any help guys?

Your def function calls ajaxFunction and then straight away checks the res variable. However ajaxFunction just sends the AJAX request; it does not wait for the AJAX response to arrive. Your code is checking the res variable before it is being set from the AJAX response.

This is why it works on the second click - not because the res variable is being set by the second click's AJAX response, but because it is still set from the first click's AJAX response.

The solution is to re-arrange your code a bit. Move the code to display the invalid login message to where the AJAX response is received. In other words, replace the res=xmlhttp.responseText; line with some code to check if xmlhttp.responseText is not y and display the invalid login message.

I guess you call def()

Your Request ist asynchron(because you set the 3rd argument of open() to true ), but in def() you immediately after sending the request work with the the result:

ajaxFunction();            
//alert('res:'+res);
if(res=='y')

At this time the request usually is not finished, the result not available yet

Put all code that has to work with the server-response into handleServerResponse()