一、首先我们会把ajacx进行封装，众所周知，ajax的步骤一般分为四个部分
1、创建ajax对象
const xhr = new XMLHttpRequest();
2、打开连接，里面的三个参数代表的是请求方式和连接的路径，路径的后面可以直接加？+数据；
第三个参数是布尔类型，代表是否执行异步操作，然后true代表异步，false代表同步
xhr.open('get','demo.php?id=1',true);
3、发送请求
xhr.send();
4、监听请求状态
xhr.onreadystatechange = function(){ // 判断xhr的状态(0~4 4的时候就圆满完成)和请求的状态 - 200 if(xhr.readyState===4 && xhr.status==200){ // 接收响应数据 let res = xhr.responseText; console(res); } }
然后post请求里面是需要在send()里面传输数据的，需要在发送请求前，设置post请求头，
模拟表单来传递数据给服务端（否则获取不到send中的参数）
//请求头 ajax.setRequestHeader('content-type', 'application/x-www-form-urlencoded') //send发送请求的时候要携带请求参数（键1=值1&键2=值2） ajax.send('name=Jack&age=18&gender=男')
二、然后，我来介绍一下，简单的封装ajax
/* 封装ajax */ function sendAjax(options){ // 处理每个选项 // 路径必填，且是字符串 if(!options.url){ // 没有传url throw new Error("请求地址必填"); } // 如果代码能走到这里，传了地址 // 判断类型 if(Object.prototype.toString.call(options.url) !== '[object String]'){ // 不是字符串 throw new Error("请求地址必须是字符串"); } // 处理请求方式 // 没有传，默认是get if(!options.method){ options.method = 'get'; } // 如果代码能走到这里，说明传入了 // 判断是否是get或post if(options.method.toLowerCase()!=="get" && options.method.toLowerCase()!=="post"){ // 不是get或post throw new Error("请求方式只接受get或post"); } // 处理数据 if(!options.data){ // 如果没传 // 默认赋值为null options.data = null; }else{ // 如果有传入 var data = ''; // 判断数据是字符串还是object if(Object.prototype.toString.call(options.data)==='[object String]'){ // 如果是字符串 // 判断是否至少包含一个 = if(options.data.indexOf("=") === -1){ throw new Error("数据格式有误！"); } data = options.data; }else if(Object.prototype.toString.call(options.data)==='[object Object]'){ // {"username":"张三","password":123456,tel:1234567810} 转为 // 'username=张三&password=123456&tel=12345678910' var f = ''; for(var attr in options.data){ data += f + attr + "=" + options.data[attr]; f = '&'; } } // 代码走到这里，data都是一个字符串，是数据 // 请求方式是否为get if(options.method==="get"){ // 将数据放在地址后面 options.url = options.url + "?" + data; // "demo.php?[object Object]" } } // 处理是否异步的async if(options.async===undefined){ // 值是undefiend表示没有传 options.async = true; } // 代码走到这里，说明async传入了 // 判断类型是否是布尔值 if(Object.prototype.toString.call(options.async) !== '[object Boolean]'){ throw new Error("async参数只接受布尔类型"); } // 处理想要的数据格式 dataType // 判断是否传入 if(!options.dataType){ options.dataType = 'string'; } // 如果能走到这里，传入了，就判断是否为 string或json if(options.dataType.toLowerCase() !== 'string' && options.dataType.toLowerCase() !== 'json'){ throw new Error("dataType参数只接受string或json"); } // 处理成功时要执行的回调函数 // 判断是否传入 if(!options.success){ options.success = function(){} } // 如果传入了，判断是否是一个函数 if(Object.prototype.toString.call(options.success) !== '[object Function]'){ throw new Error("success参数只接受函数类型"); } // 处理错误是执行的函数 if(!options.error){ options.error = function(){} } // 如果传入了，判断是否是一个函数 if(Object.prototype.toString.call(options.error) !== '[object Function]'){ throw new Error("error参数只接受函数类型"); } // 到这里所有参数处理完毕 - 开始ajax // ajax对象的兼容写法 var xhr; try{ xhr = new XMLHttpRequest(); // 这种写法在ie下是不能兼容的 }catch(e){ try{ xhr = new ActiveXObject("Microsoft.XMLHTTP"); // 兼容ie678 }catch(err){ xhr = new ActiveXObject("Msxml2.XMLHTTP"); // 更低版本ie } } // 打开 xhr.open(options.method,options.url,options.async); // 监听 xhr.onreadystatechange = function(){ // 判断ajax的状态 // 先判断是否完成 if(xhr.readyState===4){ // 在判断是否成功 if(xhr.status>=200 && xhr.status<300){ // 成功 // 获取响应的数据 var res = xhr.responseText; // 判断想要的数据格式是什么 if(options.dataType==="json"){ // 如果是json，就将数据先转为json对象 res = JSON.parse(res); } // 调用成功想执行的函数 options.success(res); }else{ // 请求失败了 options.error(); } } } // 发送 if(options.method==="post"){ xhr.setRequestHeader("content-type","application/x-www-form-urlencoded"); xhr.send(data); return; } xhr.send(); }
<!DOCTYPE html>
<head>
<meta charset='utf-8'>
<title>Document</title>
</head>
<body>
<div>
<span></span>
<table align="center">
<caption><h2>登录</h2></caption>
<tr>
<td>用户名：</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="登录"></td>
</tr>
</table>
</div>
</body>
<script src="./js/ajax.js"></script>
<script>
var btn = document.querySelector("input[type='button']");
var usernamein = document.querySelector("input[name='username']");
var passwordin = document.querySelector("input[name='password']");
btn.addEventListener("click",login);
function login(){
var username = usernamein.value.trim();
var password = passwordin.value.trim();
// 验证数据
var usernameRule = /^(\w|[\u4e00-\u9fa5]){2,12}$/;
var passwordRule = /^[a-zA-Z0-9]{6,16}$/;
if(!usernameRule.test(username)){
alert("用户名必须是2~12位的数字、字母、下划线或汉字");
return false;
}
if(!passwordRule.test(password)){
alert("密码必须是6~16的数字、字母");
return false;
}
//调用函数发送ajax
//里面的username是键值对，其实是username:username
sendAjax({
url:"login.php",
method:"post",
data:{username,password},
dataType:"json",
success:res=>{
if(res.meta.status===201){
alert(res.meta.msg);
location.assign("home.html");
}else{
alert(res.meta.msg);
return false;
}
}
});
}
</script>
</html>
/*********************** 这是请求示例 **************************/ /* sendAjax({ url:"demo.php", method:"post", success:function(res){ console.log(res); }, dataType:"json", async:true, data:{ username:"张三", sex:"女" } }); sendAjax({method,url,async,data,datatype,success}) */
这个ajax里面是用一些简单的if判断去对数据进行判断的，然后有需要的朋友可以过来看看哦
之后直接引用这个ajax函数直接写出登录注册功能，因为后台请求数据，我们是用php这个工具进行操作的。所以代码中会出现.php文件；
三、注册页面样式，样式中
<!DOCTYPE html>
<head>
<meta charset='utf-8'>
<title>Document</title>
</head>
<body>
<div>
<span></span>
<table align="center">
<caption><h2>登录</h2></caption>
<tr>
<td>用户名：</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="登录"></td>
</tr>
</table>
</div>
</body>
<script src="./js/ajax.js"></script>
<script>
var btn = document.querySelector("input[type='button']");
var usernamein = document.querySelector("input[name='username']");
var passwordin = document.querySelector("input[name='password']");
btn.addEventListener("click",login);
function login(){
var username = usernamein.value.trim();
var password = passwordin.value.trim();
// 验证数据
var usernameRule = /^(\w|[\u4e00-\u9fa5]){2,12}$/;
var passwordRule = /^[a-zA-Z0-9]{6,16}$/;
if(!usernameRule.test(username)){
alert("用户名必须是2~12位的数字、字母、下划线或汉字");
return false;
}
if(!passwordRule.test(password)){
alert("密码必须是6~16的数字、字母");
return false;
}
//调用函数发送ajax
//里面的username是键值对，其实是username:username
sendAjax({
url:"login.php",
method:"post",
data:{username,password},
dataType:"json",
success:res=>{
if(res.meta.status===201){
alert(res.meta.msg);
location.assign("home.html");
}else{
alert(res.meta.msg);
return false;
}
}
});
}
</script>
</html>
之后注册的php页面代码为：
<?php header("content-type:text/html;charset=uft8"); //接收数据 $username = $_POST["username"]; $password = $_POST["password"]; $tel = $_POST["tel"]; $email = $_POST["email"]; // var_dump($username,$password,$tel,$email); //连接数据库 $con = mysqli_connect("localhost","root","root","test"); mysqli_query($con,"set names utf8"); $res = mysqli_query($con,"select * from user where username='$username'"); //提取数据 $row = mysqli_fetch_assoc($res); if($row){ // 用户名已经存在 $arr = [ "meta"=>[ "status"=>101, "msg"=>"用户名被占用" ], "data"=>null ]; }else{ $res = mysqli_query($con,"insert user(username,password,tel,email) values('$username','$password',$tel,'$email')"); if($res){ // 注册成功 $arr = [ "meta"=>[ "status"=>201, "msg"=>"注册成功" ], "data"=>null ]; }else{ // 注册失败 $arr = [ "meta"=>[ "status"=>301, "msg"=>"注册失败" ], "data"=>null ]; } } echo json_encode($arr);
四、注册成功后，开始了登录页面的样式，登录页面比注册页面结构要少一些，代码如下：
<!DOCTYPE html>
<head>
<meta charset='utf-8'>
<title>Document</title>
</head>
<body>
<div>
<span></span>
<table align="center">
<caption><h2>登录</h2></caption>
<tr>
<td>用户名：</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="password"></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="登录"></td>
</tr>
</table>
</div>
</body>
<script src="./js/ajax.js"></script>
<script>
var btn = document.querySelector("input[type='button']");
var usernamein = document.querySelector("input[name='username']");
var passwordin = document.querySelector("input[name='password']");
btn.addEventListener("click",login);
function login(){
var username = usernamein.value.trim();
var password = passwordin.value.trim();
// 验证数据
var usernameRule = /^(\w|[\u4e00-\u9fa5]){2,12}$/;
var passwordRule = /^[a-zA-Z0-9]{6,16}$/;
if(!usernameRule.test(username)){
alert("用户名必须是2~12位的数字、字母、下划线或汉字");
return false;
}
if(!passwordRule.test(password)){
alert("密码必须是6~16的数字、字母");
return false;
}
//调用函数发送ajax
//里面的username是键值对，其实是username:username
sendAjax({
url:"login.php",
method:"post",
data:{username,password},
dataType:"json",
success:res=>{
if(res.meta.status===201){
alert(res.meta.msg);
location.assign("index.html");
}else{
alert(res.meta.msg);
return false;
}
}
});
}
</script>
</html>
登录页面的php：
<?php header("content-type:text/html;charset=utf8"); $username = $_POST['username']; $password = $_POST['password']; //连接数据库 $con = mysqli_connect("localhost","root","root","test"); mysqli_query($con,"set names utf8"); $res = mysqli_query($con,"select * from user where username='$username'"); //提取数据 $row = mysqli_fetch_assoc($res); if($row){ //用户名存在 //var_dump($row); //验证密码 if($row["password"]===$password){ $arr = [ "meta"=>[ //密码正确时的状态 "status"=>201, "msg"=>"登录成功" ], "data"=>null ]; }else{ //登陆失败 $arr=[ "meta"=>[ //密码错误时的状态 "status"=>301, "msg"=>"密码错误" ], "data"=>null ]; } }else{ $arr = [ "meta"=>[ //用户名不存在时的状态 "status"=>101, "msg"=>"用户名不存在" ], "data"=>null ]; } echo json_encode($arr);
最后跳转到index.html的页面，也就是一般网站的首页。这样注册登录功能就完成了。