javascript之AJAX
AJAX是什么??
AJAX是一种用于创建快速动态网页的技术。
在后台与服务器进行少量大的数据交换,AJAX可以使网页实现异步更新。就是在不重新加载网页的情况下,对网页的某部分进行更新
传统的网页如果需要更新内容,必须重载整个网页面。
有很多使用AJAX的应用程序案例:百度地图,PHP中文网等等
POST请求数据的处理方式
一种是转换成PHP能处理的方式,在前端部分,我们都将请求数据,转换成JSON字符串,这样后端能够读取
示例
前端部分:
<script>
// 创建AJAX对象
var xhr = new XMLHttpRequest();
// 监听请求
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
}
// 初始化请求参数
xhr.open("POST","test1.php", true);
// 设置请求头,模拟表单类型数组进行发送,application/x-www-form-urlencoded默认
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
var user = {
email: "admin@php.cn",
password: "123456",
};
// 将JS对象转为JSON
var data = JSON .stringify(user);
// 发送请求
xhr.send(data);
后端部分:
// 获取前端的数据
$data = key($_POST);
// 将前端数据JSON解码
$user = json_decode($data);
print_r($user);
// 转换为数组,后端好处理
$user = json_decode($data,true);
print_r($user);
打印:
demo1.html:16 stdClass Object
(
[email] => admin@php_cn
[password] => 123456
)
Array
(
[email] => admin@php_cn
[password] => 123456
)
一种是通过file_get_contents("php://input")
的方式访问,php://input
是个可以访问请求的原始数据的只读流
前端部分代码和上面一样
后端:
$data = file_get_contents('php://input');
echo $data;
// 将数据转换为PHP能够处理的类型
$user = json_decode($data);
print_r($user);
$user = json_decode($data, true);
print_r($user);
打印:
demo1.html:16 stdClass Object
(
[email] => admin@php_cn
[password] => 123456
)
Array
(
[email] => admin@php_cn
[password] => 123456
)
FromData与传统的请求头的区别
区别
- 可直接序列化表单数据
- AJAX可直接识别,可以不用设置请求头
- 可用与表单数据与普通数据
案例
前端部分:
<script>
// 创建AJAX对象
var xhr = new XMLHttpRequest();
// 监听请求
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
}
// 初始化请求参数
xhr.open("POST", "test4.php", true);
// 设置请求头,模拟表单类型数组进行发送,如果是FormData,可以不用设置
// xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
// FormData
var data = new FormData();
data.append("username", "1");
data.append("password", "1");
// 发送请求
xhr.send(data);
</script>
后端:
// 直接打印,不用处理,php能够识别
// 可以看到PHP已经识别到数组了
Array
(
[username] => 1
[password] => 1
)
打印:
demo4.html:16 {"status":1,"message":"\u9a8c\u8bc1\u901a\u8fc7"}
FormData实现用户登录与验证
前端部分
<p>Fromdata请登录</p>
<form
action=""
method="POST"
style="display: grid; gap:15px;";
onsubmit="return false"
>
<input
type="text"
name="username"
placeholder="exam@email.com"
required
autofocus
/>
<input type="password" name="password" placeholder="*****" required />
<button>提交</button>
</form>
<script>
// 获取表单和按钮
var form = document.querySelector("form");
var btn = document.querySelector("form button");
// 给按钮绑定点击事件,进行AJAX请求
btn.onclick = function () {
// 1.创建AJAX对象
var xhr = new XMLHttpRequest();
// 2.监听请求
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
// 将json转为js对象
// var res = JSON.parse(xhr.responseText);
var res = JSON.parse(xhr.responseText);
console.log(res);
if (res.status > 0)
error = res.message;
else
error = "未知错误";
// 将提示信息显示到表单中
console.log(error);
var span = document.createElement("span");
span.innerHTML = error;
span.style.color = "red";
form.appendChild(span);
}
};
// 3.初始化请求参数
xhr.open("POST", "test4.php", true);
var data = new FormData(form);
data.append("login_time",new Date().getTime());
// 5.发送请求
xhr.send(data);
};
// 清除提示信息
var inputs = document.querySelectorAll("input");
for(var i = 0; i < inputs.length; i ++) {
inputs[i].oninput = function () {
if (btn.nextElementSibling !== null)
form.removeChild(btn.nextElementSibling);
}
}
后端部分:
$pdo = new PDO ('mysql:host=localhost;dbname=message','1','123456');
$stmt = $pdo->prepare("SELECT COUNT(`id`) FROM `users` WHERE `account`=? AND `password` = ? LIMIT 1");
$stmt->execute([$_POST['username'],$_POST['password']]);
// print_r($stmt);
$user = $stmt -> fetch(PDO::FETCH_NUM);
// print_r($user);
if($user[0] != 0) echo json_encode(['status'=>1, 'message'=>'验证通过']);
else echo json_encode(['status'=>0, 'message'=> '邮箱密码错误']);
输出:
总结
AJAX请求数据有四步,请求数据有POST和GET。POST请求数据处理方式一共有两种,一种是通过POST本身获取,一种是通过文件流的方式。FormData用来发送数据有很大的优势,PHP能够直接处理,只需要new
一个FormData
对象。