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的好处是页面不用刷新，还能不需要点击什么按钮，不需要提交表单， 直接 由某事件自动提交到服务器进行 检查 取值等操作。