AJAX&COOKIE

3.POST请求

var xhr = new XMLHttpRequest();
xhr.open('post', '路径', true);
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');  // 设置请求头
xhr.onreadystatechange = function () {
    if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
    }
}
xhr.send('参数');

4.ajax的封装

ajax(url, cb)

function ajax(url, cb) { // 请求接口 拿到数据 使用数据
    var xhr = new XMLHttpRequest();
    xhr.open('get', url, true);
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var data = xhr.responseText;
            cb(data);
        }
    }
    xhr.send();
}

ajax(path, data, successCB, dataType, type, beforeCB)

function ajax(path, data, successCB, dataType = 'json', type = 'get', beforeCB = null) {
    var param = '';
    for (var key in data) {
        param += `${key}=${data[key]}&`
    }
    param = param.substring(0, param.length - 1);
    var xhr = new XMLHttpRequest();
    if (type.toLowerCase() == 'get') {
        xhr.open(type, `${path}?${param}`, true);
        xhr.send();
    } else {
        xhr.open(type, path, true);
        xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
        xhr.send(param);
    }
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var data = xhr.responseText;
            if (dataType === 'json') {
                try {
                    data = JSON.parse(data);
                } catch (e) { }
            }
            successCB && successCB(data)
        } else {
            beforeCB && beforeCB();
        }
    }
}

ajax(options)

同上

5.cookie的概念

cookie，有时也用其复数形式cookies。类型为“小型文本文件”，是网站为了辨别用户身份进行跟踪且储存在用户本地终端上的数据（通常经过加密），由用户客户端计算机暂时或永久保存的信息，使用cookie的技术又被称为会话跟踪技术

6.cookie的初体验

点击页面，页面计数，当页面刷新后，计数仍然保留

var num = document.cookie || 0;
document.body.innerHTML = num;
document.onclick = function () {
    num++
    document.body.innerHTML = num;
    document.cookie = num;
}

7.cookie的主要内容

名称

cookie的名称是cookie的唯一标识，我们可以理解成存储在计算机里文件的名字，同一文件夹下，不能存在同名的文件，所以，同一路径下，cookie的名称具有唯一性

内容

cookie的内容就是所存储数据的内容，可以理解为文件的内容

域名

cookie的域名指的是cookie所能使用的域名，即文件存储的文件夹，一个域名会创建一个文件夹

路径

cookie文件所存放的子目录，不通目录之间的cookie不可相互访问

创建时间

cookie的创建时间，即本地文件创建并生成的时间

过期时间

cookie的过期时间，即本地文件被删除的时间

8.cookie的使用

cookie的创建

通过设置document下的cookie属性，可以创建cookie，name标识cookie的名称，content表示cookie的内容，path表示路径，当路径为根目录/时，当前域名下的所以目录文件都可以访问该cookie，expires为过期时间，具体代码如下

document.cookie = 'name=content;path=/;expires=' + new Date();

cookie的删除

根据cookie时间过期之后自动删除的特点，我们可以将指定的cookie时间设置为过期时间，页面重载之后即可删除cookie

document.cookie = 'name=content;path=/;expires=' + new Date(0);

cookie的修改

我们说cookie的名字时唯一的，所以根据特性，我们重写同名cookie即可覆盖原cookie，达到修改cookie的过程

cookie的获取

cookie存在document对象上，为字符串类型，获取cookie其实就是对字符串进行操作

var arr = document.cookie.split('; ');  // 第一步 拿到cookie字符串，通过; 分割得到数组


// 第二步  映射 得到JSON数据
arr = arr.map(function (item, index) {
    var temp = item.split('=');
    return {
        name: temp[0],
        content: temp[1]
    }

    // var [name, content] = item.split('=');  // ES6
    // return {
    //   name,
    //   content
    // }
});

// ES6
// arr = arr.map(item => ({
//   name: item.split('=')[0],
//   content: item.split('=')[1]
// }));

// 第三步 过滤得到需求的cookie对象
var res = arr.filter(function (item) {
    return item.name === '指定的cookie名称';
})[0];

// ES6
// var res = arr.filter(({ name }) => name === '指定的cookie名称')[0];

if (res) { // 第四步 判断是否存在，打印内容
    console.log(res.content)
}

9.cookie的总结

cookie的特点

1. 文件有大小限制：4KB
2. 数量限制：一般浏览器，限制大概在50条左右
3. 读取有域名限制：不可跨域读取，只能由来自写入cookie的同一域名的网页可进行读取。简单的讲就是，谁写的cookie，谁才有权利读取
4. 时效限制：每个cookie都有时效，最短的有效期是会话级别。就是当浏览器关闭，cookie会立即销毁。如果没有指定cookie的时效，那么默认的时效就是会话级别

cookie的缺点

1. cookie可能被禁用
2. cookie与浏览器相关联，不能跨浏览器访问
3. cookie可能被删除
4. cookie安全性不高

cookie注意点

1. cookie的名或者值中不能包含分号(、逗号(,)、等号(=)以及空格
2. cookie名唯一值，同名会被覆盖
3. 中文需要编码(encodeURIComponent)和解码(decodeURIComponent)
4. cookie用来存放不太重要的信息

10.cookie的封装

setCookie设置cookie

function setCookie(name, content, iDay = 7) {
    var date = new Date();
    var day = date.getDate();
    var hours = date.getHours();
    date.setHours(hours - 8);
    date.setDate(day + iDay);
    document.cookie = `${name}=${content};path=/;expires=${date}`;
}

removeCookie删除coookie

function removeCookie(name) {
    setCookie(name, '', -1);
}

getCookies获取cookie列表

function getCookies() {
    var list = document.cookie.split('; ');
    list = list.map(item => ({
        name: item.split('=')[0],
        content: item.split('=')[1]
    }));
    return list;
}

getCookie获取指定cookie

function getCookie(name) {
    var list = getCookies();
    var res = list.filter(item => item.name === name)[0];
    return res ? res.content : '';
}

11.storage

存储对象，可以将数据临时或者永久存在浏览器下

localStorage

生命周期到手动删除之前，绑定域名，可跨窗口访问，不能跨浏览器

• localStorage.setItem(key, value)：存储数据，key为键，value为值，只能存储字符串类型的数据
• localStorage.getItem(key)：获取到指定key的value值
• localStorage.removeItem(key)：删除指定key的存储数据
• localStorage.clear()：清除所有存储的数据

sessionStorage

生命周期到会话结束之前，绑定域名，不可跨窗口访问，不能跨浏览器

• sessionStorage.setItem(key, value)：存储数据，key为键，value为值，只能存储字符串类型的数据
• sessionStorage.getItem(key)：获取到指定key的value值
• sessionStorage.removeItem(key)：删除指定key的存储数据
• sessionStorage.clear()：清除所有存储的数据

12.用户登录状态

页面保留用户登录状态

作业：用封装的ajax完成用户模块，新增手机号字段