目录
一、AJAX请求的基本操作
1.server.js文件
2.GET.html文件
二、AJAX设置请求参数
三、AJAX发送POST请求
1.POST.html文件
2.server.js文件
四、POST设置请求体
五、AJAX设置请求头信息
1.预定义头信息
2.自定义头信息
一、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.初始化，设置请求方法和 urlxhr.open('GET','http://127.0.0.1:5000/server')//3.发送xhr.send();//4.事件绑定 处理服务端返回的结果xhr.onreadystatechange = function(){//判断(服务端返回了所有的结果)if(xhr.readyState === 4){//判断响应状态码 200 404 403 401 500if(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.初始化，设置类型与urlxhr.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')
});
