04.Ajax-get.html 

<!-- 
        1. 什么是Ajax?
        AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。 -->
    <script>
        window.addEventListener('load', function() {
            var btn = document.querySelector('button');
            btn.onclick = function() {
                // 1.创建一个异步对象
                var xmlhttp = new XMLHttpRequest();
                // 2.设置请求方式和请求地址：
                // xmlhttp.open("GET","test1.txt",true);

                // 第1个参数method：请求的类型；GET 或 POST
                // 第2个参数url：文件在服务器上的位置
                // 第3个参数async：true（异步）或 false（同步） 注意第3个参数永远填 true！！因为Ajax存在的意义就是发异步请求
                xmlhttp.open('GET', '04.Ajax.get.php', true);

                // 3.发送请求
                xmlhttp.send();
                // 4.监听状态的变化
                xmlhttp.onreadystatechange = function() {
                    // readyState 存有XMLHttpRequest 的状态。从 0 到 4 发生变化
                    // 0: 请求未初始化
                    // 1: 服务器连接已建立
                    // 2: 请求已接收
                    // 3: 请求处理中
                    // 4: 请求已完成，且响应已就绪
                    if (xmlhttp.readyState === 4) { // 如果不写if语句 后台就会打印三次

                        // 判断是否请求成功
                        if (xmlhttp.status >= 200 && xmlhttp.status < 300 ||
                            xmlhttp.status === 304) { // 这句话的意思是 
                            // 这个异步对象xmlhttp的状态码(status) >=200并且<300 或者 === 304 就说明请求成功

                            // 5.处理返回的结果
                            console.log('输出结果');
                        } else {
                            console.log('没找到');
                        }

                    }

                }
            }
        })
    </script>
</head>

<body>
    <button>发送请求</button>
</body>
<?php
// sleep(5); // 意思是停留5秒后再执行下面的代码

// echo 'Ajax get Page';
echo $_GET['name'];
echo '<br>';
echo $_GET['age'];
?>

 

posted @ 2021-01-12 14:44  闭上耳朵  阅读(105)  评论(0)    收藏  举报