前后端通信&HTTP

前端（浏览器）和后端（服务器）数据交互的过程;
客户端:相对于服务器，能和服务器通信的都叫客户端，例如：浏览器、命令行工具
命令行 curl https://www.imooc.com/

过程

浏览器主动向服务器发送请求，服务器对浏览器做出响应
后向前，例如刷新网页，后端就会发送
前向后，例如注册页面

方式

浏览器访问网页

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

HTMl标签

1)浏览器解析HTMl标签时，遇到特殊标签，会再次向服务器发送请求；
特殊标签:link/img/script/iframe
JSONP跨域原理：遇到script标签会再次向服务器发送请求；
2)另有部分标签，解析时不会向服务器发送请求，用户可使用他们向服务器发送请求，例如a/form
同一个域名下，可最多发送6个请求
提高效率，例如：并发多个域名的请求，精灵图

Ajax&Fetch

HTTP-超文本传输协议

HTTP :HyperText Transfer Protocol
HTML: HyperText Markup Language
超文本：单一文本通过超链接联系起来，变成可无限延申、扩展的超级文本、立体文本

作用

通过HTTP，HTML、CSS、JS、图片、字体、音视频等在服务器和浏览器间传输

过程

输入网址查询IP，和服务器建立TCP链接；
若IP已被访问过，浏览器会存储，在浏览器IP就能查询到；
若IP未被访问过，则在DNS（域名解析服务器）中查询，速度慢

缓存分类：
内存缓存＆硬盘缓存

报文

请求报文：浏览器向服务器发送请求，请求时传输的信息，叫～
响应报文：服务器向浏览器发送响应，响应时传输的信息，叫～

格式

长链接＆短链接
用户代理

方法

增删改查

GET 、POST、DELETE、PUT使用时语义合理更好，但不强制

无	get	post
有无请求体	无	有
携带数据方式	请求头	请求头、请求体
能携带的数据量	与地址长度有关最多几K	无限（理论上）
是否可缓存	可缓存，因地址会被缓存	不会缓存
安全性	网址可见	控制台里可见

发送密码等敏感信息时不要使用GET，避免直接窥屏或通过历史记录查到密码

RESTful

属于后端
一种接口设计方式-充分利用HTTP的4种方法语义

未按照RESTful接口设计

1)通过ID获取个人信息－GET方法
https://www.imooc.com/api/http/getUser?id=1
2) 注册新用户－POST方法
https://www.imooc.com/api/http/addUser
3)修改用户－POST方法
https://www.imooc.com/api/http/modifyUser
4) 删除用户－POST方法
https://www.imooc.com/api/http/deleteUser

按照RESTful接口设计后

1)通过ID获取个人信息－GET方法
https://www.imooc.com/api/http/user?id=1
2) 注册新用户－POST方法
https://www.imooc.com/api/http/user
3)修改用户－PUT方法
https://www.imooc.com/api/http/user
4) 删除用户－DELETE方法
https://www.imooc.com/api/http/user

HTTP Status Code

表明服务器对请求的处理结果

状态码	结果
100~199	请求被接受，继续处理（websocket）
200~299	成功
300~399	重定向
400~499	请求错误
500~599	服务器错误

301 Moved Permanently
永久性缓存在用户本地
慎用万一定向需要改变，无法清空用户的缓存
302 Moved Temporarily
304 Not Modified，文件没有过期，能用

404 Not Found
500 Internal Server Error

重定向情况：协议从http升级到https
用http://www.imooc.com访问，会跳到https://www.imooc.com