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

时间:2023-12-21 09:32:38

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