收藏
批改狀態(tài)：合格
老師批語(yǔ)：jQuery那幾節(jié)課沒有把狀態(tài)設(shè)置為作業(yè)吧
Ajax: 用戶與服務(wù)器之間進(jìn)行異步交互，是基于事件機(jī)制的, 并通過事先設(shè)置的回調(diào)函數(shù)來(lái)處理響應(yīng)數(shù)據(jù), 不會(huì)形成阻塞
所有Ajax操作,都是通過一個(gè): XMLHttpRequest 對(duì)象來(lái)實(shí)現(xiàn)
實(shí)現(xiàn)AJAX異步處理一般分為5個(gè)步驟（POST）
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('POST', 'admin/check01.php', true);//第三個(gè)參數(shù)true為是否開啟異步，默認(rèn)為true
4. POST請(qǐng)求需要設(shè)置請(qǐng)求頭信息
request.setRequestHeader('content-type', 'application/x-www-form-urlencoded');//為POST異步請(qǐng)求的固定格式
5. 發(fā)送請(qǐng)求
request.send('email=' + email.value + '&password=' + password.value);
Ajax: 執(zhí)行異步操作最有用的工具,可以代理用戶的請(qǐng)求,并對(duì)執(zhí)行結(jié)果進(jìn)行回調(diào)處理,例如局部刷新,非阻塞驗(yàn)證等
<!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>
<!--
1. Ajax: 用戶與服務(wù)器之間進(jìn)行異步交互
2. 同步: 所有操作按事先約定的步驟進(jìn)行,前面工作未完成,后面工作不能開始,遇到執(zhí)行時(shí)間過長(zhǎng)的操作,會(huì)千萬(wàn)阻塞
例如傳統(tǒng)的表單提交,在等待服務(wù)器處理結(jié)果返回之前,用戶只能等待
3. 異步: 所有操作放到隊(duì)列中,前一個(gè)操作不必等到執(zhí)行結(jié)果,后一個(gè)操作就可以開始,前一操作執(zhí)行完成后通過事件通知調(diào)用者即可
所以, 異步是基于事件機(jī)制的, 并通過事先設(shè)置的回調(diào)函數(shù)來(lái)處理響應(yīng)數(shù)據(jù), 不會(huì)形成阻塞
4. 同步與異步的根本區(qū)別在于: 請(qǐng)求發(fā)出后, 是否需要等待結(jié)果, 必須等待結(jié)果就是同步, 不用等待繼續(xù)執(zhí)行就是異步
5. Ajax: 執(zhí)行異步操作最有用的工具,可以代理用戶的請(qǐng)求,并對(duì)執(zhí)行結(jié)果進(jìn)行回調(diào)處理,例如局部刷新,非阻塞驗(yàn)證等
6. 所有Ajax操作,都是通過一個(gè): XMLHttpRequest 對(duì)象來(lái)實(shí)現(xiàn)
-->
<!-- 下面以異步表單驗(yàn)證為例,學(xué)習(xí)Ajax -->
<!-- check.php: 傳統(tǒng)的同步方式處理 -->
<!-- check01.php: Ajax異步處理 -->
<h2>用戶登錄</h2>
<form action="admin/check01.php" method="POST">
<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('POST', 'admin/check01.php', true);
//4. POST請(qǐng)求需要設(shè)置請(qǐng)求頭信息
request.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
//5. 發(fā)送請(qǐng)求
request.send('email=' + email.value + '&password=' + password.value);
}
// 用戶修改信息時(shí),清空提示信息
email.oninput = function () {
tips.innerHTML = '';
}
// 驗(yàn)證密碼
password.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('POST', 'admin/check01.php', true);
//4. POST請(qǐng)求需要設(shè)置請(qǐng)求頭信息
request.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
//5. 發(fā)送請(qǐng)求
request.send('email=' + email.value + '&password=' + password.value);
}
// 用戶修改信息時(shí),清空提示信息
password.oninput = function () {
tips.innerHTML = '';
}
// 上面的郵箱和密碼的驗(yàn)證有很多重復(fù)代碼, 可以通過將公共代碼封裝到函數(shù)用,實(shí)現(xiàn)代碼復(fù)用,請(qǐng)自己完成
btn.onclick = function () {
if (email.value.length > 0 && password.value.length > 0) {
tips.innerHTML = '登錄成功,正在跳轉(zhuǎn)...';
setTimeout(function () {
location.href = 'admin/index.php';
}, 2000);
} else {
tips.innerHTML = '郵箱和密碼不能為空';
}
return false;
}
</script>
</body>
</html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
check01.php
<?php
// print_r($_POST);
$email = empty($_POST['email']) ? '' : $_POST['email'];
$password = empty($_POST['password']) ? '' : $_POST['password'];
$emailList = ['admin@php.cn', 'peter@php.cn'];
if (empty($email)) {
echo '郵箱不能為空';
} elseif (!in_array($email, $emailList)) {
echo '新用戶,請(qǐng)先注冊(cè) <a href="http://demo.io/admin/register.php">注冊(cè)</a>';
} elseif (empty($password)){
echo '密碼不能為空';
}點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)