ajax在注册用户表单中的使用
1.验证用户名是否被使用
2.获取手机短信验证码
3.点击表单中的图片刷新，可实现刷新图片验证码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>ajax在注册用户表单中的使用</title>
</head>
<body>
<p>1.验证用户名是否被使用</p>
<p>2.获取手机短信验证码</p>
<p>3.点击表单中的图片刷新，可实现刷新图片验证码</p>
<script>
//1.给用户名表单元素后添加事件函数checkname()
function Ajax(type,url,data,success,failed){
//创建Ajax对象
var xhr=null;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr=new ActiveXObject("Microsoft.XMLHTTP")
}
var type =type.topperCase();
//用于清除缓存
var random=Math.random();
if(typeof data=="object"){
var str="";
for(var key in data){
str +=key+'='+data[key] +'&';
}
data=str.replace(/&$/,'');
}
if (type=="GET"){
if(data){
xhr.open('GET',url+'?'+data,true);
}else{
xhr.open('GET',url+'?t='+random,true);
}
xhr.send();
}else if(type=="POSt"){
xhr.open('POST',url,true);
xhr.setRequestHeader ("Content-type","app...");//设置请求头信息
xhr.send(data);
}
//处理返回数据
xhr.onreadystatechange =function(){
if(xhr.readystatechange ==4){
if(xhr.status==200){
success(xhr.responseText );
}else{
if(failed){
failed(xhr.status);
}
}
}
}
}
function loading(){//请求慢时显示加载中函数
tipObj=document.getElementsById("tips");
tipObj.style.display="block";
tipObj.innerHTML ="加载中...";
}
function removeLoading(){//移除加载中函数效果
tipObj=document.getElementsById("tips");
tipObj.innerHTML ="";
tipObj.style.display="none";
}
function checkName(){
var name =document.getElementsById("username").value;
if(isNull(name)){//输入为空时，离开该输入框，则提示
showTips("请输入用户名");
}
loading();//当输入不为空时，防止服务器响应慢时调用loading函数
var sendData={username:name,action:'checkname'};
Ajax('get','check.php',sendData ,function(data) {//发送Ajax请求，此处Ajax为之前写好的名为Ajax的函数，其中有创建xmlHTTP对象到完整请求的过程
removeLoading();//当Ajax请求发送成功时，移除加载中效果
var user = eval('(' + data + ')');
if (user.id) {
showTips("用户名已被占用，请重新输入用户名");
}
},function(data){
showTips("Ajax请求错误");
});
}
//2.给手机号短信验证码表单元素添加函数checkMobile
function checkMobile(s){//查询验证手机号码是否合法
var obj=document.getElementsById("usermobile");
var regu=/^[1][3|4|5|8][0-9]{9}$/gi;
var re=new RegExp(regu);
if(!re.test(obj.value)){//若手机号有误，则点击获取短信验证码的按钮继续隐藏
showTips("手机号有误，请重新输入");
var obj=document.getElementById("mobileben");
obj.style.display="none";
obj.disabled=true;
return false;//反之显示按钮
}
var obj=document.getElementById("mobileben");
obj.style.display="block";
obj.disabled=false;
}
function getMobileCode() {
var obj = document.getElementsById("usermobile");
var regu = /^[1][3|4|5|8][0-9]{9}$/gi;
var re = new RegExp(regu);
if (!re.test(obj.value)) {
showTips("手机号有误，请重新输入");
return false;
}
sendData = {mobile: obj.value, action: "getcode"};
Ajax("get", "check.php", sendData, function (data) {
tipObj = document.getElementById("tips");
tipObj.style.display = "block";
tipObj.innerHTML = "手机验证码是：" + data;
}, function (data) {
showTips("手机验证码获取错误");
});
}
//3.点击刷新图片验证码添加函数changeCode
function changeCode(){
var url=document.getElementById("code").src;
var rand=Math.floor(Math.random()*(1000+1));
url+='?'+rand;//给获取的src属性后加一个生成的随机数生成新的验证码图片
document.getElementById("code").src=url;//把新生成的验证码图片赋值回去url
}
</script>
</body>
</html>
