当用户注册时,服务器数据库需要对用户输入的用户信息(以用户名为例子)进行验证,在不刷新页面的情况下又需要页面和服务器进行数据请求,最好的方法是用ajax异步请求。
一、实现思路:
1.用户输入信息
2.创建输入框失焦事件
2.1当用户输入玩完成时记录用户输入的值
2.2创建XMLHttpRequest对象
2.3使用open()方法对请求的方式作说明,并将用户输入的数当参数传递给请求的PHP文件
2.4send()方法发送请求
3.创建onreadystatechange事件根据readyState的值和status判断文件以及网络状况
if (xmlhttp.readyState==0){
console.log("请求未初始化");
}
if(xmlhttp.readyState==1){
console.log("服务器连接已建立");
}
if(xmlhttp.readyState==2){
console.log("请求已接收");
}
if(xmlhttp.readyState==3){
console.log("请求处理中");
}
//当请求处理完成且网络畅通显示ajax的处理结果
if(xmlhttp.readyState==4 && xmlhttp.status===200){
console.log("请求处理完成");
document.getElementById("name_info").innerHTML=xmlhttp.responseText;
}
4.ajax异步处理完判断用户是否能够注册之后提示用户是否可以注册
二、知识点:
1.ajax的工作原理
2.readyState的各个状态表示含义
3.PHP连接MySQL数据并查询数据
4.JavaScript事件的学习
代码:
index.html文件:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ajax验证用户注册</title> <style> body{ background: #b3b3b3; } .div1{ margin:300px auto; 300px; height:80px; text-align: right; } .div1 p{ font-size: 12px; color:#f00; font-weight:bold; } </style> </head> <body> <div class="div1"> <form action="" name="regist"> 用户名:<input type="text" name="username" id="name"><p id="name_info"></p><br/> 密码:<input type="password" name="pass"><br/> 确认密码:<input type="password" name="passagain" id="passagain"><p id="pass_info"></p><br/> <input type="submit" value="注册"> <input type="reset" value="取消"> </form> </div> <script src="regist.js"></script> </body> </html>
regist.js文件:
var xmlhttp; //创建失焦事件--验证用户名是不是可以注册 document.getElementById("name").addEventListener("blur",readTXT); //输入框聚焦事件--聚焦时选中 document.getElementById("name").onfocus=function(){ this.select(); } //确认密码的文本框失焦时--检验两次密码是否正确 document.getElementById("passagain").addEventListener("blur",ISsame); //网络请求状态发生变化时的事件 function state_Change(){ if (xmlhttp.readyState==0){ console.log("请求未初始化"); } if(xmlhttp.readyState==1){ console.log("服务器连接已建立"); } if(xmlhttp.readyState==2){ console.log("请求已接收"); } if(xmlhttp.readyState==3){ console.log("请求处理中"); } //当请求处理完成且网络畅通显示ajax的处理结果 if(xmlhttp.readyState==4 && xmlhttp.status===200){ console.log("请求处理完成"); document.getElementById("name_info").innerHTML=xmlhttp.responseText; } } function readTXT(){ var a; //创建XMLHttpRequest对象 if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlhttp=new XMLHttpRequest(); } else { // IE6, IE5 浏览器执行代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } a=regist.username.value;//1.更新参数a的值 //2.发送网络请求 //获取表单用户输入的用户名 //获取本地文本 //xmlhttp.open("GET","test.txt",true); //获取本地PHP文件 //xmlhttp.open("GET","test.php",true); //获取服务器端txt文件 //xmlhttp.open("GET","http://localhost:9999/ajax/biaodan/test.txt",true); //获取服务器端php文件 xmlhttp.open("GET","http://localhost:9999/ajax/biaodan/test.php?a="+a,true); xmlhttp.send(); xmlhttp.onreadystatechange=state_Change;//请求状态改变事件 } function ISsame(){ if(regist.pass.value!=regist.passagain.value){ document.getElementById("pass_info").innerHTML="两次输入密码不一致!"; } else{ document.getElementById("pass_info").innerHTML=""; } }
test.php文件:
<?php $temp=$_GET['a'];//接收参数 $con = mysql_connect("localhost", "root", "root");//创建数据库连接 if (!$con){ //die('Could not connect: ' . mysql_error()); } else{ //echo"success!"; } $db_selected = mysql_select_db("ajax_stydy", $con); $sql = "select * from user where username='".$temp."'"; $result = mysql_query($sql,$con);//查询数据 if(!mysql_num_rows($result)){//数据库中不存在该用户名时提示可以注册 //echo "wushuju"; echo "<span style='color:green'>*恭喜您!用户名'".$temp."'可以注册*</span>"; } else{//已存在该用户提示更换用户名 echo "<span style='color:red'>*该用户名已被注册请更换!*</span>"; } mysql_close($con);//关闭数据库连接 ?>