基本概念
AJAX:AJAX引擎其实是一个JavaScript对象,全写是 window.XMLHttpRequest对象,由于浏览器的版本不同,特别是老版本的IE浏览器,虽然也支持AJAX引擎,但是写法上有区别,在IE低版本中通常用 ActiveXObject对象来创建AJAX引擎。 AJAX 来自英文“Asynchronous Javascript And XML” 的缩写,也称为异步JavaScript和XML。 简言之,就是一个JS对象,可以实现在网页加载完成以后,不用刷新的情况下与服务器交互。产生极好的用户体验效果。
示例
前端
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>维修预约后台登录_ZSTUCA</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="\assets\css\bootstrap.min.css" rel="stylesheet">
<link href=".\assets\css\style.css" rel="stylesheet">
</head>
<body>
<div class="container" style="text-align:center">
<!-- 登录框 -->
<h1>计算机协会维修部</h1>
<h2>维修预约后台登录</h2>
<form class="form-signin" action="check.php" method="post">
<p><label for="username" class="sr-only" title="用户名">用户名</label>
<input type="text" id="username" name="username" class="form-control" placeholder="用户名" required autofocus> </p>
<p><label for="Password" class="sr-only" title="密码">密码</label>
<input type="password" id="password" name="password" class="form-control" placeholder="密码" required></p>
<div style="min-height:25px;"><span id="result"></span></div>
<p><button class="btn btn-lg btn-primary" type="submit" style="margin:0 50px 0 0 ;">登录</button>
<button class="btn btn-lg btn-primary" type="reset" style="margin:0 0 0 50px ;">重置</button></p>
</form>
<div class="footer">计算机协会维修队</div>
</div>
<script type="text/javascript">
var username=document.getElementById('username');
//用户名输入框失去焦点时触发
console.log(username);
username.addEventListener('blur',function(){
console.log("οnblur");
//主角登场——AJAX引擎的创建及使用详细代码来了
var ajax=new XMLHttpRequest(); //创建AJAX引擎实例
//创建GET请求,发送请求时传username值
ajax.open('GET','check.php?username='+this.value);
//当AJAX引擎的状态产生改变时触发onreadystatechange属性指向的函数(多次执行)
//状态值有5个:0 1 2 3 4 ,其中4表示服务器端响应就绪
ajax.onreadystatechange=function(){
//必须在服务器响应就绪,并且HTTP的状态码是200时才接收数据
//ajax.readyState 获取到服务器响应状态码,必须是4才表示就绪
//ajax.status 获取到HTTP的状态码,必须是200才表示成功
if(ajax.readyState==4 && ajax.status==200){
//ajax.responseText 接收服务器响应回来的内容
console.log(ajax.responseText);
console.log(ajax.responseText=='1');
//接收到服务器响应数据后,AJAX工作已完成,可根据结果显示提示信息
if(ajax.responseText==1){
result.innerHTML='恭喜你,可以登录';
result.style.color='#0a0'; //将字体设置为红色
}else if(ajax.responseText==2){
result.innerHTML='请输入用户名';
result.style.color='#f00'; //将字体设置为红色
}else{
result.innerHTML='该用户名不存在,请重新输入';
result.style.color='#f00'; //将字体设置为绿色
}
}
}
ajax.send(); //发送请求
});
</script>
</body>
</html>
css
@charset "gb2312";
/* CSS Document */
body {
padding-top: 40px;
padding-bottom: 40px;
background-color: #eee;
}
.form-signin {
max-width: 400px;
padding: 15px;
margin: 0 auto;
margin-top: 100px;
border-style: solid;
border-width: 3px;
border-color: aliceblue;
border-radius: 5%;
background-color: azure;
}
.form-signin p{
padding: 15px;
margin: 0 auto;
}
.form-signin .form-signin-heading{
margin-bottom: 10px;
max-width: auto;
}
.form-signin .checkbox {
margin-bottom: 10px;
}
.form-signin .checkbox {
font-weight: normal;
}
.form-signin .form-control {
position: relative;
height: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-reg {
max-width: 300px;
padding: 15px;
margin: 0 auto;
}
.form-reg .form-signin-heading{
max-width: 300px;
width: 300px;
}
.form-reg .checkbox {
margin-bottom: 10px;
}
.form-reg .checkbox {
font-weight: normal;
}
.form-reg .form-control {
position: relative;
height: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 10px;
font-size: 16px;
}
.form-reg .form-control:focus {
z-index: 2;
}
.form-reg input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-reg input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.login_lbl {
visibility: hidden;
}
.footer{
white-space: nowrap;
vertical-align: middle;
position: absolute;
color: white;
background-color: rgba(0,0,0,0.3);
left: 0;
right: 0;
bottom: 33px;
margin: auto;
width: 175px;
height: 22px;
line-height: 20px;
text-align: center;
}
后端
<?php
function checkdata($username){
//连接数据库的代码
include 'conn.php';
$sql="select ID from wxyy where ID=".$username;
$rs=mysqli_query($connID,$sql);
//将构造好的SQL语句发到服务器上执行
if( mysqli_num_rows($rs) ){
echo '1'; //如果用户名找到有结果,证明该用户名已存在,返回1
}else{
echo '0'; //如果用户名未找到结果,证明该用户名不存在,返回0
}
//关闭数据库连接,释放结果集
mysqli_free_result($rs);
mysqli_close($connID);
}
//服务器端的代码可以使用PHP编写,根据逻辑反馈数据给客户端实现验证功能
if(isset($_GET['username']) and $_GET['username']!=''){
checkdata($_GET['username']);
}else{
echo '2';
}
?>
效果
说明
因为每次输入用户名即可返回用户名数据库中是否存在,容易被套取用户数据。
参考文章
https://www.itsource.cn/web/news/5/20170512/1246.html
https://blog.csdn.net/weixin_43272781/article/details/102398525