<script>
window.onload = function(ev){
var oBtn = document.querySelector('button');
// querySelector https://segmentfault.com/q/1010000014291684
oBtn.onclick = function(ev1){
// 1. 创建异步对象
var xmlHttp = new XMLHttpRequest();
/* 2. 设置请求方式和请求地址 open(method,url,async)
method: 请求的类型 GET 或 POST
url: 文件在服务器上的位置
async: true(异步) false(同步)
*/
xmlHttp.open("GET", "04-ajax-get.php", true);
// 3. 发送请求
xmlHttp.send();
// 4. 监听状态的变化
xmlHttp.onreadystatechange = function(ev2){
/*
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4:请求已完成，且相应已就绪
*/
if(xmlHttp.readyState === 4){
//判断是否请求成功
if(xmlHttp.status >= 200 && xmlHttp.status < 300 || xmlHttp.status === 304){
// 5. 处理返回的结果
console.log('接收到服务器返回的数据');
}else{
console.log('没有接收到服务器返回的数据');
}
}
}
}
}
</script>
</head>
<!-- 使用Ajax更新数据和 不使用Ajax的区别：
不使用ajax更新数据，会重新加载整个页面
（例如 淘宝 输入关键字，搜索）
使用ajax更新数据， 不会重新加载整个页面，只更新某些部分
（例如 淘宝搜索栏- 输入关键字 自动更新下拉提示框的内容 ）-->
<body>
<button>发送请求</button>
</body>
