ajax在註冊用戶表單中的使用 1.驗證用戶名是否被使用 2.獲取手機簡訊驗證碼 3.點擊表單中的圖片刷新，可實現刷新圖片驗證碼 ...
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>
