继上
在前端1-GET.html文件中,添加如下代码
<!--点击按钮发送请求,将响应体显示在div中-->
<script>
//获取button元素
const btn = document.getElementsByTagName('button')[0];
const result = document.getElementById('result');
//按钮绑定事件
btn.onclick = function(){
//1.创建对象 xhr是Ajax
const xhr = new XMLHttpRequest();
//2.初始化 设置请求方法和url;可以使用?添加请求参数,&连接多个参数
xhr.open('Get','http://127.0.0.1:8000/server?a=100&b=200&c=300');
//3.发送
xhr.send();
//4.事件绑定 处理服务端返回结果
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
//判断响应状态码是否成功,200~299都表示成功
if(xhr.status >= 200 && xhr.status <300){
//设置div文本内容
result.innerHTML = xhr.response;
}
}
}
}
</script>
F5运行当前html文件,点击 发送请求 :所有代码如下:
<!--前端 浏览器准备-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax Get 请求</title>
<style>
#result{
width: 200px;
height: 100px;
border:solid 1px #90D;
}
</style>
</head>
<body>
<button>发送请求</button>
<div id = "result"></div>
<!--点击按钮发送请求,将响应体显示在div中-->
<script>
//获取button元素
const btn = document.getElementsByTagName('button')[0];
const result = document.getElementById('result');
//按钮绑定事件
btn.onclick = function(){
//1.创建对象 xhr是Ajax
const xhr = new XMLHttpRequest();
//2.初始化 设置请求方法和url; 使用?添加请求参数,&连接多条参数
xhr.open('Get','http://127.0.0.1:8000/server?a=100&b=200&c=300');
//3.发送
xhr.send();
//4.事件绑定 处理服务端返回结果
//on 当...什么时候
//readystate 是xhr对象中的属性,表示状态
//0 未初始化,1 open方法调用完毕,2 send方法调用完毕,3 服务端返回部分结果,4 服务端返回全部结果
//change 改变
//该方法会在状态改变时别调用,一共调用4次
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
//判断响应状态码200,404,403,401,500
//200~299都表示成功
if(xhr.status >= 200 && xhr.status <300){
//设置div文本内容
result.innerHTML = xhr.response;
//处理结果 包括 行,头,空行,体
// console.log(xhr.status);//状态码
// console.log(xhr.statusText);//状态字符
// console.log(xhr.getAllResponseHeaders());//所有响应头
// console.log(xhr.response);//响应体
}
}
}
}
</script>
</body>
</html>
个人学习记录,欢迎指点讨论