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