2025 js——面试题（7）——ajax相关
题目：
一、手写一个简易的AJAX？
结合promise
jquery和Ajax
xhr.readyState：
0-UNSET 尚末调用 open 方法
1-OPENED open 方法已被调用
2-HEADERS RECEIVED send 方法已被调用，header 已被接收
3-LOADING 下载中，responseText 已有部分内容
4-DONE 下载完成
xhr.status：
2xx-表示成功处理请求，如 200
3xx-需要重定向，浏览器直接跳转，如 301 302 304
4xx-客户端请求错误，如 404 403
5xx-服务器端错误
二、JSONP
1.访间 https://imooc.com/服务端一定返回一个 html文件吗 ?
2.服务器可以任意动态拼接数据返回，只要符合 html格式要求
3.同理于<script src= “https://imooc.com/getData.js
JSONP实现原理：
1.<script>可绕过跨域限制
2.服务器可以任意动态拼接数据返回
3.所以，<script>就可以获得跨域的数据，只要服务端愿意返回
三、跨域常用的实现方式？
1.JSONP
2.CORS-服务器设置 http header(后端写)
四、fetch的基本使用
五、cookie
1.本身用于浏览器和server 通讯
2.被“借用到本地存储来”
3.可用document.cookie='...'来修改
限制：
存储大小：最大只能存储4KB
http请求时需要发送到服务器，增加请求数据量
只能用document.cookie='...'来修改，太过简陋
六、localStorage 和 sessionStorage
HTML5专门为存储设计的，最大可寸5M
API简答易用，setItem.getItem
不会被http请求发送出去
区别：
localStorage 数据会永久存储，除非代码或手动删除
sessionStorage 数据只存在于当前会话，浏览器关闭则清空
七、三者存储的区别
| 特性 | Cookie | localStorage | sessionStorage |
|---|---|---|---|
| 存储大小 | 4KB 限制 | 5-10MB | 5-10MB |
| 有效期 | 可设置过期时间（会话或长期） | 永久存储（需手动清除） | 当前会话（窗口关闭即清除） |
| 数据传输 | 自动随 HTTP 请求发送到服务器 | 仅客户端存储 | 仅客户端存储 |
| 作用域 | 同源且可设置路径 /domain | 同源所有窗口共享 | 同源且同一窗口（标签页） |
| 典型场景 | 身份验证（如 JWT、session ID） | 长期缓存（如主题设置） | 临时数据（如表单进度） |
| 安全风险 | 易受 XSS、CSRF 攻击 | 仅 XSS（不参与请求） | 仅 XSS（不参与请求） |
| API 复杂度 | 手动解析字符串（复杂） | 简单的键值对操作 | 简单的键值对操作 |
高级提示：
- 性能优化：避免在 Cookie 中存储大量数据，减少 HTTP 请求体积。
- 安全最佳实践：
- Cookie 设置
HttpOnly防止 XSS，设置SameSite防止 CSRF。 - localStorage/sessionStorage 需注意敏感数据加密（如使用
CryptoJS）。
- Cookie 设置
- 兼容性：IE8+ 支持 localStorage/sessionStorage，Cookie 兼容性最优。
- 框架应用：Vue/React 项目中，推荐封装工具函数统一管理存储（如
useLocalStorageHook）。