一、首先我們會把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的頁面，也就是一般網站的首頁。這樣注冊登錄功能就完成了。