问答: Ajax的工作原理分析(用自己语言组织)
Ajax:Asynchronous JavaScript and XML 异步JavaScript 和 XML
通过浏览器（客*户端）（局部）发生事件，创建一个XMLHTTPqequest 对象 将请求发送给你服务端（server）
服务端在接收到HTTPRequest后进行处理，并将处理结果back to 浏览器（客*户端）
浏览器在接收到服务端的数据后，使用JavaScript脚本，更新局部或全部页面的内容。
在此期间，浏览器和服务器处理的可能不是同一个事件，也就是说多数情况下都是异步传输和响应数据的
现在都被json取代了，xml比较臃肿。
2.编程: Ajax用户登录验证
代码1：实现数据的获取 和服务监视
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录验证</title>
</head>
<body>
<!--
使用Ajax进行验证登录的流程思路：
1.创建XMLHttpRequest 对象
2.设置请求参数，这里是post请求，需要设置setRequestHeader 信息
3.send ，把发送的数据格式为json格式
4.监听state改变状态，并处理返回的数据
-->
<h3>用户登录界面</h3>
<form >
<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 () {
// 创建xhr 对象
let xhr = new XMLHttpRequest();
//2.设置请求参数及header
xhr.open('post','./check.php',true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//3.格式化成JSON数据格式，发送请求
let data = {
email: document.getElementsByName('email')[0].value,
password: document.getElementsByName('password')[0].value
}; //js 字面量对象
let data_json = JSON.stringify(data); //把js对象转变成json 字符串
xhr.send('data='+data_json);// 加个字符串data,形成键值对
//4 监视响应状态
xhr.onreadystatechange = function(){
if (xhr.readyState === 4) { // 请求准备就绪
if (xhr.status === 200) {//服务器状态
let p = document.createElement('p');
p.style.color = 'red';
let json = JSON.parse(xhr.responseText);// 获得服务器返回的数据
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);// 删除自己添加的哪个p
//btn.disabled = false;
if (json.status === 1) {
location.href = 'http://www.php.cn'; //一般跳转到管理界面
}
},3000);
} else {
alert('响应失败'+xhr.status);
}
} else {
alert('Error:'+xhr.readyState)
}
}
}
</script>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
代码2： 实现数据的验证，及数据的反馈
实例
<?php
/**
* Created by PhpStorm.
* User: Core
* Date: 2018/9/16
* Time: 17:57
*/
$user = json_decode($_POST['data']);
//echo $user->email;
$email = $user->email;
$password = $user->password;
$pdo = new PDO('mysql:host=127.0.0.1;dbname=stu','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;
}运行实例 »
点击 "运行实例" 按钮查看在线实例
3.手写: Ajax的完整运行流程(以get为例)，共四步。
0.根据功能获取对象，添加函数
1.创建XMLHttpRequest 对象
let xhr = new XMLHttpRequest();
2.设置请求
xhr.open ('get','请求地址'，true);
3.发送数据
xhr.send();
4.监听响应状态
xhr.onreadystatechange = function(){
if(xhr.readyState ===4) {
if (xhr.status === 2000) {
执行code
}else{
errors 提醒；+xhr.status;
}
}
}else{
throw 一个错误提示
}
