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