11. cookie_session_原生ajax_readyState的值_同源策略_跨域_jsonp的使用

1. cookie

浏览器存储技术。（服务器将少量数据交于浏览器存储管理）

作用： 存储数据, 解决 http 协议无状态问题

工作流程：

浏览器发送请求给服务器，请求登录

服务器返回响应给浏览器，此时携带了cookie（其中包含着当前用户的唯一标识）

浏览器接受到响应中cookie，得保存下来

浏览器下一次发送请求时，会自动携带上cookie，

服务器接受到请求，解析cookie，从而判断是哪个用户发送的请求（解决http协议无状态问题）

服务器端的使用：

设置 cookie        res.cookie(key, value, options)

获取 cookie        引入第三方中间件解析 cookie-parser        req.cookies

清除浏览器 cookie        res.clearCookie(key)

前端使用：

document.cookie        读写二合一

清除        document.cookie = 'hello=123;expires=' + new Date(Date.now() - 1000);

特点：

cookie 数量有限制，同一个域名下大约 20 个左右（不同浏览器不一样）

cookie 大小有限制，每一个 cookie 最大值大约 4kb 左右（不同浏览器不一样）

2. session

也是一种解决 http 协议无状态问题的方案

不同的是：

session 存储位置是服务器

存储大小近乎无限

传输流量更小（只产生一个cookie）

3. 请写出原生 ajax

① 创建xhr对象

② 绑定事件监听

onreadystatechange  会监听 readyState 值的变化，一旦发生变化，就会触发当前事件

③ 设置请求信息

xhr.open(请求方式, 请求地址)        （get 请求参数在这写, 以 查询字符串 的方式）

④ 发送请求

xhr.send(body);        （post 请求参数写在这儿，以 请求体参数 的方式）

问题：

chrome 和 firefox： 第二次 get 请求默认走协商缓存，状态码 304，还是会向服务器发送请求

ie：第二次 get 请求默认走强制缓存，状态码 200，不会向服务器发请求

解决：让每一次请求不一样，只要请求不一样，就不会走缓存

4. 谈谈readyState的值

0： xhr 对象创建成功，但是 xhr.open()  方法还未调用

1： xhr.open() 方法已经调用了，但是还未调用 xhr.send() 方法（意味着还没有发送请求，还可以设置请求头信息）

2： xhr.send() 方法已经调用了，接受到了部分响应数据（响应首行和响应头）

3： 接受了响应体数据（如果响应体数据较小或者是纯文本，在此阶段就全部接受完了）

4： 接受了全部响应体数据（数据较大或者音视频资源等）

5. 跨域

同源： 协议、域名、端口号 必须完全相同

同源策略 (Same-Origin Policy) 最早由 Netscape 公司提出，是浏览器的一种安全策略

违背同源策略就是跨域

解决最终原理：绕过浏览器的 ajax 引擎就 ok，所以后面还有服务器代理模式、Nginx 反向代理等方案

解决方案：

• jsonp

利用 script 标签能够跨域的特性解决跨域的

只能发送 get 请求, 兼容性好

步骤：

① 创建 script 标签

② 设置响应成功的回调函数

③ 设置 script 的src 属性

④ 将 script 添加到页面中生效

⑤ 服务器必须响应 callback(data) 格式数据

• cors