Ajax 概述
Ajax 是与服务器交换数据并更新部分网页的技术，在不重新加载整个页面的情况下。
使用 Ajax 步骤
- 创建一个异步对象
let xmlHttpObj = new XMLHttpRequest();
- 设置请求方式和请求地址
xmlHttpObj.open("GET", "01.Ajax-get.php", true);
- 发送请求
xmlHttpObj.send();
- 监听请求状态的变化
xmlHttpObj.onreadystatechange = function () {
/*
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 正在处理请求
4: 请求已完成且响应已就绪
* */
if (xmlHttpObj.readyState === 4) {
// 判断是否请求成功
if (xmlHttpObj.status >= 200 && xmlHttpObj.status < 300 ||
xmlHttpObj.status === 304) {
// 5.处理返回的结果
console.log("接收到服务器返回的数据");
} else {
console.log("没有接收到服务器返回的数据");
}
}
}
最终代码如下：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BNTang</title>
<script>
window.onload = function () {
let oBtn = document.querySelector("button");
oBtn.onclick = function () {
// 1.创建一个异步对象
let xmlHttpObj = new XMLHttpRequest();
// 2.设置请求方式和请求地址
/*
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）
注意点：Ajax 的最后一个参数可以说永远都是 true，ajax 的存在就是发送异步请求使用的
* */
xmlHttpObj.open("GET", "01.Ajax-get.php", true);
// 3.发送请求
xmlHttpObj.send();
// 4.监听请求状态的变化
xmlHttpObj.onreadystatechange = function () {
/*
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 正在处理请求
4: 请求已完成且响应已就绪
* */
if (xmlHttpObj.readyState === 4) {
// 判断是否请求成功
if (xmlHttpObj.status >= 200 && xmlHttpObj.status < 300 ||
xmlHttpObj.status === 304) {
// 5.处理返回的结果
console.log("接收到服务器返回的数据");
} else {
console.log("没有接收到服务器返回的数据");
}
}
}
}
}
</script>
</head>
<body>
<button>发送请求</button>
</body>
</html>
启动服务器然后发送请求效果如下：
如上是请求地址正常的情况下，如果请求地址不正确那么效果该是怎样的呢？：
