HTTP与Ajax

史添祺
150 阅读5分钟

一、前后端数据交互

1-1. 初识前后端通信

1. 前后端通信是什么

前端和后端数据交互的过程
浏览器和服务器之间数据交互的过程

2. 后端向前端发送数据

访问页面

3. 前端向后端发送数据

用户注册

1-2. 前后端通信的过程与概念解释

1. 前后端通信的过程

前后端的通信是在'请求-响应'中完成的 image.png

2. 概念解释

前端：浏览器端
客户端：只要能和服务器通信的就叫客户端
命令行工具
curl https:www.imooc.com
后端：服务器端

1-3. 前后端的通信

1. 使用浏览器访问网页


在浏览器地址栏输入网址，按下回车

2.HTML的标签


浏览器在解析HTML标签的时候，遇到一些特殊的标签，会再次向服务器发起请求
link/img/script/iframe
还有一些标签，浏览器解析的时候，不会向服务器发送请求，但是用户可以使用他们向服务器发送请求
a/form

3. Ajax和Fetch

二、HTTP协议

2-1. 初识HTTP

1.HTTP是什么


HyperText Transfer Protocol
超文本传输协议
超文本：原本一个个单一的文本，通过超链接将其联系起来。由原先的单一的文本变成了可无限延伸、扩展的超级文本、立体文本


HTML、JS、CSS、图片、字体、音频、视频等等文件，都是通过HTTP（超文本传输协议）在服务器和浏览器之间传输


每一次前后端通信，前端需要主动向后端发出请求，后端接收到前端的请求后，可以给出响应
HTTP是一个请求-响应协议

2. HTTP请求响应的过程


www.imooc.com

image.png

2-2 HTTP报文

1. HTTP报文是什么


浏览器向服务器发送请求时，请求本身就是信息，叫请求报文
服务器向浏览器发送响应时传输的信息，叫响应报文

2. HTTP报文格式


请求
请求头：起始行+首部
请求体


GET请求，没有请求体，数据通过请求头携带
POST请求，有请求体，数据通过请求体携带


响应
响应头：起始行+首部
响应体

image.png

2-3 HTTP方法

1. 常用的HTTP方法

浏览器发送请求时采用的方法，和响应无关


GET、POST、DELETE


用来定义对于资源采取什么样的操作的，有各自的语义

2. HTTP方法的语义

GET获取数据
获取资源（文件）


POST创建数据
注册


PUT更新数据
修改个人信息，修改密码


DELETE删除数据
删除一条评论


增删改查


这些方法虽然有各自的语义，但是并不是强制性的

3. RESTful接口设计

一种接口设计风格，充分利用HTTP方法的语义


通过用户ID获取个人信息，使用GET方法
www.imooc.com/api/http/ge…


注册新用户，使用POST方法
www.imooc.com/api/http/ad…


修改一个用户，使用POST方法
www.imooc.com/api/http/mo…


删除一个用户，使用POST方法
www.imooc.com/api/http/de…

2-4 GET和POST方法的对比

1. 语义

GET：获取数据
POST：创建数据

2. 发送数据

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


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


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

3. 缓存

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

4. 安全性

GET和POST都不安全


发送密码或其他敏感信息时不要使用GET。主要是避免直接被他人窥屏或通过历史记录找到你的密码

2-5 HTTP状态码

1. HTTP状态码是什么

定义服务器对请求的处理结果，是服务器返回的

2、HTTP状态码的语义

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

  • 200~299 成功
    200

  • 300~399 重定向
    www.imooc.com/
    www.imooc.com/


    301 Moved Permanently(永久性跳转)
    302 Move Temporarily(临时性跳转)


    304 Not Modified

  • 400~499 请求错误
    400 Not Found

  • 500~599 服务器错误
    500 Internal Server Error

三、Cookie

3-1 初识Cookie

1. Cookie是什么

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

2. Cookie有什么用

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

3.在浏览器中操作Cookie

不要在Cookie中保存密码等敏感信息

3-2 Cookie的基本用法

1. 写入Cookie

 document.cookie = 'username=zs';
 document.cookie = 'username=age=18'；
 
 //不能一起设置，只能一个一个设置
 //document.cookie = 'username=zs;age=18';

2. 读取Cookie

console.log(document.cookie);

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

3-3 Cookie的属性1

1. Cookie的名称(Name)和值(Value)

最重要的两个属性，创建Cookie时必须填写，其他属性可以使用默认值


Cookie的名称或值如果包含非英文字母，则写入时需要使用encodeURIComponent()编码，读取时使用decodeURIComponent()编码
document.cookie = 'username=alex';

        document.cookie = 'username=alex'

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

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

2. 失效(到期)时间

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

document.cookie = 'username=alex';

        //想长时间存在，设置 Expires 或 Max-Age
        //Date()
        document.cookie = `username=alex;expires=${new Date('2100-1-01 00:00:00')}`;


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

        document.cookie = `username=alex;max-age=${24 * 3600 *30}`

        //如果max-age的值是0或负数，则Cookie会被删除
avatar
文章
阅读
粉丝