• 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 

     

    --------小尾巴 ________一个人欣赏-最后一朵颜色的消逝-忠诚于我的是·一颗叫做野的心.决不受人奴役.怒火中生的那一刻·终将结束...
  • 相关阅读:
    杭电 2546 饭卡 (01背包问题)
    杭电2602 Bone Collector
    01背包问题的详细概述
    杭电1003 最大子串(第二次AC) 当作DP的训练吧
    杭电1087 Super Jumping! Jumping! Jumping!(初见DP)
    Virtualenv虚拟环境的创建、激活、及退出
    修改maven本地仓库路径
    PPT如何去除背景音乐(史上最全方案)
    NVIDIA显卡驱动安装步骤
    Python之NumPy(axis=0 与axis=1)区分
  • 原文地址:https://www.cnblogs.com/tianxiaxuange/p/10201858.html
Copyright © 2020-2023  润新知