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