JavaScript-Cookie封装&AJax&JSON

封装Cookie

需要三个值：Cookie名称、Cookie值、存储时间

封装三个函数

setCookie()——创建Cookie

getCookie()——获取Cookie

removeCookie()——删除Cookie

☆想要删除成功只能把天数向前设置设置负数的小时和分钟不能实现删除cookie

创建cookie

1、创建一个函数 setCookie（传参cookie名，cookie值，存储时间）

2、定义一个变量获取当前时间

3、设置日期（当前时间+1天）

4、打印cookie = 拼接 cookie名+‘=’+cookie值+存储时间

获取cookie

1、定义一个函数getCookie 传参(name)

2、定义一个变量通过split 把字符串分割成字符串数组

3、for循环把下标和字符串数组结合形成一个用=分隔的新数组 arr2

4、if判断如果新数组下标[0]==name 则返回对应的下标为[1]的值

删除cookie

1、定义一个函数removeCookie（传参name）

2、创建cookie（name，1，-1）

二、Ajax

Ajax概念

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术

（之前是通过form表单提交数据的但是提交之后会造成整个页面的重新加载）

创建Ajax的步骤

1、创建Ajax对象

var Ajax = new XMLHttpRequest()

2、连接到服务器

open(方法，文件名，同步异步)

参数一：post/get

参数二：请求的文件名路径

参数三：同步（false）异步（true）

oAjax.open("GET","abc.txt",true);

3、发送请求

send()

示例：oAjax.send();

4、接收返回值

oajax.onreadystatechange=function(){

if (oAjax.readyState==4 && oAjax.status==200){

alert("请求成功"+oAjax.responseText);

}

responseText

示例：oAjax.responseText;--接收返回值

结果展示：

细节批注：

三、post和get区别

1、缓存：get可以被缓存 post不可以被缓存

2、历史：参数保留在浏览历史记录中 post不会保存

3,、对数据长度的限制：get最多2048个字符 post 没有限制

4、对数据类型的限制：get只允许ASCII字符 post 没有限制也允许二进制数据

5、安全性： get安全性差所发数据是URL的一部分 post 有加密参数不会被保存在浏览器历史或Web服务器中

6、可见性：数据在URL中对所有人都是可见的 post 数据不会显示在URL中

四、同步异步区别

同步交互：指发送一个请求，需要等待返回，然后才能够发送下一个请求，有个等待过程

异步交互：指发送一个请求，不需要等待返回，随时可以再发送下一个请求，即不需要等待

五、请求状态码

获取请求状态码：oAjax.readyState

从 0 到 4 发生变化

0: 请求未初始化（还没有调用到open方法）

1: 服务器连接已建立（已调用send方法，正在发生请求）

2: 请求已接收（send方法完成，已接收到全部响应内容）

3: 请求处理中（解析响应内容）

4：请求成功

六、状态

获取状态：oAjax.status

200："OK"

404：未找到页面当请求路径发生错误状态会出现404 表示找不到页面

七、JSON

JSON概念

JSON是一种轻量级的数据交换格式，它基于 ECMAScript（JS底层逻辑）的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据

JSON 语法规则

数据在键值对中

数据由逗号分隔

花括号保存对象

中括号保存数组

JSON 名称/值对

JSON 数据的书写格式是：键值对

JSON里面所有的名称一定要使用双引号进行包裹单引号不行

示例："name" : "张三"

JSON 值

支持类型：数字、字符串、逻辑值、数组、对象、null

实现用AJAX获取JSON里的内容

第一种创建节点插入父元素方式

1、创建一个JSON

2、AJAX内容

3、点击页面按钮显示内容

一直点击可以一直获取

第二种方式使用字符串拼接结合innerHTML覆盖到ul里