無刷驗證新用戶名
自己最近看視頻自學(xué)ajax，想把一些實例分享給大家，第一個案列是無刷新驗證用戶名是否可用。
一、效果圖
1、用戶可用
2、用戶不可用
3、項目文件（register.php-注冊頁面 和process.php-判斷用戶名是否可用）
二、代碼
register.php-注冊頁面以及ajax發(fā)送請求
<!doctypehtml>
<htmllang="en">
<head>
<meta charset="UTF-8">
<title>注冊</title>
<scripttype="text/javascript">
//創(chuàng)建ajax引擎
function getXmlHttpObject(){
var xmlHttpRequest;
//不同瀏覽器獲取對象XMLHttpRequest
if(window.ActiveXObject){
xmlHttpRequest=newActiveXObject("Microsoft.XMLHTTP");
}
else{
xmlHttpRequest=newXMLHttpRequest();
}
return xmlHttpRequest;
}
var myXmlHttpRequest="";
//驗證用戶名是否存在
function checkName(){
myXmlHttpRequest=getXmlHttpObject();
//判斷xmlHttpRequest是否成功
if(myXmlHttpRequest){
//通過myXmlHttpRequest對象發(fā)送請求到服務(wù)器的某個頁面
//第一個參數(shù)標(biāo)示請求的方式，‘get'、‘post'
//第二個參數(shù)指定url，對那個頁面發(fā)送ajax請求（本質(zhì)仍然是http請求）
/*XMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser,bstrPassword);
*/
varurl="/Ajax/process.php?username="+$("username").value;
//window.alert(url);
myXmlHttpRequest.open("get",url,true);
//window.alert('創(chuàng)建ajax引擎成功');
//指定回調(diào)函數(shù),chuili是函數(shù)名
myXmlHttpRequest.onreadystatechange=chuli;//調(diào)用
//真的發(fā)送請求，如果是各塔請求則填入null即可
//如果是post請求,則填入實際數(shù)據(jù)
myXmlHttpRequest.send(null);
}
else
{
// window.alert('創(chuàng)建失敗');
}
}
function chuli(){
// window.alert("cuhli函數(shù)被調(diào)用"+myXmlHttpRequest.readyState);
//我要取出從register.php返回的數(shù)據(jù)
if(myXmlHttpRequest.readyState==4){
//取出值，根據(jù)返回信息的數(shù)據(jù)格式
//window.alert("服務(wù)器返回"+myXmlHttpRequest.responseText);
$('myres').value=myXmlHttpRequest.responseText;
}
}
function $(id){
return document.getElementById(id);
}
</script>
</head>
<body>
<formaction="???" method="post">
用戶名字:<inputtype="text" name="username1"onkeyup="checkName()" id="username">
<input type="button"value="驗證用戶名">
<input style="border-width:0;color: #e93b3d" type="text" id="myres">
<br/>
用戶密碼:<inputtype="password" name="password"><br>
電子郵件:<inputtype="text" name="email"><br/>
<input type="submit"value="用戶注冊">
</form>
</body>
</html>
process.php—判斷用戶名是否可用
<?php
//接受數(shù)據(jù)
$username=$_GET['username'];
// echo "用戶名".$username;
if($username=="李四"){
echo "用戶名不可用";
}
else{
echo"恭喜用戶名可用";
}
?>
三、原理圖
