AJAX异步请求

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对象。