5.27cookie的封装和ajax

Posted 2020-12-06 上帝是女孩23333

# 一、cookie
1. cookie的使用
    - 增
        - 默认cookie：当前路径下，会话级cookie
        - 指定路径
        - 指定有效期
        - 既指定路径，有指定有效期
        ```js
        var d = new Date();
        d.setDate(d.getDate() + 3);
        document.cookie = "sex=1;path=/;expires=" + d;
        ```
    - 改
        - 改值
        - 改有效期
        - 类似于设置，重新设置，相同的名字，不同的值或配置信息
    - 删
        - 主动过期，将有效期设置为过去的日期，建议至少过期1天
        - 注意路径
        - 子可以删父，父也可以删子(但无法查看)
    - 查
        - 默认查询所有
            - document.cookie
        - 查询单个
            - 字符串的解析操作

2. cookie的封装
    - setCookie();
    - removeCookie();
    - getCookie();

    - 注意默认参数的处理，注意默认值的处理，注意字符串的处理

3. cookie的应用
    - 直接应用不多，localStorage替换了
    - 被封装后的应用，挺多
        - 记住登录状态，不是记住账号密码
            - 登录状态是个什么值，token是后端随机生成的，存到cookie
    - 会话级信息，选择sessionStorage
    - 永久级信息，选择localStorage
    - 指定有效期的信息，选择cookie
    - 当前信息需要跟随http发给服务器，选择cookie
    - 不需要发往服务器，按需选择localStorage或sessionStorage

# 二、异步和同步
- javascript这个脚本语言的特点
1. 异步
    - 同时执行
    - 计时器         ******   
    - 循环中的事件
    - ajax          ******

2. 同步
    - 逐步执行
    - alert(1)
    - alert(2)
    - alert(3)

3. 程序，进程，线程
    - 程序：一个功能
    - 进程：一个程序从开始执行到执行结束
    - 线程：一个程序在一次执行进程中，开启的每个分支，称为线程
    - js是单线程的编程语言，使用异步模拟了多线程的执行

# 三、ajax
- ajax用来请求后端数据的，用到ajax就要有后端数据，就要有后端，最好将ajax也放在服务器环境中使用
1. ajax的概念和特点
    - 前后端交互的重要手段
        - a：异步
        - j：js
        - a：和
        - x：服务端的数据，xml，json，记事本，html，文本文件数据.....
    - 异步的js和服务端的数据
    - 不是一个技术，一组技术的合集
        - 载体：连接前后端的桥梁：XHR对象（XMLHttpRequest）
        - 异步的js：事件，不是鼠标键盘事件，XML对象身上的加载事件
        - 服务器端的数据
        - 其他js：数据的处理的js功能
    - 无刷新加载新数据
        - 在不中断浏览器其他任务的情况下，加载数据
        - 局部刷新
        - 提升页面的加载速度
        - 因为页面没有刷新，所以不会产生历史记录，破坏了浏览器的前进后退功能
        - 不利于SEO

2. ajax的使用

3. ajax的get请求的缓存问题
    - 强制刷新
    - 手动删除缓存
    - 绕过浏览器的缓存
        - 为什么会缓存
            - 节省每次打开重复资源的时间
        - 什么情况下会使用缓存中的数据
            - 重复资源
            - 同样的地址
        - 如果每次请求的地址都不一样，那么就不会使用缓存中的数据
            - 如何让地址不一样
    - 利用url拼接时间戳，实现每次请求都是不一样的地址，欺骗浏览器缓存
    - 按需解决

function ajaxGet(url, cb, data={}){
    var str = "";
    for(var i in data){
        str += `&${i}=${data[i]}`;
    }
    var d = new Date();
    url = url + "?__qft=" + d.getTime() + str;
    var xhr = new XMLHttpRequest();
    xhr.open("get",url,true);
    xhr.send();
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4 && xhr.status === 200){
            cb(xhr.responseText);
        }
    }
}

 

# 注意：cookie会随着http协议发送到服务器，所以，cookie最好处于服务器环境使用