谈一谈 强制缓存
- 强制缓存就是向浏览器缓存查找该请求结果，并根据该结果的缓存规则来决定是否使用该缓存结果的过程。
- 简单来讲就是强制浏览器使用当前缓存
- 首先请求头需要携带"Cache-Control"的信息为"max-age = 时间"：客户端允许开启强制缓存
- 响应头需要携带"Cache-Control"的信息为"max-age = 时间"：服务端也允许开启强制缓存 谈一谈 协商缓存
- 客户端向服务端发送一个请求，请求相应的资源
- 服务端向客户端发送一个响应，在响应头中携带两个关于缓存的信息，分别是 当前文件的唯一标识（eTag）和 当前文件的最后一次修改时间（last-modified）
- 客户端收到了响应文件和关于文件的缓存信息，并把缓存信息保存在客户端，但是更换了名称，把eTag更名为if-none-match,把last-modified更名为if-modified-since。
- 客户端第二次请求服务端，请求相应的资源，会在请求头上携带两个字段，就是之前已经请求过的文件的缓存信息 if-none-match和if-modified-since
- 服务端接收到了客户端的if-none-match和if-modified-since,然后会重新获取被请求文件的eTag和last-modified，然后开始比较，如果两个都比较成功，则读取缓存，否则返回新的响应
6.如果走缓存，则服务端的响应状态码是304，并且不需要设置任何的响应内容 7.如果走缓存，则客户端接收到的状态码是304，并直接去读取缓存
8.如果不走缓存，则响应状态码是200，并且响应最新的数据，还要携带最新的eTag和last-modified
ajax的post请求
<body>
<form action="#" id="form">
user: <input type="text" name="user" id="user">
<br>
pass: <input type="password" name="pass" id="pass">
<br>
<button id="btn">提交</button>
</form>
<script>
const oform = document.getElementById("form");
const btn = document.getElementById("btn");
const User = document.getElementById("user");
const Pass = document.getElementById("pass");
oform.onsubmit = function(e){
//1.实例化XMLHttpRequest()对象，得到一个ajax请求对象
const xhr = new XMLHttpRequest();
//2.打开连接open方法(参数1：请求方式，参数2:请求地址，参数3：是否异步)
xhr.open("post",`/login`,true);
//post 请求需要设置请求头
//xhr.setRequestHeader("Content-Type","application/json;charset=utf-8")
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8")
//3.发送send请求
// xhr.send(JSON.stringify({
// user:user.value,
// pass:pass.value
// }))
xhr.send(`user=${User.value}&pass=${Pass.value}`);
//4.xhr有事件可以接受请求的过程中readystate码的改变
xhr.onreadystatechange = function(){
if(xhr.readyState === 4 && xhr.status === 200){
//xhr.responseText:接收文本数据 xhr.responseXML：接收xml的数据
console.log(JSON.parse(xhr.responseText));
}
}
//阻止浏览器的默认行为
// e.preventDefault?e.preventDefault():e.returnValue = false;
return false;
}
</script>
</body>
## **nodejs代码**
`
const express = require("express");
const path = require("path");
const app = express();
//body-parser中间件是处理post请求数据的
const bodyParser = require("body-parser");
app.use(bodyParser.json());//接收post请求发送的数据为json字符串格式
app.use(bodyParser.urlencoded({
extended:false
}));
app.get("/",(req,res)=>{
const filePath = path.resolve(__dirname,"./index.html");
res.sendFile(filePath)
})
app.post("/login",(req,res)=>{
const {
user,
pass
}=req.body;
console.log(req.body);
if(user === "laoli" && pass === "123"){
const data ={
mes:"ok",
code:1
}
return res.json(data);
}
const err ={
mes:"no ok",
code:0
}
return res.json(err);
})
app.listen("3001",err=>{
if(err){
console.log(err);
return;
}
console.log("http://127.0.0.1:3001");
})`
