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的好处是页面不用刷新,还能不需要点击什么按钮,不需要提交表单, 直接 由某事件自动提交到服务器进行 检查 取值等操作。 (编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|