目录
一、AJAX请求的基本操作
先设计出一个需求：
如下图，点击按钮，向服务端发送请求，将服务端返回的响应体结果展示在div中，页面不刷新
完成该需求需要准备前端与服务端内容，准备一个html文件和一个js文件
1.server.js文件
//1.引入express
const { response } = require('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 GET')
});
//4.监听端口启动服务
app.listen(5000,()=>{
console.log('服务已经启动，5000端口监听中....');
})2.GET.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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(){
//1.创建对象
const xhr = new XMLHttpRequest();
//2.初始化，设置请求方法和 url
xhr.open('GET','http://127.0.0.1:5000/server')
//3.发送
xhr.send();
//4.事件绑定 处理服务端返回的结果
xhr.onreadystatechange = function(){
//判断(服务端返回了所有的结果)
if(xhr.readyState === 4){
//判断响应状态码 200 404 403 401 500
if(xhr.status >= 200 && xhr.status < 300){
//设置result的文本
result.innerHTML = xhr.response;
}
}
}
}
</script>
</body>
</html>关于状态码可参考该博客：HTTP状态码
https://blog.csdn.net/m0_59897687/article/details/120820112?spm=1001.2014.3001.5501
onreadystatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性：
属性 描述 onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。 readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
status 200: "OK"
404: 未找到页面在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时，表示响应已就绪
注意： onreadystatechange 事件被触发 4 次（0 - 4）, 分别是： 0-1、1-2、2-3、3-4，对应着 readyState 的每个变化。
二、AJAX设置请求参数
在初始化这一步中，设置请求方法和 url 时，在 url 后用"?"分割加上参数，如果有多个参数，参数之间用"&"分隔开
xhr.open('GET','http://127.0.0.1:5000/server?a=100&b=200&c=300')
三、AJAX发送POST请求
先设计出一个需求：
如下所示，将鼠标放在div上面时，向服务端发起 post 请求，将响应体结果在服务端呈现出来
完成该需求需要准备前端与服务端内容，准备一个html文件和一个js文件
1.POST.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX POST 请求</title>
<style>
#result{
width: 200px;
height: 100px;
border: solid 1px #903;
}
</style>
</head>
<body>
<div id="result"></div>
<script>
//获取元素对象
const result = document.getElementById('result');
//绑定事件
result.addEventListener('mouseover',function(){
//1.创建对象
const xhr = new XMLHttpRequest();
//2.初始化，设置类型与url
xhr.open('POST','http://127.0.0.1:5000/server');
//3.发送
xhr.send();
//4.事件绑定
xhr.onreadystatechange = function(){
//判断
if(xhr.readyState === 4){
if(xhr.status >=200 && xhr.status < 300){
//处理服务端返回的结果
result.innerHTML = xhr.response;
}
}
}
})
</script>
</body>
</html>2.server.js文件
//1.引入express
const { response } = require('express');
const express = require('express');
//2.创建应用对象
const app = express()
//3.创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
app.post('/server',(request,response)=>{
//设置响应头，设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*')
//设置响应体
response.send('HELLO AJAX POST')
});
//4.监听端口启动服务
app.listen(5000,()=>{
console.log('服务已经启动，5000端口监听中....');
})四、POST设置请求体
在发送这一步骤中，请求体在send当中设置 ，请求体可以设置任意格式数据（只要服务端能处理）
以URL参数形式设置：
xhr.send('a=100&b=200&c=300'); 
以键值对形式设置
xhr.send('a:100&b:200&c:300');
五、AJAX设置请求头信息
1.预定义头信息
//设置请求头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');Content-Type：设置请求体内容的类型
application/x-www-form-urlencoded：参数查询字符串的类型（是固定写法）
2.自定义头信息
/设置请求头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.setRequestHeader('name','xupt');在server.js文件当中添加特殊的响应头
//可以接收任意类型的请求
app.all('/server',(request,response)=>{
//设置响应头，设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*')
//响应头
response.setHeader('Access-Control-Allow-Headers','*')
//设置响应体
response.send('HELLO AJAX POST')
});