Ajax-Get基本使用

Ajax 概述

Ajax 是与服务器交换数据并更新部分网页的技术，在不重新加载整个页面的情况下。

使用 Ajax 步骤

创建一个异步对象

let xmlHttpObj = new XMLHttpRequest();

设置请求方式和请求地址

xmlHttpObj.open("GET", "01.Ajax-get.php", true);

发送请求

xmlHttpObj.send();

监听请求状态的变化

xmlHttpObj.onreadystatechange = function () {
    /*
    0: 请求未初始化
    1: 服务器连接已建立
    2: 请求已接收
    3: 正在处理请求
    4: 请求已完成且响应已就绪
    * */
    if (xmlHttpObj.readyState === 4) {
        // 判断是否请求成功
        if (xmlHttpObj.status >= 200 && xmlHttpObj.status < 300 ||
            xmlHttpObj.status === 304) {
            // 5.处理返回的结果
            console.log("接收到服务器返回的数据");
        } else {
            console.log("没有接收到服务器返回的数据");
        }
    }
}

最终代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BNTang</title>
    <script>
        window.onload = function () {
            let oBtn = document.querySelector("button");
            oBtn.onclick = function () {
                // 1.创建一个异步对象
                let xmlHttpObj = new XMLHttpRequest();

                // 2.设置请求方式和请求地址
                /*
                method：请求的类型；GET 或 POST
                url：文件在服务器上的位置
                async：true（异步）或 false（同步）
                注意点：Ajax 的最后一个参数可以说永远都是 true，ajax 的存在就是发送异步请求使用的
                * */
                xmlHttpObj.open("GET", "01.Ajax-get.php", true);

                // 3.发送请求
                xmlHttpObj.send();

                // 4.监听请求状态的变化
                xmlHttpObj.onreadystatechange = function () {
                    /*
                    0: 请求未初始化
                    1: 服务器连接已建立
                    2: 请求已接收
                    3: 正在处理请求
                    4: 请求已完成且响应已就绪
                    * */
                    if (xmlHttpObj.readyState === 4) {
                        // 判断是否请求成功
                        if (xmlHttpObj.status >= 200 && xmlHttpObj.status < 300 ||
                            xmlHttpObj.status === 304) {
                            // 5.处理返回的结果
                            console.log("接收到服务器返回的数据");
                        } else {
                            console.log("没有接收到服务器返回的数据");
                        }
                    }
                }
            }
        }
    </script>
</head>
<body>
<button>发送请求</button>
</body>
</html>

启动服务器然后发送请求效果如下：