5.HTTP协议、存储、Ajax

 一、前端数据交互与HTTP协议

1.前后端通行是什么：

（1）前端和后端数据交互的过程，也可以看做是浏览器与服务器之间数据交互的过程。

2.HTML标签

（1）浏览器在解析HTML标签的时候，遇到一些特殊的标签，会再次向服务器发送请求：

link/img/script/iframe

（2）还有一些标签，浏览器在解析的时候，不会向服务器发送请求，但是用户可以使用他们向服务器发送请求：

a/form

3.HTTP协议

（1）HTTP报文：浏览器向服务器发送请求时，请求本身就是信息，交请求报文。，服务器想你浏览器发送响应时传述==传输的信息，叫响应报文。

（2）HTTP报文格式：

请求分为请求头（起始行＋首部）和请求体，响应分为响应头（起始行＋首部）和响应体。

get请求没有请求体，数据通过请求头携带；post请求有请求体，数据通过请求体携带。

（3）HTTP方法：浏览器发送请求时采用的方法，和响应无关。（GET、POST、PUT、DELETE）

（4）RESTful接口设计：一种接口设计风格，充分利用HTTP方法的语义。

4.GET和POST对比（获取和发送数据）

（1）发送数据：

GET通过地址在请求头中携带数据，能携带的数据量和地址的和长度有关系，一般最多就几K。

POST既可以通过地址在请求头中携带数据，也可以通过请求体携带数据，能携带的数据量理论上是无限的。

携带少量的数据可以使用GET请求，大量的数据可以使用POST请求。

（2）缓存：

GET可以被缓存，POST不会被缓存。

（3）安全性：GET和POST都不安全；发送密码或其他敏感信息时不要使用GET，主要是避免直接被他人窥屏或通过历史记录找到你的密码。

5.HTTP状态码

（1）HTTP状态码是什么：定义服务器对请求的处理结果，是服务器返回的。

（2）HTTP状态码的语义：

100~199消息：代表请求已被接受，需要继续处理。

200~299：200成功。

300~399：重定向

400~499：请求错误。

500~599：服务器错误。

二、本地存储

1.Cookie:

（1）Cookie是什么：全称是HTTP Cookie，简称Cookie，是浏览器存储数据的一种方式，因为存储在用户本地，而不是存储在服务器上，是本地存储，一般会自动随着浏览器每次请求发送到服务器端。

（2）Cookie作用：利用Cookie跟踪统计用户访问该网站的习惯，比如什么时间访问，访问了哪些页面，在每个页面的停留时间等。

（3）在浏览器中操作Cookie：不要在Cookie中保存密码等敏感信息。

（4）写入Cookie 

document.cookie='username=za'
//不能一起设置，只能一个一个设置

（5）读取Cookie

读取的是一个由名值对构成的字符串，每个名值对之间由" ;"(一个分号和一个空格)隔开。

2.Cookie的属性

（1）Cookie的名称（name）和值（value）:最重要的两个属性，创建Cookie时必须填写，其他属性可以使用默认值；Cookie的名称或值如果包含非英文字母，则写入时需要使用encodeURIComponent()编码，读取时使用decodeURIComponent()解码。

document.cookie=`username=${encodeURIComponent('张三')}`
document.cookie=`${encodeURIComponent('用户名')}=${encodeURIComponent('张三')}`

//一般名称使用英文，不要用中文，值可以用中文，但是要编码。

（2）失效（到期）时间：对于失效的Cookie，会被浏览器清除，如果没有设置失效（到期）时间，这样的Cookie称为会话Cookie，它存在内存中中，当会话结束，也就是浏览器关闭，Cookie消失。

a.向长时间存在，设置Expires或Max-Age：

//expires
//值为Date类型
document.cookie=`username=alex; expires=${new Date('2100-01-01 00:00:')}`

//max-age
//值为数字，表示当前时间+多少秒后过期，单位是秒。
document.cookie=`username=alex; max-age=5`

//如果max-age的值是0或为负数，则cookie汇报删除。

（3）Domain域：domain限定了访问Cookie的范围。

//使用JS只能读写当前域或父域的Cookie，无法读写其它域的Cookie
document.cookie=`username=alex; domain=www.imooc.com`

（4）Path路径：Path限定了访问Cookie的范围（同一个域名下）

//使用JS只能读写当前路径和上级路径的Cookie，无法读写下级路径的Cookie
document.cookie=`username=alex; path=/course/list`

当Name、Domain、Path这3个字段都相同的时候，才是同一个Cookie。

（5）HttpOnly：设置了HTTPOnly属性的Cookie不能通过JS去访问。

（6）Secure安全标志：Secure限定了只有在使用https而不是http的情况下才可以发送给服务端。

3.Cookie的封装 

4.Cookie的注意事项

（1）前后端都可以创建Cookie

（2）Cookie有数量限制：每个域名下的Cookie数量有限，当超过单个域名限制之后，再设置Cookie，浏览器会清除以前设置的Cookie。

