【学习打卡】第4天 构建前端知识体系 第四讲

课程名称：一天时间迅速准备前端面试 快速构建初级前端知识体系

课程章节：DOM and BOM

主讲老师：双越老师

课程内容：

今天学习内容包括：

1. JS-Web-API-Ajax

2. JavaScript-Web-API-存储
   

课程收获：

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 - 服务端错误

同源策略

• ajax 请求时，浏览器要求当前网页和 server 必须同源（安全）

• 同源：协议、域名、端口，三者必须一致

• 不同源 => 前端：http://a.com:8080/ ；server：https://b.com/api/xxx

跨域

• 所有的跨域，都必须经过 server 端允许和配合

• 未经 server 端允许就实现跨域，说明浏览器有漏洞、危险信号

cookie

• 本身用于浏览器和 server 通讯

• 被 “借用” 到本地存储来

• 可用 document.cookie = '...' 来修改

localStorage 和 sessionStorage 区别

• localStorage 数据会永久存储，除非手动删除

• sessionStorage 数据只存在于当前会话，浏览器关闭则清空

• 一般用 localStorage 会更多一些

cookie 和 localStorage sessionStorage 区别

• 容量：4KB VS 5MB

• API 易用性：不易用 VS 易用

• 是否随着 http 请求发送出去：发送 VS 不发送

课程学习截图：