5.27cookie的封装和ajax

春雨的雕刻时光 2020-05-27

# 一、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最好处于服务器环境使用

相关推荐

mmywcoco / 0评论 2020-06-06