单击两次后Ajax响应有效吗？

Question

我刚刚编写了一个基本的用户登录系统，其中 html 页面使用 javascript 将 ajax 请求发送到通过数据库访问的 servlet。 这是js代码

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
       {
                    document.getElementById("uhidden").style.color="#CC0000";
                    document.getElementById("uhidden").innerHTML="Invalid E-Mail ID or Password"
                    return false;                        
       }
    }

但是代码只有在两次点击后才能工作:( 有帮助吗？

Answer 1

我猜你调用 def()

您的请求是异步的（因为您将 open() 的第三个参数设置为 true ），但在 def() 中，您在发送请求后立即使用结果：

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

这个时候请求通常还没有完成，结果还不可用

将所有必须与服务器响应一起工作的代码放入 handleServerResponse()

Answer 2

您的def 函数调用ajaxFunction，然后立即检查res 变量。然而ajaxFunction 只是发送AJAX 请求；它不会等待 AJAX 响应到达。您的代码在从 AJAX 响应设置之前检查 res 变量。

这就是它在第二次点击时起作用的原因 - 不是因为 res 变量是由第二次点击的 AJAX 响应设置的，而是因为它仍然是从第一次点击的 AJAX 响应设置的。

解决方案是稍微重新安排您的代码。将代码移动到接收 AJAX 响应的位置以显示无效登录消息。换句话说，将res=xmlhttp.responseText; 行替换为一些代码来检查xmlhttp.responseText 是否不是y 并显示无效登录消息。