笔记-Ajax的基本使用之发送get请求

最新推荐文章于 2024-09-11 02:20:32 发布

_Glorious

最新推荐文章于 2024-09-11 02:20:32 发布

阅读量359

点赞数

本文链接：https://blog.csdn.net/weixin_57875982/article/details/125194496

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax的基本使用ajax-GET</title>
    <!-- ajax是与服务器交换数据并更新部分网页的艺术 -->
    <!--不使用Ajax会重新加载我们的网页，使用Ajax不会重新加载我们的网页，
        两者之间都是去服务器交换数据的 -->
    <!-- AJAX不是编程语言 它仅仅组合了：浏览器内建的 XMLHttpRequest对象(从 web 服务器请求数据)
        JavaScript 和 HTML DOM（显示或使用数据） -->
    <!--【Ajax的核心是XMLHttpRequest对象】 是浏览器内建的对象。它用于同幕后服务器交换数据，
        所以更新网页的部分时，不需要重新加载整个页面-->
</head>
<script>
    window.addEventListener('load', function () {
        var btn = document.querySelector('button');
        btn.addEventListener('click', function () {
            // ajax的使用 
            // 1.创建一个【异步对象】
            var xmlHttp = new XMLHttpRequest();
            //console.log(xmlHttp);
            // 2.设置 请求方式 和 请求地址
            /* 发送请求：用其open(method,url,async)方法
                method 指 请求方式 "GET"或 "POST"
                url 代表要把数据传送至的文件在服务器中的位置(请求地址)
                async 有 true(异步) 或 false(同步)
                //第三个参数一般传true，因为Ajax的存在意义就是发异步请求
            */
            xmlHttp.open("GET", "4.Ajax-GET.php", true);
            // 3.发送请求 其send()方法（用于GET）
            xmlHttp.send();
            // 4.监听状态变化
            xmlHttp.onreadystatechange = function () {
                //onreadystatechange属性用于监听对象的状态，
                //当该 异步【对象状态】(readyState属性存有) 发生变化时，调用函数
                console.log(xmlHttp.readyState);
                /*  0: 请求未初始化
                    1: 服务器连接已建立
                    2: 请求已接收
                    3: 正在处理请求
                    4: 请求已完成且响应已就绪
                */   
                if (xmlHttp.readyState == 4) {// 若请求成功
                    console.log("发送请求成功");
                    // 判断服务器是否响应 [200~300) 304代表服务器成功响应
                    if (xmlHttp.status >= 200 && xmlHttp.status < 300 || xmlHttp.status == 304) {
                        //status属性存有【对象的http状态】
                        console.log("响应成功");
                        console.log(xmlHttp.status);
                    } else {
                        console.log("响应失败");
                    }
                }
            }
            // 5.处理返回结果
        });
    })

</script>

<body>
    <button>按钮</button>

</body>

</html>