《ajax学习》之ajax+JavaScript事件验证用户名是否可注册

时间:2021-10-18 10:05:02

当用户注册时,服务器数据库需要对用户输入的用户信息(以用户名为例子)进行验证,在不刷新页面的情况下又需要页面和服务器进行数据请求,最好的方法是用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事件的学习

《ajax学习》之ajax+JavaScript事件验证用户名是否可注册

《ajax学习》之ajax+JavaScript事件验证用户名是否可注册

《ajax学习》之ajax+JavaScript事件验证用户名是否可注册

代码:

index.html文件:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax验证用户注册</title>
<style>
body{
background: #b3b3b3;
}
.div1{
margin:300px auto;
width: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);//关闭数据库连接
?>