（3）Cookie有大小限制：每个Cookie的存储容量很小，最多只有4KB左右。

5.localStorage 

（1）localStorage：是一种浏览器存储数据的方式（本地存储），它只是存储在本地，不会发送到服务器端；单个域名下的localStorage总大小有限制。

（2）localStorage的基本用法：

localStorage.setItem("username","alex");
//获取不存在的返回null
localStorage.getItem("username");
//删除不存在的key，不报错
localStorage.removeItem("username");
localStorage.clear();

（3）使用localStorage实现自动填充逻辑： 

6.localStorage注意事项 

（1）localStorage的存储期限：localStorage是持久化的本地存储，除非手动清除（比如通过js删除，或者清除浏览器缓存），否则数据永远不会过期的。

（2）localStorage键和值的类型：localStorage存储的键和值只能是字符串类型，不是字符串类型，也会先转化成字符串类型再存进去。

（3）不同域名下不能共用localStorage。

（4）localStorage的兼容性：IE7及以下版本不支持localStorage，IE8支持。

7.sessionStorage

（1）sessionStorage的存储期限：当会话结束（比如关闭浏览器）的时候，sessionStorage中的数据会被清空。

（2）sessionStorage的基本用法：

sessionStorage.setItem("username","alex");
sessionStorage.getItem("username");
sessionStorage.removeItem("username");
sessionStorage.clear();

三、Ajax&Fetch与跨域请求

1.Ajax

（1）Ajax是什么：是Asynchronous JavaScript and XML （异步JavaScript和XML）的简写；Ajax其实是浏览器与服务器之间的一种异步通信方式；使用Ajax可以在不重新加载整个页面的情况下，对页面的某部分进行更新。

Ajax中的异步：可以异步地向服务器发送请求，在等待响应的过程中，不会阻塞当前页面，浏览器可以做自己的事，直到成功获取响应后，浏览器才开始处理响应数据。

（2）XML（可扩展标记语言）是前后端数据通信时传输数据的一种格式；XML现在已经不怎么用了，现在比较常用的是JSON。

（3）搭建Ajax开发环境：Ajax需要服务器环境，非服务器环境下，很多浏览器无法正常使用Ajax。

2.Ajax的基本用法 

（1）XMLHttpRequest：Ajax想要实现浏览器与服务器之间的异步通信，需要依靠XMLHttpRequest，它是一个构造函数。

（2）Ajax的使用步骤：

a.创建xhr对象：

const xhr =new XMLHttpRequest();

b.准备发送请求：

xhr.open('GET',url,true);
//open()有三个参数：
//1.'HTTP方法：GET、PUT、POST、DELETE、'
//2.地址URL（本地或远程地址）
//3.是否异步（true）)；


//调用open并不会真正发送请求,而只是做好发送请求前的准备工作

c.发送请求：调用send()正式发送请求，send()的参数是通过请求体携带的数据。

d.监听事件，处理响应：当获取到响应后，会触发xhr对象的readystatechange事件，可以在该事件中对响应进行处理。当状态码等于4时，只能表示传输过程没有问题，但不能表示服务器端没有问题，因此要对HTTP状态进行判断。（304：表示从缓存中）

xhr.onreadystatechange=()=>{
            if(xhr.readyState!==4) return;
            //获取到响应后，响应的内容会自动填充xhr对象的属性
            //xhr.status:HTTP 200 404
            //xhr.statusText:HTTP状态说明 OK NOT Found
            if ((xhr.status>=200)&(xhr.status<300)||xhr.status ===304){
                console.log('正常使用响应数据')
            }
        };

e.readystatechange事件监听readystate这个状态的变化。它的值从0~4一共5个状态:

        0：未初始化。尚未调用open()

        1:启动。已经调用open()，但尚未调用send()

        2:发送。已经调用send()，但尚未接收到响应。

        3:接收。已经接收到部分响应数据。

        4:完成。已经接收到全部响应数据，而且已经可以在浏览器中使用了。

g.readystatechange事件也可以配合addEventListener使用，不过要注意，IE6~IE8不支持addEventListener；为了兼容性，readystatechange中不使用this，而是直接使用xhr；由于兼容性的原因，readystatechange事件最好放在open之前。

3.GET请求：

（1）携带数据：GET请求不能通过请求体携带数据，但是可以通过请求头携带。

（2）数据编码： 如果携带的数据是非英文字母的话，比如说汉字，就需要编码之后再发送给后端，不然会造成乱码问题，可以使用encodeURLComponent()编码。

4.POST请求： 

（1）携带数据：POST请求主要通过请求体携带数据，同时也可以通过请求头携带；如果想发送数据，直接写在send()的参数位置，一般是字符串。

xhr.send('username=alex&age=18')
//不能直接传递对象，需要先将对象转换成字符串的形式。

（2）数据编码：

xhr.send(`username=${encodeURLComponent('张三')}&age=18}`)

5.JSON ： 

Ajax发送和接收数据的一种格式，全称是JavaScript Object Notation。

