<h1></h1>
<!-- 这种传统的表单提交会重新加载整个网页 -->
<!-- <form action="success.html" method="post">
<input type="text" name="username">
<input type="submit" value="提交">
</form> -->
<!-- Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术
-->
<!--
创建Ajax对象 var ajax = new XMLHttpRequest();
连接到服务器 open(方法，文件名，同步异步)
发送请求 send()
接收返回值 onreadystatechange
-->
<!--
open(方法，文件名，同步异步)
参数一：post/get
参数二：请求的文件名
参数三：同步（false） 异步（true）
-->
<!--
同步交互：指发送一个请求，需要等待返回，然后才能够发送下一个请求，有个等待过程
异步交互：指发送一个请求，不需要等待返回，随时可以再发送下一个请求，即不需要等待
-->
<!--
问题：ajax是跟网络打交道的，所以服务器发送过来的东西，时间是不一定的，有可能立马返回来了，也有 可能是1分钟、5分钟等等，根据网速而定。那返回的值怎么办呢？实际上它是以一个事件存在的，当服务器 的信息返回回来的时候，这个事件就会被调用
-->
<script>
var ajax = new XMLHttpRequest();
/* 获取文件必须使用异步的方法，因为获取需要时间 */
// console.log('请求未初始化（还没有调用到open方法）'+ajax.responseText+'---'+ajax.readyState);
ajax.open('GET','aaa1.txt',true);
ajax.send();
// console.log('服务器连接已建立（已调用send方法，正在发生请求）'+ajax.responseText+'---'+ajax.readyState);
/* 使用onreadystatechange方式监听什么时候拿到返回值 */
/* 返回数据的时候就会被调用 */
ajax.onreadystatechange = function(){
// if(ajax.readyState==2){
// console.log('请求已接收 send方法完成，已接收到全部响应内容'+ajax.responseText+'---'+ajax.readyState);
// }
// if(ajax.readyState==3){
// console.log('请求处理中（解析响应内容）'+ajax.responseText+'---'+ajax.readyState);
// }
// console.log(ajax.readyState,ajax.status)
if(ajax.readyState==4&&ajax.status==200){
// console.log('请求已完成，且响应已就绪'+ajax.responseText+'---'+ajax.readyState);
document.getElementsByTagName('h1')[0].innerHTML = ajax.responseText;
}else if(ajax.readyState==4&&ajax.status!=200){
console.log('请求失败',ajax.status);
}
}
/* 无论后台地址是否正确，我的请求的状态readyState都会发生改变 */
/* status后台接口地址的状态 正确 200 地址错误 404 后端错误 500 */
// ajax.readyState
// 从 0 到 4 发生变化
// 0: 请求未初始化（还没有调用到open方法）
// 1: 服务器连接已建立（已调用send方法，正在发生请求）
// 2: 请求已接收（send方法完成，已接收到全部响应内容）
// 3: 请求处理中（解析响应内容）
// 4: 请求已完成，且响应已就绪
/*
ajax.status
200："OK"
404：未找到页面
*/
</script>
