【ajax】3.GET：AJAX案例准备+AJAX请求的基本操作+AJAX设置请求参数
〇、前情提要
在看b站视频 - 尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版（ajax2020最新版），中插了这个知识记录一下。
参考：
- 我的笔记：
【javaweb】b站-尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版（ajax2020最新版） 笔记
https://blog.csdn.net/weixin_43210113/article/details/110628389 - b站视频 - 尚硅谷Web前端Ajax教程初学者零基础入门到精通全套完整版（ajax2020最新版）
https://www.bilibili.com/video/BV1WC4y1b78y?p=2 - 笔记视频链接
链接：https://pan.baidu.com/s/1Wnwb42-AaqAlg6cQ0PRHwg
提取码：3waj
————————————————————————————
- 我的笔记：
【ajax】NodeJS的安装与介绍+express框架介绍与基本使用
https://blog.csdn.net/weixin_43210113/article/details/110636188
一、AJAX案例准备
如没有安装过NodeJS和expressjs请看↓
我的笔记：
【ajax】NodeJS的安装与介绍+express框架介绍与基本使用
https://blog.csdn.net/weixin_43210113/article/details/110636188
准备内容
前端内容的准备+服务器server的准备
如果请求行的第二段的路径为/server的话就执行回调函数app.get里的代码，且由response响应
前端显示为：
要实现点击 点击发送请求，向服务端发送请求，服务端返回响应体结果在div中呈现，页面不刷新。
1-GET.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 #90b;
}
</style>
</head>
<body>
<button>点击发送请求</button>
<div id="result"></div>
</body>
</html>
server.js
//1. 引入express
const express = require('express');
//2. 创建应用对象
const app = express();
//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/server', (request, response) => {
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
//设置响应体
response.send('HELLO AJAX');
});
//4. 监听端口启动服务
app.listen(8000, () => {
console.log("服务已经启动, 8000 端口监听中....");
});
输入node server.js
会报错端口已经占用address already in use :::8000
切换到2-express框架中2: node
control + C
释放端口 / 换个端口
切换到3：zsh/cmd 重新输入node server.js
重新出现
浏览器127.0.0.1:8000测试
输入127.0.0.1:8000/server
响应体返回正常
响应头返回
response.setHeader('Access-Control-Allow-Origin', '*');允许跨域
至此，准备完成。
二、AJAX请求的基本操作
1-GET.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 #90b;
}
</style>
</head>
<body>
<button>点击发送请求</button>
<div id="result"></div>
<script>
//获取button元素
const btn = document.getElementsByTagName('button')[0];
//绑定事件
btn.onclick = function(){
//0. 测试
//console.log('test');
//1. 创建对象
const xhr = new XMLHttpRequest();
//2. 初始化 设置请求方法和 url
xhr.open('GET', 'http://127.0.0.1:8000/server');
//3. 发送
xhr.send();
//4. 事件绑定 处理服务端返回的结果
// on when 当....时候
// readystate 是 xhr 对象中的属性, 表示状态 0 1 2 3 4
// change 改变4次
xhr.onreadystatechange = function(){
//判断 (服务端返回了所有的结果)
if(xhr.readyState === 4){
//判断响应状态码 200 404 403 401 500
// 2xx 成功
if(xhr.status >= 200 && xhr.status < 300){
//处理结果 行 头 空行 体
// 1.响应行
console.log(xhr.status);//状态码
console.log(xhr.statusText);//状态字符串
console.log(xhr.getAllResponseHeaders());//所有响应头
console.log(xhr.response);//响应体
}else{
}
}
}
}
</script>
</body>
</html>
- xhr：
XMLHttpRequest缩写 可筛选 联系到json
- readystate
是 xhr 对象中的属性, 表示状态 0 1 2 3 4
0: 请求未初始化
1: 服务器连接已建立（open调用完毕）
2: 请求已接收（send调用完毕）
3: 请求处理中（服务端返回部分结果）
4: 请求已完成，且响应已就绪（服务端返回全部结果）
server.js
内容不变
测试
console中获取到状态码、状态字符串、所有响应头、响应体
请求头
响应头
响应体
想要将文字呈现，还需在1-GET.html中添加result
<!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 #90b;
}
</style>
</head>
<body>
<button>点击发送请求</button>
<div id="result"></div>
<script>
//获取button元素
const btn = document.getElementsByTagName('button')[0];
const result = document.getElementById("result");
//绑定事件
btn.onclick = function(){
// console.log('test');
//1. 创建对象
const xhr = new XMLHttpRequest();
//2. 初始化 设置请求方法和 url
xhr.open('GET', 'http://127.0.0.1:8000/server');
//3. 发送
xhr.send();
//4. 事件绑定 处理服务端返回的结果
// on when 当....时候
// readystate 是 xhr 对象中的属性, 表示状态 0 1 2 3 4
// change 改变
xhr.onreadystatechange = function(){
//判断 (服务端返回了所有的结果)
if(xhr.readyState === 4){
//判断响应状态码 200 404 403 401 500
// 2xx 成功
if(xhr.status >= 200 && xhr.status < 300){
//处理结果 行 头 空行 体
//响应
// console.log(xhr.status);//状态码
// console.log(xhr.statusText);//状态字符串
// console.log(xhr.getAllResponseHeaders());//所有响应头
// console.log(xhr.response);//响应体
//设置 result 的文本
result.innerHTML = xhr.response;
}else{
}
}
}
}
</script>
</body>
</html>
测试2
未页面刷新即获得响应结果
三、AJAX设置请求参数
平时传参位置
地址栏传参
1-GET.html
在url后缀参数，用?分割，多个参数用&分隔
xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');
<!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 #90b;
}
</style>
</head>
<body>
<button>点击发送请求</button>
<div id="result"></div>
<script>
//获取button元素
const btn = document.getElementsByTagName('button')[0];
const result = document.getElementById("result");
//绑定事件
btn.onclick = function(){
// console.log('test');
//1. 创建对象
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 when 当....时候
// readystate 是 xhr 对象中的属性, 表示状态 0 1 2 3 4
// change 改变
xhr.onreadystatechange = function(){
//判断 (服务端返回了所有的结果)
if(xhr.readyState === 4){
//判断响应状态码 200 404 403 401 500
// 2xx 成功
if(xhr.status >= 200 && xhr.status < 300){
//处理结果 行 头 空行 体
//响应
// console.log(xhr.status);//状态码
// console.log(xhr.statusText);//状态字符串
// console.log(xhr.getAllResponseHeaders());//所有响应头
// console.log(xhr.response);//响应体
//设置 result 的文本
result.innerHTML = xhr.response;
}else{
}
}
}
}
</script>
</body>
</html>
测试
有对应参数，发送成功