1.问答: Ajax的工作原理分析(用自己语言组织)
代为用户向服务器发送一段 javascript代码请求，等收到服务器的数据，再由javascript更新客 户端内容
2.编程: Ajax用户登录验证
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax实战:表单验证</title>
</head>
<body>
<h3>用户登录</h3>
<form method="post">
<p>邮箱: <input type="email" name="email"></p>
<p>密码: <input type="password" name="password"></p>
<p><button type="button">提交</button></p>
</form>
<script>
let btn = document.getElementsByTagName('button')[0];
btn.onclick = function () {
//1.创建xhr对象
let xhr = new XMLHttpRequest();
//2.监听响应状态
xhr.onreadystatechange = function()
{
if (xhr.readyState === 4)
{ // 准备就绪
// 判断响应结果:
if (xhr.status === 200)
{
// 响应成功,通过xhr对象的responseText属性可以获取响应的文本,此时是html文档内容
let p = document.createElement('p'); //创建新元素放返回的内容
p.style.color = 'red';
//p.innerHTML = xhr.responseText;
//将服务器返回的json字符串转为js对象
let json = JSON.parse(xhr.responseText);
//如果json.status==1,表示查询成功
if(json.status === 1){p.innerHTML = json.msg;}else if(json.status === 0){p.innerHTML = json.msg;}
// 将响应文本添加到新元素上
document.forms[0].appendChild(p); // 将新元素插入到当前页面中
btn.disabled = true;
setTimeout(function(){
document.forms[0].removeChild(p);
btn.disabled = false;//启用按钮
if (json.status == 1) {
location.href = 'admin.php';
}
},1000);
}else {
// 响应失败,并根据响应码判断失败原因
alert('响应失败'+xhr.status);
}
} else {
// http请求仍在继续,这里可以显示一个一直转来转去的图片
}
}
//3.设置请求参数
xhr.open('post','inc/check.php',true);
//4. post请求必须要设置头信息,将内容类型设置为表单提交方式
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//5.发送请求
let data = {
email: document.getElementsByName('email')[0].value,
password: document.getElementsByName('password')[0].value
};
// data = 'email='+data.email+'&password='+data.password;
let data_json = JSON.stringify(data);//JSON.stringify()将js对象转为json字符串
xhr.send('data='+data_json);
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<?php
//json_decode()将json字符串转为PHP对象
$user = json_decode($_POST['data']);
//echo $user->email;
$email = $user->email;
$password = md5($user->password);
$pdo = new PDO('mysql:host=localhost;dbname=edu','root','root');
$sql = "SELECT COUNT(*) FROM `user` WHERE `email`='{$email}' AND `password`='{$password}' ";
$stmt = $pdo->prepare($sql);
$stmt->execute();
if ($stmt->fetchColumn(0) == 1) {
echo json_encode(['status'=>1,'msg'=>'登录成功,正在跳转...']) ;
exit;
} else {
echo json_encode(['status'=>0,'msg'=>'邮箱或密码错误,登录失败!']) ;
exit;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<?php
header("content-type:text/html;charset=utf-8");
echo '<h2>网站管理后台</h2>';运行实例 »
点击 "运行实例" 按钮查看在线实例
3.手写: Ajax的完整运行流程(以get为例)，共四步。
创建XMLHttpRequest对象,也就是创建一个异步调用对象；
监听响应状态；
设置请求参数；
发送请求。
代为用户向服务器发送请求，通过监听就绪状态，如果为4，准备就绪，然后获取请求码，如为200，表示从服务器上获取信息。