摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Ajax原理與應(yīng)用</title>
</head>
<body>
<h2>用戶登錄</h2>
<form action="admin/check01.php" method="GET">
<p>
<label for="email">郵箱:</label>
<input type="email" name="email">
</p>
<p>
<label for="password">密碼:</label>
<input type="password" name="password">
</p>
<p>
<button>登錄</button>
<!-- 占位符:顯示提示信息 -->
<span id="tips" style="color:red"></span>
</p>
</form>
<!-- 異步Ajax驗(yàn)證 -->
<script>
// 獲取表單對(duì)象與控件
var login = document.forms['login'];
var email = document.getElementsByName('email')[0];
var password = document.getElementsByName('password')[0];
var btn = document.getElementsByTagName('button')[0];
var tips = document.getElementById('tips');
// 驗(yàn)證郵箱
email.onblur = function () {
//1. 創(chuàng)建ajax請(qǐng)求對(duì)象
var request = new XMLHttpRequest();
//2. 請(qǐng)求成功的回調(diào)處理
request.onreadystatechange = function () {
// 當(dāng)請(qǐng)求完成(4)并成功的獲取到了數(shù)據(jù)(200)
if (this.readyState === 4 && this.status === 200) {
// 更新提示信息
tips.innerHTML = this.responseText;
}
}
//3. 設(shè)置請(qǐng)求參數(shù)
request.open('get', 'admin/check01.php', true);
//4. 發(fā)送請(qǐng)求
request.send();
}
// 用戶修改信息時(shí),清空提示信息
email.oninput = function () {
tips.innerHTML = '';
}
btn.onclick = function () {
if (email.value.length > 0 && password.value.length > 0) {
tips.innerHTML = '登錄成功,正在跳轉(zhuǎn)...';
} else {
tips.innerHTML = '郵箱和密碼不能為空';
}
return false;
}
</script>
</body>
</html>
批改老師：查無(wú)此人批改時(shí)間：2019-03-18 09:27:50
老師總結(jié)：完成的不錯(cuò)。ajax是頁(yè)面最常用的請(qǐng)求。 可以在不刷新頁(yè)面的前提下，更新頁(yè)面數(shù)據(jù)。