本文介绍如何使用Ajax技术实现网页注册时的无刷新用户名验证。通过XMLHttpRequest对象异步获取服务器返回的用户名占用状态,在前端动态显示提示信息,避免页面刷新,提升用户体验。
Ajax无刷新注册实现原理
Ajax 实现无刷新效果
核心代码实现
具体代码实现如下:
定义变量 xmlHttp;
uName() // 当用户名输入框失去焦点时触发
{
if(all.uname.=="")
{
all.l1.innerHTML="不能为空!";
setTimeout("close(1)",1500);
return;
}
else
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
xmlHttp.onreadystatechange=deal; // 设置回调函数
var url="aJax.aspx?user='"+all.uname.+"'"; // 构建检测用户名的请求地址
xmlHttp.open("get",url,true); // 使用 get 方式提交表单至 url;并启动异步处理
xmlHttp.send(null); // 发送请求
}
}
deal()
{
//alert(xmlHttp.readystate+"__"+xmlHttp.status);
if(xmlHttp.readystate!=4)
{return; }
if(xmlHttp.status!=200) // 状态码为500时通常表示 sql 语句或数据库错误
{return;}
//
var num = xmlHttp.responseText; // 接收服务器返回的信息
//alert(num);
all.l1.innerText="";
if(num>0)
{
all.l1.innerText="此用户名已被使用!";
}
else
{
all.l1.innerText="√";
}
}