zoukankan      html  css  js  c++  java
  • AJAX异步检查,检查用户名是否存在

    AJAX异步检查,检查用户名是否存在


    写法一:

     var xmlHttp;
            if (window.XMLHttpRequest)
             {// code for IE7+, Firefox, Chrome, Opera, Safari
             	xmlHttp=new XMLHttpRequest();
             }
            else
             {// code for IE6, IE5
            	xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
             }
            
            console.log("xmlHttp,XHR,created"+xmlHttp.readyState);
            var url = "validateUsername.jsp?username=" + trim(field.value) + "&time=" + new Date().getTime(); 
          
            //设置请求方式为GET,设置请求的URL,设置为异步提交  
            xmlHttp.open("GET", url, true); 
            
            //将方法地址复制给onreadystatechange属性  
           
            xmlHttp.onreadystatechange = function() {state_Change(xmlHttp);};
            <span style="color:#ff0000;">//Bad Code</span> xmlHttp.onreadystatechange = state_Change(xmlHttp);
            
            //将设置信息发送到Ajax引擎  
            xmlHttp.send(null); 
            
        } else { 
        	
            document.getElementById("CheckField").innerHTML = ""; 
        } 
    function state_Change(xmlHttp) { 
    	console.log("state_Change start");
        //Ajax引擎状态为成功  
        if (xmlHttp.readyState == 4) { 
            //HTTP协议状态为成功  
            if (xmlHttp.status == 200) { 
                if (trim(xmlHttp.responseText) != "") { 
                    //console.log("responseText: START___",xmlHttp.responseText," ___END");
                  if(trim(xmlHttp.responseText)=="OK"){
                    	document.getElementById("userCheck").className="icon ticker"; 
                    	document.getElementById("CheckField").innerHTML = ""; 
                  	}
                    else{
                    	document.getElementById("userCheck").className="";
                    	document.getElementById("CheckField").innerHTML = "<font color='red' style='font-size:15px; line-height: 3; vertical-align:middle'>" + xmlHttp.responseText + "</font>"; 
                    }
                }else {
                	document.getElementsByName("userCheck").className="icon into";
                    document.getElementById("CheckField").innerHTML = ""; 
                } 
            }else { 
                alert("数据库可能出错,请求失败,错误码=" + xmlHttp.status); 
            } 
        } 
    } 

    写法二:

    $(function() {
    	$("#checkbtn").click(function() {
    
    		if ($("#searchkey").val() == "") {
    			console.log("searchkey is null");
    			alert("没有输入值!!!!");
    		} else {
    
    			$.ajax({
    				url : "CheckID?searchkey=" + $("#searchkey").val(),
    				success : function(result) {
    					tablename = $("#searchform").children("[name='tablename']").val();
    					if(...){
    						if (result == "exsit") {
    							...
    						} else {
    							...
    						}
    					}else{
    						
    						if (result == "exsit") {
    							...
    							
    						} else {
    							...
    							
    						}
    						
    						
    					}
    				}
    			});
    
    		}
    	});
    
    });


    写法二比较简单,写法一比较原始。

    使用异步的Ajax的好处是页面不用刷新,还能不需要点击什么按钮,不需要提交表单, 直接 由某事件自动提交到服务器进行 检查 取值等操作。

  • 相关阅读:
    word20170108逛景点 Sightseeing有用的词和句子
    c# List 分页问题
    VUE界面,this.form.xxx=1赋值后,界面效果没有变化
    SQL Server使用索引视图来实现“物化视图”
    .NET CORE 实现异步处理
    当请求接口提示网络错误Error:Network Error的时候
    SheetJS js-xlsx :js实现导出Excel模板
    增加索引分析
    聚集索引与非聚集索引的总结
    Dynamics CRM-无法识别安全令牌的颁发者,若要接受来自此颁发者的安全令牌,请将 IssuerNameRegistry 配置为返回此颁发者的有效名称
  • 原文地址:https://www.cnblogs.com/slankka/p/9158551.html
Copyright © 2011-2022 走看看