<!-- 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']; ?>