一、Ajax请求流程

1、创建Ajax对象：var xhr = new XMLHttpRequest();
2、监听请求：

xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
          console.log(xhr.responseText);
        }

3、初始化请求参数：xhr.open("GET", "test1.php", true);
4、发送请求：xhr.send(null);

post请求方式：多一步：设置请求头,模拟表单类型的数组进行发送,application/x-www-form-urlencoded默认，还有其它类型

代码演示：

<script>
    // 1. 创建Ajax对象
    var xhr = new XMLHttpRequest();
    // 2. 监听请求
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log(xhr.responseText);
        }
    };
    // 3. 初始化请求参数
    xhr.open("GET", "test1.php", true);
    // 4. 发送请求
    xhr.send(null);
</script>

二、POST请求数据的处理方式

1、模拟表单类型的数组进行发送,`application/x-www-form-urlencoded`，默认

代码实例演示：

<script>
    // 1. 创建Ajax对象
    var xhr = new XMLHttpRequest();
    // 2. 监听请求
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log(xhr.responseText);
        }
    };
    // 3. 初始化请求参数
    xhr.open("POST", "test2.php", true);
    // 4. 设置请求头,模拟表单类型的数组进行发送,application/x-www-form-urlencoded默认
    xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
    var user = {
        name: "minh",
        email: "minh@texhong.con",
        password: "123456",
    };
    // 5. 将js对象转为json
    // 前后端数据传递只能是字符串
    var data = JSON.stringify(user);
    // 6. 发送请求
    xhr.send(data);
</script>

演示效果：

2、直接传递json字符串，`application/json;charset=utf-8`

代码实例演示：

<script>
    // 1. 创建Ajax对象
    var xhr = new XMLHttpRequest();
    // 2. 监听请求
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log(xhr.responseText);
        }
    };
    // 3. 初始化请求参数
    xhr.open("POST", "test3.php", true);
    // 4. 设置请求头
    xhr.setRequestHeader("content-type", "application/json;charset=utf-8");
    var user = {
        email: "admin@php.cn",
        password: "123456",
    };
    // 将js对象转为json
    var data = JSON.stringify(user);
    // 5. 发送请求
    xhr.send(data);
</script>

演示效果：

三、FormData较传统的请求头表单数据模拟的优势

快速序列化表单数据
FormData包装的数据可以直接被Ajax对象识别，无需设置请求头
除了表单数据，FormData还兼容其它普通数据
服务器上可以使用原生的$_POST来处理

代码实例演示：

<script>
    // 1. 创建Ajax对象
    var xhr = new XMLHttpRequest();
    // 2. 监听请求
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log(xhr.responseText);
        }
    };
    // 3. 初始化请求参数
    xhr.open("POST", "test4.php", true);
    // FormData
    var data = new FormData();
    // 封装数据
    // data.append("键", "值");
    data.append("username", "admin");
    data.append("password", "admin888");
    // 5. 发送请求
    xhr.send(data);
</script>

演示效果：

四、FormData实现用户登录验证

代码实例演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax-POST-FormData</title>
</head>
<style>
    p { text-align: center;}
    form {display: grid;gap: 15px;width: 160px;margin: auto;}
</style>
<body>
<p>用户登录</p>
<!-- onsubmit="return false": 禁用表单的默认提交,改为自定义的Ajax提交 -->
<form action="" method="POST" onsubmit="return false">
    <input type="text" name="name" placeholder="name" required autofocus/>
    <input type="password" name="password" placeholder="******" required />
    <button>提交</button>
</form>
<script>
    // 1. 获取表单和按钮
    var form = document.querySelector("form");
    var btn = document.querySelector("form button");
    // 2. 给按钮绑定点击事件,进行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);
                // 将jsonl转js对象
                var res = JSON.parse(xhr.responseText);
                // console.log(res.message);
                switch (res.status) {
                    case 0:
                    case 1:
                        error = res.message;
                        break;
                    default:
                        error = "未知错误";
                }
                // console.log(error);
                // 将提示显示到表单中
                var span = document.createElement("span");
                span.innerHTML = error;
                span.style.color = "red";
                form.appendChild(span);
            }
        };
        // 3. 初始化请求参数
        xhr.open("POST", "test5.php", true);
        // FormData
        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);
        };
    }
</script>
</body>
</html>

后端处理代码：

<?php
$pdo = new PDO('mysql:host=localhost;dbname=phpedu', 'root', 'root');
$stmt = $pdo->prepare("SELECT COUNT(`id`) FROM `users` WHERE `name`=? && `password`=?");
$stmt->execute([$_POST['name'], sha1($_POST['password'])]);
$user = $stmt->fetch(PDO::FETCH_NUM);
if ($user[0] == 1) echo json_encode(['status'=>1, 'message'=>'验证通过']);
else echo json_encode(['status'=>0, 'message'=>'用户名或密码错误']);