（1）为什么需要JSON：JSON有三种形式，每种形式的写法都和JS中的数据类型很像，可以轻松的和JS中的数据类型互相转换。

（2）JSON的三种形式：

a.简单形式：JSON的简单值形式就对应着JS中的基础数据类型（数字、字符串、布尔值、null）。

注意事项：JSON中没有undefined值。

                  JSON中的字符串必须使用双引号。

                  JSON中是不能注释的。

b.对象形式：JSON的对象形式就对应着JS中的对象。

{
    "name":"张三"，
    "age":18,
    "hobby":["足球","篮球"]
}

注意事项：JSON中对象的属性名必须使用双引号，属性值如果是字符串也必须使用双引号。

                  JSON中只要涉及到字符串就必须要使用双引号。

                  不支持undefined

c.数组形式：JSON的数组对应JS中的数组。

[
    {
        "id":1,
        "username":"zhangsan",
        "comment":"666"
    },
    {
        "id":2,
        "username":"lisi",
        "comment":"999"
    }
]

​

6.JSON的常用方法

（1）JSON.parse():将JSON格式的字符串解析成JS中的对应值；一定要是合法的JSON字符串，否则会报错。

（2）JSON.stringify():将JS的基本数据类型、对象或者数组转换成JSON格式的字符串。

（3）使用JSON.parse()和JSON.stringify()封装

7.跨域

（1）跨域是什么：向一个域发送请求，如果要请求的域和当前域是不同域，就叫跨域。

（2）什么是同域什么是不同域：协议、域名、端口号，任何一个不一样就是不同域，与路径无关，路径不一样无所谓。

https(协议)://wwww.imooc.com(域名):443(端口号)/course/list(路径)

（3）跨域请求为什么会被阻止：阻止跨域请求，其实是浏览器本身的一种安全策略--同源策略；其他客户端或者服务器都不存在跨域被阻止的问题。

（4）跨域解决方案：①CORS跨域资源共享②JSONP

注意：优先使用CORS跨域资源共享，如果浏览器不支持CORS的话，再使用JSONP

（5）CORS：跨域资源共享

①Access-Control-Allow-Origin:*;表明允许所有的域名来跨域请求他，*是通配符，没有任何限制。

②只允许指定域名的跨域请求：Access-Control-Allow-Origin:https://127.0.0.1:5500（指定域名）。

（6）使用CORS的跨域过程：

①浏览器发送请求

②后端在响应中添加Access-Control-Allow-Origin头信息

③浏览器接收到响应

④如果是同域下的请求，浏览器不会额外做什么，这次前后端通信就圆满完成了。

⑤如果是跨域请求，浏览器会从响应头中查找是否允许跨域访问。

⑥如果允许跨域，通信圆满完成。

⑦如果没找到或不包含想要跨域的域名，就丢弃响应结果。

（7）CORS的兼容性：IE10及以上版本的浏览器可以正常使用CORS。

（8）JSONP：script标签跨域不会被浏览器阻止，JSONP主要就是利用script标签，加载跨域文件。

（9）使用JSONP实现跨域：服务器端准备好JSONP接口

8.XHR的属性 

（1）responseType和response属性：responseText只能在没有设置responseType或者responseType='',或'text'的时候才能使用。

（2）timeout属性：设置请求的超时时间（单位ms）【IE6~IE7不支持，IE8开始支持】

xhr.open('GET',url,true);
xhr.timeout=10;
xhr.send(null)

（3）withCredentials属性：指定使用Ajax发送请求时是否携带Cookie

9.XHR的方法 

（1）abort()：阻止当前请求。

（2）setRequestHeader()：可以设置请求头信息;两种请求方式。

setRequestHeader(头部字段的名称，头部字段的值)
//请求中的Content-Type字段用来告诉服务器，浏览器发送的数据是什么格式的

//一
xhr.setRequestHeader('Content-Type','application/x-wwww-form-urlencoded')
xhr.send('username=alex&age=18')

//二
xhr.setRequestHeader('Content-Type','application/json')
xhr.send(
    JSON.stringify(
        {
            username:'alex',
            age:18
        }
    )
)

10.XHR的事件 

（1）load事件：响应数据可用时触发(不用再判断状态码是否为4)，在监听事件时前面加on，IE6~8不支持。

xhr.addEventListener(
            'load',
            ()=>{
                if ((xhr.status>=200)&(xhr.status<300)||xhr.status ===304){
                console.log(xhr.responseText);
            }
            },false
        )


//load配合addEventListener一起使用，他们都是从IE9开始支持。

（2）error事件：请求发生错误时触发。

（3）abort事件：调用abort()终止请求时触发。IE10开始支持

（4）timeout事件：请求超时时触发

11.FormData 

（1）使用Ajax提交表单

（2）FormData的基本用法：

//通过html表单元素创建FormData对象
const fd =new FormData(login)
xhr.send(fd)

//还可以通过append()方法添加其他数据

12.封装Ajax