AJAX异步检查，检查用户名是否存在
写法一：
var xmlHttp;if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, SafarixmlHttp=new XMLHttpRequest();}else{// code for IE6, IE5xmlHttp=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的好处是页面不用刷新，还能不需要点击什么按钮，不需要提交表单， 直接 由某事件自动提交到服务器进行 检查 取值等操作。
