建立网站需要分几部进行,网站建设合同性质,注册公司需要什么条件才能开,厦门蓝典网站建设http协议—常见状态码#xff0c;请求方法#xff0c;http头部#xff0c;http缓存一、http状态码1、引例阐述2、状态码分类3、常见状态码4、关于协议和规范二、http 方法1、传统的methods2、现在的methods3、Restful API#xff08;1#xff09;Restful API是什么#x…
http协议—常见状态码请求方法http头部http缓存一、http状态码1、引例阐述2、状态码分类3、常见状态码4、关于协议和规范二、http 方法1、传统的methods2、现在的methods3、Restful API1Restful API是什么2如何设计成一个资源三、http 头部http headers1、常见的Request headers2、常见的Response headers四、http 缓存1、关于缓存的介绍1什么是缓存2为什么需要缓存3哪些资源可以被缓存——静态资源js、css、img2、http 缓存策略强制缓存 协商缓存1强制缓存1强制缓存是什么2图例3Cache-Control4关于Expires2协商缓存3、刷新操作方式对缓存的影响1正常操作2手动刷新3强制刷新五、写在最后http 对于一个前端工程师来说是非常需要了解的一个知识点贯穿于整个前端开发的过程。如果说一个前端工程师不知道 http 或者说是了解甚少那他肯定不是一个合格的工程师。那么http 对于去前端来说有什么用呢
前端工程师在开发界面时需要用到 http 协议前端在调用后端的接口时提交(post)或者获取(get)数据时需要用到 http 协议……
下面将从多个方面讲解 http 协议。
一、http状态码
1、引例阐述
在讲状态吗之前我们先来了解什么是状态码。比如百度网站 大家可以看到上图中圈红圈的部分就是 http 的状态码常见的状态码有200,400,404等等。接下来对状态码的一些基础知识进行介绍。
2、状态码分类
下表给出状态码分类。
状态码含义解释说明1xx服务器收到请求收到1xx开头的请求表示服务端已经收到请求但是还没有返回信息给客户端2xx请求成功如200表示客户端已经成功请求数据3xx重定向如302客户端收到3xx开头的状态码时表示此时服务端已经不再管客户端所请求地址让客户端去请求另外的地址4xx客户端错误404表示当客户端请求了一个服务端完全不认识的地址时就会报出4xx的错误5xx服务端错误如500表示此错误来源于服务端比如服务端写的接口出现了bug等问题
3、常见状态码
常见的有200正常 、404无法找到该网页资源 、304跳转页面 、500服务器错误等具体如下
状态码含义用途200OK 成功一般用于 GET 和 POST 请求301Redirect Permanently 永久重定向配合location浏览器自动处理302Found 临时重定向配合location浏览器自动处理304Not Modified 资源未被修改所请求的资源未修改服务器返回此状态码时不会返回任何资源。客户端通常会缓存访问过的资源通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源404Not Found 资源未找到服务器无法根据客户端的请求找到资源网页。通过此代码网站 设计人员可设置您所请求的资源无法找到的个性页面403Forbidden 没有权限服务器理解请求客户端的请求但是拒绝执行此请求500Internal server Error 服务器错误服务器内部错误504Gateway Time-out网关超时充当网关或代理的服务器未及时从远端服务器获取请求
下面详细阐述 301 和 302 。
301 永久重定向
常见场景有比如说你的一个网站域名到期了或者域名你不想用了那么老的域名就可以返回一个301状态码并配合location让location的值等于新的域名最终进行跳转之后浏览器会记住新的域名不会再访问老的域名。
302 临时重定向
常见场景有百度知乎、简书等等。比如说我们要在百度进入菜鸟教程搜索出来后有一系列的列表我们可以选择一个去进行一个点击。点击的那个不会直接进入菜鸟教程而是先跳转到百度设置的一个临时地址之后再跳转到菜鸟教程真实的地址。
4、关于协议和规范
http协议就是一个约定一个规范要求大家都跟着执行因此不要做违规范的事情例如 IE 浏览器违反规范终将会落下被历史淘汰的局面。
二、http 方法
1、传统的methods
get 获取服务器的数据post 向服务器提交数据head 用户获取报头。
2、现在的methods
get 获取数据post 新建数据patch/put 更新数据delete 删除数据head类似于get请求只不过返回的响应中没有具体的内容用户获取报头options允许客户端查看服务器的性能比如说服务器支持的请求方式等等trace追踪路径connect要求用隧道协议连接代理。
3、Restful API
1Restful API是什么 Restful API 是一种新的 API 设计方法早已推广使用。 传统 API 设计把每个 url 当做一个功能。 Restful API 设计把每个 url 当做一个唯一的资源。
2如何设计成一个资源
1尽量不用url参数
传统 API 设计/api/list?pageIndex2Restful API 设计/api/list/2
2用method表示操作类型
传统 API 设计 post请求/api/create-article post请求/api/update-article?id100 get请求/api/get-article?id100
Restful API 设计 post请求/api/article post请求/api/article/100 get请求/api/article/100
三、http 头部http headers
1、常见的Request headers
请求头含义Accept浏览器可接收的数据格式Accept-Encoding浏览器可以接收的算法如gzipAccept-Language浏览器可接收的语言如zh-CNConnectionkeep-alive 一次TCP连接重复使用cookie客户端接收到的Cookie信息Host指定原始的 URL 中的主机和端口User-Agent简称UA浏览器内核信息Content-type发送数据的格式如application/json
2、常见的Response headers
响应头含义Content-type返回数据的格式如application/jsonContent-length返回数据的大小多少字节Content-Encoding返回数据的压缩算法如gzipSet-Cookie服务端向客户端设置cookie
四、http 缓存
1、关于缓存的介绍
1什么是缓存
缓存是一种保存资源副本并在下次请求时直接使用该副本的技术。
2为什么需要缓存
如果没有缓存的话每一次网络请求都要加载大量的图片和资源这会使页面的加载变慢许多。那缓存的目的其实就是为了尽量减少网络请求的体积和数量让页面加载的更快。
3哪些资源可以被缓存——静态资源js、css、img
网站的 html 是不能被缓存的。因为网站在使用过程中 html 随时有可能被更新随时有可能被替换模板。网页的业务数据也是不能被缓存的。比如留言板和评论区用户随时都可以在底下评论那数据库的内容就会被频繁被更新。
2、http 缓存策略强制缓存 协商缓存
1强制缓存
1强制缓存是什么
强制缓存就是文件直接从本地缓存中获取不需要发送请求。
2图例
先看第一个图。 从上图可以看到当初次请求时浏览器会向服务器发起请求服务器接收到浏览器的请求后返回资源并返回一个 Cache-Control 给客户端该 Cache-Control 一般设置缓存的最大过期时间。 接下来看第二个图。 从上图中可以看到此时浏览器已经接收到cache-control的值那么这个时候浏览器再次发送请求时它会先检查它的cache-control是否过期如果没有过期则直接从本地缓存中拉取资源返回到客户端而无需再经过服务器。 接下来看第三个图。 强制缓存有过期时间那么就意味着总有一天缓存会失效。那么假设某一天客户端的 cache-control 失效了那么它就没办法从本地缓存中拉取资源。于是它会像第一张图一样重新向服务器发起请求之后服务器会再次返回资源和 cache-control 的值。
以上就是强制缓存的全过程。
3Cache-Control
Cache-Control是什么
存在于响应头Response Headers中控制强制缓存的逻辑例如Cache-Control: max-age 31536000单位是秒。
Cache-Control的值
Cache-Control值含义max-age设置缓存的最大过期时间no-cache不用本地缓存正常的向服务端请求服务端怎么处理我们不用管no-store简单粗暴直接从服务端拉取缓存private只能允许最终用户做缓存最终用户即电脑、手机等等public允许中间路由或中间代理做缓存
4关于Expires
同在 Response Headers 中同为控制缓存的过期时间早期使用如果 cache-control 与 expires 同时存在的话 cache-control 的优先级高于 expires
2协商缓存
1协商缓存是什么
协商缓存也叫对比缓存。它是一种服务端的缓存策略即通过服务端来判断某件事情是不是可以被缓存。服务端判断客户端的资源是否和服务端资源一样如果一致则返回 304 反之返回 200 和最新的资源。
2图例
同样地用几张图来演示协商缓存。
先来看第一张图。 在上图中表明了协商缓存的全过程。首先如果客户端是第一次向服务器发出请求则服务器返回资源和相对应的资源标识给浏览器。该资源标识就是对当前所返回资源的一种唯一标识可以是Etag或者是Last-Modified这两个字段将在图例结束后展开讲解。
之后如果浏览器再次发送请求时浏览器就会带上这个资源标识。此时服务端就会通过这个资源标识可以判断出浏览器的资源跟服务端此时的资源是否一致如果一致则返回304即表示Not Found 资源未修改。如果判断结果为不一致则返回200并返回资源以及新的资源标识。至此就结束了协商缓存的过程。 接下来看第二张图。 假设此时我们的协商缓存用 Last-Modified 来判断。当浏览器第一次发送请求时服务器返回资源并返回一个 Last-Modified 的值给浏览器。这个 Last-Modified 的值给到浏览器之后浏览器会通过 If-Modified-Since 的字段来保存 Last-Modified 的值且 If-Modified-Since 保存在请求头当中。
之后当浏览器再次发送请求时请求头会带着 If-Modified-Since 的值去找服务器服务器此刻就会匹配浏览器发过来的 If-Modified-Since 是否和自己最后一次修改的 Last-Modified 的值相等。如果相等则返回 304 表示资源未被修改如果不相等则返回200并返回资源和新的 Last-Modified 的值。 接下来看第三张图。 假设此时我们的协商缓存用 Etag 来判断。当浏览器第一次发送请求时服务器返回资源并返回一个 Etag 的值给浏览器。这个 Etag 的值给到浏览器之后浏览器会通过 If-None-Match 的字段来保存 Etag 的值且 If-None-Match 保存在请求头当中。
之后当浏览器再次发送请求时请求头会带着 If-Modified-Since 的值去找服务器服务器此刻就会匹配浏览器发过来的 If-None-Match 是否和自己最后一次修改的 Etag 的值相等。如果相等则返回 304 表示资源未被修改如果不相等则返回 200 并返回资源和新的 Etag 的值。
通过图例相信大家对协商缓存有了一个新的认识。接下来讲解刚刚图例中所包含的一些字段。
3资源标识
在响应头部 Response Headers 中有两种资源标识
Last-Modified 资源的最后修改时间对应请求头为 If-Modified-Since Etag 资源的唯一标识所谓唯一可以想象成时人类的指纹具有唯一性但 Etag 的本质是一个字符串对应请求头为 If-None-Match 。
4Last-Modified 和 Etag
当响应头部 Response Headers 同时存在 Last-Modified 和 Etag 的值时会优先使用 Etag Last-Modified 只能精确到秒级如果资源被重复生成而内容不变则 Etag 更精确。
5)Headers 示例 由上图可以看到响应头中的 Last-Modified 对应请求头中的 If-Modified-Since Etag 对应请求头中的 If-None-Match 。
6流程图
说到这里协商缓存的内容也快结束啦最后的最后我们用一张流程图来展示协商缓存的全过程。
3、刷新操作方式对缓存的影响
讲完缓存我们再来讲个有点重要但是有点题外话的内容刷新操作。我们平常在上网时总有某个时刻突然网卡了这个时候人的本性总是非常不耐烦的毫不犹豫的就来个刷新。但殊不知刷新对缓存也存在一定的影响。下面我们一起来看下各种刷新姿势以及其对缓存的影响。
1正常操作
定义 地址栏输入 url 跳转链接前进后退等。
对缓存的影响 强制缓存有效协商缓存有效。
2手动刷新
定义 F5 点击刷新按钮右击菜单刷新。
对缓存的影响 强制缓存失效协商缓存有效。
3强制刷新
定义 ctrl F5 。
对缓存的影响 强制缓存失效协商缓存失效。
这一块内容仅当娱乐补充大家可以根据自身需求学习~
五、写在最后
http协议对于开发来说时很重要很重要的一块内容不管时前端还是后端对于常见的状态码请求方法请求头和响应头还有强缓存和协商缓存都是必须要了解的知识点。
关于http协议的知识就讲到这里啦如有疑问或文章有讲的不好的地方欢迎评论区评论或私信我交流~ 关注公众号 星期一研究室 不定期分享学习干货 如果这篇文章对你有用记得点个赞加个关注再走哦~
