Heim  >  Artikel  >  Backend-Entwicklung  >  javascript - ajax:怎么获得onreadystatechange调用的函数的返回值?

javascript - ajax:怎么获得onreadystatechange调用的函数的返回值?

WBOY
WBOYOriginal
2016-06-06 20:11:311664Durchsuche

这里的checkName()w为什么不能是我所期待的返回值(true/false),怎么获得chekName()的返回值,在使用ajax的基础上?求高人指点,
刚开始学习使用ajax进行表单验证;遇到这种问题不知道怎么解决?

,表单的内容是这样的,下面是几个主要的验证函数,
<code>function checkName(){  
    var name=ele.name.value;    
    if(name!= ""){ 
            xmlhttp=new XMLHttpRequest();
                url="http://localhost/chkname.php";        
            xmlhttp.onreadystatechange =function(){
                if(xmlhttp.readyState == 4){
                    if(xmlhttp.status == 200){
                        var msg = xmlhttp.responseText;
                        if(msg == '1'){                            
                              ele.name.className="";//移除class
                              ele.imgs[0].setAttribute("src","img/right.jpg"); //对应图标
                              ele.imgs[0].style.display = "inline"; //显示 
                             return true;
                        }else{                            
                              ele.name.className="borderRed";//移除class
                              ele.imgs[0].setAttribute("src","img/wrong.jpg"); //对应图标
                              ele.imgs[0].style.display = "inline"; //显示   
                                biaoqian1.innerHTML='<strong class="tips_false">该用户名已存在</strong>';                         
                               return  false;
                           
                                                
                        }
                    }
                }
            }
            xmlhttp.open('POST',url,true);
            xmlhttp.send(null);
            
    
}
 function check(){ //表单提交则验证开始

         if(checkName()&&checkPassw2()&&checkEmail()){
               alert(" 注册成功");  //注册成功
            return true; 
          }
          else{
              alert("请正确的填写完信息!");
            return false;
          }
    }

  </code>

回复内容:

这里的checkName()w为什么不能是我所期待的返回值(true/false),怎么获得chekName()的返回值,在使用ajax的基础上?求高人指点,
刚开始学习使用ajax进行表单验证;遇到这种问题不知道怎么解决?

,表单的内容是这样的,下面是几个主要的验证函数,
<code>function checkName(){  
    var name=ele.name.value;    
    if(name!= ""){ 
            xmlhttp=new XMLHttpRequest();
                url="http://localhost/chkname.php";        
            xmlhttp.onreadystatechange =function(){
                if(xmlhttp.readyState == 4){
                    if(xmlhttp.status == 200){
                        var msg = xmlhttp.responseText;
                        if(msg == '1'){                            
                              ele.name.className="";//移除class
                              ele.imgs[0].setAttribute("src","img/right.jpg"); //对应图标
                              ele.imgs[0].style.display = "inline"; //显示 
                             return true;
                        }else{                            
                              ele.name.className="borderRed";//移除class
                              ele.imgs[0].setAttribute("src","img/wrong.jpg"); //对应图标
                              ele.imgs[0].style.display = "inline"; //显示   
                                biaoqian1.innerHTML='<strong class="tips_false">该用户名已存在</strong>';                         
                               return  false;
                           
                                                
                        }
                    }
                }
            }
            xmlhttp.open('POST',url,true);
            xmlhttp.send(null);
            
    
}
 function check(){ //表单提交则验证开始

         if(checkName()&&checkPassw2()&&checkEmail()){
               alert(" 注册成功");  //注册成功
            return true; 
          }
          else{
              alert("请正确的填写完信息!");
            return false;
          }
    }

  </code>

异步的ajax实际上使用了单独的进程,因此无法获取到这个返回值,而且,在调用ajax()方法时你根本无法知道它什么时候会执行完毕。 因此对于异步的ajax来说,你无法主动的获取其返回值,只能提供回调方法,ajax对象可以将参数传递到你提供的回调方法中,如上面,自己通过回调函数获得了返回值。

<code> //ajax验证name
</code>
<code> var ajaxResult = false;//全局变量
    function ajaxResultdeal(response){
        ajaxResult = response; //传递给全局变量    
            if(ajaxResult == '1'){                            
                                  ele.name.className="";//移除class
                                  ele.imgs[0].setAttribute("src","img/right.jpg"); //对应图标
                                  ele.imgs[0].style.display = "inline"; //显示 
                                  ajaxResult= true;
    
                              }
          else{                        
                                  ele.name.className="borderRed";//移除class
                                  ele.imgs[0].setAttribute("src","img/wrong.jpg"); //对应图标
                                  ele.imgs[0].style.display = "inline"; //显示   
                                    biaoqian1.innerHTML='<strong class="tips_false">该用户名已经存在</strong>';                         
                                  ajaxResult=false;
                               
                                                    
                            }
                
            ajaxResultreturn();
        
       
    
    }
    function ajaxResultreturn(){
        if(ajaxResult){return true;}
        else{
            return false;
        }
    }
    
    function toAjax(url,callback){                
                xmlhttp=new XMLHttpRequest();
                    /*url="http://localhost/chkname.php"; */       
                xmlhttp.onreadystatechange =function(){
                    if(xmlhttp.readyState == 4){
                        if(xmlhttp.status == 200){                    
                                if(callback) {
                                   callback(xmlhttp.responseText);
                          
                            }
                        }
                    }
                }
                xmlhttp.open('POST',url,true);
                xmlhttp.send(null);
    }
    
      function checkName(){ 
        var name=ele.name.value;    
        var url="http://localhost/chkname.php";   
           var cb = ajaxResultdeal;       
                toAjax(url,cb);   
            
       
      
    
      }
      function check(){ //表单提交则验证开始 

         if(ajaxResultreturn()&&checkPassw2()&&checkEmail()){
               alert(" 注册成功");  //注册成功
            return true; 
          }
          else{
              alert("请正确的填写完信息!");
            return false;
          }
    }
      </code>

一楼回答的很详细。使用ajax的原因是因为异步加载,这需要你转变你的思路,不能用同步的思想去写异步的代码。
给你一个经典逻辑帮助你入门吧

<code>function beforeAjax() {
    //一些基础的工作,比如非空验证,获得url,参数字符串等
    doAjax();
}
function doAjax() {
    var ajax = new Ajax;//这是伪码
    ajax.onSuccess = afterAjax; //这是伪码,可能是onSuccess, onReadyStatusChange等任何事件,只要你的ajax对象支持的就行。
    ajax.send();
}
function afterAjax(param1, param2, etc...) {
    //后续的处理
}
</code>

这个就是三步走方式的异步代码模型了,首先做好准备,然后开始异步处理,我们不知道异步处理什么时候会完成,所以能做的就是告诉异步处理对象,当xx事发生的时候请调用一下xx方法。

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn