前端需要了解的HTTP协议
HTTP协议
@
HTTP概述
- http协议是用来规定客户端和服务器间通信的报文的格式的;
- 客户端和服务器端通信的内容称为报文;
- 客户端和服务器间通信是基于请求和响应的模式的;客户端给服务器发送请求报文,服务器给客户端返回响应报文;
- 服务器:接收请求返回响应;
- 请求 request
- 响应 response
- http客户端和服务器端
- 客户端发送给服务器的请求就相当于是客户端给服务器写信(请求报文);
- 服务器返回的相应就相当于服务器给客户端写回信(响应报文);
- http协议就是规定客户端和服务器端传输的协议;
HTTP之URL
HTTP使用统一资源标识符(Uniform Resource Identifiers, URI)来传输数据和建立连接。URL是一种特殊类型的URI,包含了用于查找某个资源的足够的信息;
URL,全称是UniformResourceLocator, 中文叫统一资源定位符,是互联网上用来标识某一处资源的地址。
以下面这个URL为例,介绍下普通URL的各部分组成:http://www.aspxfans.com:8080/news/index.asp?boardID=5&ID=24618&page=1#name
- 从上面的URL可以看出,一个完整的URL包括以下几部分:
- 1.协议部分:该URL的协议部分为“http:”,这代表网页使用的是HTTP协议。在Internet中可以使用多种协议,如HTTP,FTP等等本例中使用的是HTTP协议。在"HTTP"后面的“//”为分隔符;
- 2.域名部分:该URL的域名部分为“www.aspxfans.com”。一个URL中,也可以使用IP地址作为域名使用;
- 3.端口部分:跟在域名后面的是端口,域名和端口之间使用“:”作为分隔符。端口不是一个URL必须的部分,如果省略端口部分,将采用默认端口;
- 4.虚拟目录部分:从域名后的第一个“/”开始到最后一个“/”为止,是虚拟目录部分。虚拟目录也不是一个URL必须的部分。本例中的虚拟目录是“/news/”;
- 5.文件名部分:从域名后的最后一个“/”开始到“?”为止,是文件名部分,如果没有“?”,则是从域名后的最后一个“/”开始到“#”为止,是文件部分,如果没有“?”和“#”,那么从域名后的最后一个“/”开始到结束,都是文件名部分。本例中的文件名是“index.asp”。文件名部分也不是一个URL必须的部分,如果省略该部分,则使用默认的文件名;
- 6.锚部分:从“#”开始到最后,都是锚部分。本例中的锚部分是“name”。锚部分也不是一个URL必须的部分;
- 7.参数部分:从“?”开始到“#”为止之间的部分为参数部分,又称搜索部分、查询部分。本例中的参数部分为“boardID=5&ID=24618&page=1”。参数可以允许有多个参数,参数与参数之间用“&”作为分隔符。
- 从上面的URL可以看出,一个完整的URL包括以下几部分:
HTTP状态码
- 状态代码有三位数字组成,第一个数字定义了响应的类别,共分五种类别:
- 1xx:指示信息--表示请求已接收,继续处理
- 2xx:成功--表示请求已被成功接收、理解、接受
- 3xx:重定向--要完成请求必须进行更进一步的操作
- 4xx:客户端错误--请求有语法错误或请求无法实现
- 5xx:服务器端错误--服务器未能实现合法的请求
- 常见状态码:
- 200 OK://客户端请求成功;
- 400 Bad Request://客户端请求有语法错误,不能被服务器所理解;
- 401 Unauthorized ://请求未经授权,这个状态代码必须和WWW-Authenticate报头域一起使用 ;
- 403 Forbidden : //服务器收到请求,但是拒绝提供服务;
- 404 Not Found://请求资源不存在,eg:输入了错误的URL;
- 500 Internal Server Error : //服务器发生不可预期的错误;
- 503 Server Unavailable: //服务器当前不能处理客户端的请求,一段时间后可能恢复正常;
HTTP首部
HTTP首部字段
HTTP通用首部字段
HTTP请求首部字段
Header | 解释 | 示例 |
---|---|---|
Accept | 指定客户端能够接收的内容类型 | Accept: text/plain, text/html |
Accept-Charset | 浏览器可以接受的字符编码集 | Accept-Charset: iso-8859-5 |
Accept-Encoding | 指定浏览器可以支持的web服务器返回内容压缩编码类型。 | Accept-Encoding: compress, gzip |
Accept-Language | 浏览器可接受的语言 | Accept-Language: en,zh |
Accept-Ranges | 可以请求网页实体的一个或者多个子范围字段 | Accept-Ranges: bytes |
Authorization | HTTP授权的授权证书 | Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ== |
Cache-Control | 指定请求和响应遵循的缓存机制 | Cache-Control: no-cache |
Connection | 表示是否需要持久连接。(HTTP 1.1默认进行持久连接) | Connection: close |
Cookie | HTTP请求发送时,会把保存在该请求域名下的所有cookie值一起发送给web服务器。 | Cookie: $Version=1; Skin=new; |
Content-Length | 请求的内容长度 | Content-Length: 348 |
Content-Type | 请求的与实体对应的MIME信息 | Content-Type: application/x-www-form-urlencoded |
Date | 请求发送的日期和时间 | Date: Tue, 15 Nov 2010 08:12:31 GMT |
Expect | 请求的特定的服务器行为 | Expect: 100-continue |
From | 发出请求的用户的Email | From: user@email.com |
Host | 指定请求的服务器的域名和端口号 | Host: www.zcmhi.com |
If-Match | 只有请求内容与实体相匹配才有效 | If-Match: “737060cd8c284d8af7ad3082f209582d” |
If-Modified-Since | 如果请求的部分在指定时间之后被修改则请求成功,未被修改则返回304代码 | If-Modified-Since: Sat, 29 Oct 2010 19:43:31 GMT |
If-None-Match | 如果内容未改变返回304代码,参数为服务器先前发送的Etag,与服务器回应的Etag比较判断是否改变 | If-None-Match: “737060cd8c284d8af7ad3082f209582d” |
If-Range | 如果实体未改变,服务器发送客户端丢失的部分,否则发送整个实体。参数也为Etag | If-Range: “737060cd8c284d8af7ad3082f209582d” |
If-Unmodified-Since | 只在实体在指定时间之后未被修改才请求成功 | If-Unmodified-Since: Sat, 29 Oct 2010 19:43:31 GMT |
Max-Forwards | 限制信息通过代理和网关传送的时间 | Max-Forwards: 10 |
Pragma | 用来包含实现特定的指令 | Pragma: no-cache |
Proxy-Authorization | 连接到代理的授权证书 Proxy-Authorization: Basic QWxhZGRpbjpvcGVuIHNlc2FtZQ== | |
Range | 只请求实体的一部分,指定范围 | Range: bytes=500-999 |
Referer | 先前网页的地址,当前请求网页紧随其后,即来路 | Referer: http://www.zcmhi.com/archives/71.html |
TE | 客户端愿意接受的传输编码,并通知服务器接受接受尾加头信息 | TE: trailers,deflate;q=0.5 |
Upgrade | 向服务器指定某种传输协议以便服务器进行转换(如果支持) | Upgrade: HTTP/2.0, SHTTP/1.3, IRC/6.9, RTA/x11 |
User-Agent | User-Agent的内容包含发出请求的用户信息 | User-Agent: Mozilla/5.0 (Linux; X11) |
Via | 通知中间网关或代理服务器地址,通信协议 | Via: 1.0 fred, 1.1 nowhere.com (Apache/1.1) |
Warning | 关于消息实体的警告信息 | Warn: 199 Miscellaneous warning |
HTTP工作原理
HTTP协议定义Web客户端如何从Web服务器请求Web页面,以及服务器如何把Web页面传送给客户端。
HTTP协议采用了请求/响应模型。客户端向服务器发送一个请求报文,请求报文包含请求的方法、URL、协议版本、请求头部和请求数据。服务器以一个状态行作为响应,响应的内容包括协议的版本、成功或者错误代码、服务器信息、响应头部和响应数据。
以下是 HTTP 请求/响应的步骤:
- 1、客户端连接到Web服务器:
- 一个HTTP客户端,通常是浏览器,与Web服务器的HTTP端口(默认为80)建立一个TCP套接字连接。例如,http://www.oakcms.cn。
- 2、发送HTTP请求:
- 通过TCP套接字,客户端向Web服务器发送一个文本的请求报文,一个请求报文由请求行、请求头部、空行和请求数据4部分组成。
- 3、服务器接受请求并返回HTTP响应
- Web服务器解析请求,定位请求资源。服务器将资源复本写到TCP套接字,由客户端读取。一个响应由状态行、响应头部、空行和响应数据4部分组成。
- 4、释放连接TCP连接
- 若connection 模式为close,则服务器主动关闭TCP连接,客户端被动关闭连接,释放TCP连接;若connection 模式为keepalive,则该连接会保持一段时间,在该时间内可以继续接收请求;
- 5、客户端浏览器解析HTML内容
- 客户端浏览器首先解析状态行,查看表明请求是否成功的状态代码。然后解析每一个响应头,响应头告知以下为若干字节的HTML文档和文档的字符集。客户端浏览器读取响应数据HTML,根据HTML的语法对其进行格式化,并在浏览器窗口中显示。
- 1、客户端连接到Web服务器:
例如:在浏览器地址栏键入URL,按下回车之后会经历以下流程:
- 1、浏览器向 DNS 服务器请求解析该 URL 中的域名所对应的 IP 地址;
- 2、解析出 IP 地址后,根据该 IP 地址和默认端口 80,和服务器建立TCP连接;
- 3、浏览器发出读取文件(URL 中域名后面部分对应的文件)的HTTP 请求,该请求报文作为 TCP 三次握手的第三个报文的数据发送给服务器;
- 4、服务器对浏览器请求作出响应,并把对应的 html 文本发送给浏览器;
- 5、释放 TCP连接;
- 6、浏览器将该 html 文本并显示内容;
HTTP报文内的HTTP信息
HTTP之请求消息Request
- 客户端发送一个HTTP请求到服务器的请求消息包括以下格式:
- 请求行(request line)、请求头部(header)、空行和请求数据4个部分组成。
- 请求行以一个方法符号开头,以空格分开,后面跟着请求的URI和协议的版本。
请求行
- 请求行由请求方法字段、url字段和HTTP协议版本字段三个字段组成,它们用空格分隔;
例如打开路径http://www.baidu.com/index.php,用火狐浏览器可以查看到请求报文为:
GET /index.php HTTP/1.1
因此用空格分隔之后得到的信息为
(1)请求方法: GET
(2)URL信息: /index.php
(3)HTTP协议版本: HTTP/1.1
- 请求方法类型:
- Get:不适合传送私密的和大量的数据;
- Post:常用于表单提交;
- HEAD:查看某个页面的状态,用于测试当前服务器的状态。因为服务端接受到HEAD请求后只返回响应头,不会发送响应内容;
- PUT:请求服务器存储一个资源,并用Request-URI作为其标识;
- DELETE:请求服务器删除Request-URI所标识的资源;
- TRACE:请求服务器回送收到的请求信息,主要用于测试或诊断;
- CONNECT:保留将来使用;
- OPTIONS:请求查询服务器的性能,或者查询与资源相关的选项和需求;
HTTP之响应Response
- 一般情况下,服务器接收并处理客户端发过来的请求后会返回一个HTTP的响应消息。
- HTTP响应也由四个部分组成,分别是:状态行、消息报头、空行和响应正文。
//响应报文的结构
//响应首行
HTTP/1.1 200 OK
//协议名/协议版本 响应状态码 响应状态码的描述
//响应头
X-Powered-By: Express
//服务器提供者;
Accept-Ranges: bytes
//允许的单位;
Cache-Control: public, max-age=0
//缓存的控制;
Last-Modified: Fri, 21 Jul 2017 01:21:28 GMT
//最后的修改时间
ETag: W/"a6-15d62bc36d6"
//网页的标识
Content-Type: text/html; charset=UTF-8
//响应体的类型;
Content-Length: 166
//响应体的大小(字节);
Date: Fri, 21 Jul 2017 02:21:47 GMT
//响应时间;
Connection: keep-alive
//连接时间;
/* 空行: 空行用来分隔响应首部和响应体 */
//响应体:响应体就是服务器响应给客户端的主要内容
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>这是我的第一个网站</h1>
</body>
</html>
响应报文组成部分
第一部分:状态行,由HTTP协议版本号, 状态码, 状态消息 三部分组成。
第二部分:消息报头,用来说明客户端要使用的一些附加信息;
- Content-Length:表示请求消息正文的长度。对于POST请求来说Content-Length必须出现。
- Content-Type:表示内容类型,一般是指客户端存在的Content-Type。
例如:Content-Type: text/html; charset='gb2312'
- Content-Encoding:WEB服务器表明自己使用了什么压缩方法(gzip,deflate)压缩响应中的对象。
例如:Content-Encoding:gzip
- Content-Language:响应体的语言。
第三部分:空行,消息报头后面的空行是必须的;
第四部分:响应正文,服务器返回给客户端的文本信息。
常见的响应状态码:
- 200响应成功,2开头的都和成功有关;
- 302请求的重定向(请求的是一个网站,实际跳到了另一个网站),3开头的都和重定向相关;
- 404页面未找到,4都是客户端的错;
- 500服务器内部错误,5开头的都是服务器的错;
HTTP响应体:如果请求的是HTML页面,那么返回的就是HTML代码。如果是JS就是JS代码。
HTTP响应头:而设置Cookie,缓存等信息就是在响应头属性设置的。
HTTP响应行:主要是设置响应状态等信息。
get请求和post请求
get请求
get没有请求体,所以空行也没有意义;
get请求的结构(没有请求体)
- 第一部分:请求行,用来说明请求类型,要访
- 问的资源以及所使用的HTTP版本;
- 第二部分:请求头部,紧接着请求行(即第一行)之后的部分,用来说明服务器要使用的附加信息;
- 从第二行起为请求头部,HOST将指出请求的目的地;
- User-Agent,服务器端和客户端脚本都能访问它,它是浏览器类型检测逻辑的重要基础.该信息由你的浏览器来定义,并且在每个请求中自动发送等等;
- 第三部分:空行,请求头部后面的空行是必须的;
- 第四部分:请求数据也叫主体,可以添加任意的其他数据。
//GET请求没有请求体,所以空行也没有意义
//get请求的结构:
GET /index.html?username=sunwukong&password=123123 HTTP/1.1
/* 请求首行
* GET /index.html?username=sunwukong&password=123123 HTTP/1.1
* 请求方式 资源路径?查询字符串 协议名/协议版本
* get请求通过查询字符串发送请求参数 */ //请求头:通过观察发现,请求头实际上就是一个一个的名值对结构,名字和值之间使用:连接,有的是一个名字对应多个值,有的是一个名字对应一个值
Accept: text/html, application/xhtml+xml, */*
//客户端可以接受的数据格式:后边跟的都是一个一个的MIME值(数据类型/具体的格式)
// */*:表示任意数据
X-HttpWatch-RID: 24713-10055
Referer: http://localhost:3000/form.html
//请求的来源:(广告、防盗链 。。。) Accept-Language: zh-CN,en-US;q=0.5
//客户端允许的语言:zh-CN中文简体 zh-TW中文繁体 User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko
//用户代理(浏览器):用户系统的信息 可以通过User-Agent来识别用户的系统和浏览器信息 Accept-Encoding: gzip, deflate
//允许的压缩格式; Host: localhost:3000
//主机地址; DNT: 1
Connection: Keep-Alive
//连接时间:当前连接是一个长连接
//客户端要向服务器发送请求,必须先和服务器建立连接
Cookie: Webstorm-a34368aa=53546be1-ba52-410f-8e9f-3ed101260bbb
post请求
- post请求报文的结构
- post和get请求的区别:
- 1、表单的method属性设置post时发送的是post请求,其余都是get请求。
- 2、get请求通过url地址发送请求参数;post请求通过请求体发送请求参数;
- 3、get请求通过url地址发送请求参数,参数在地址栏可见,不太安全;post请求通过请求体发送请求参数,参数在地址栏不可见,相对安全。
- 4、get请求,url地址的长度限制在255字节内,所以get请求不能发送过多的参数。post请求,长度没有限制。
- 5、在提交表单时,一般情况下都是用post,不使用get。
- 在以下情况中,请使用 POST 请求:
- 无法使用缓存文件(更新服务器上的文件或数据库);
- 向服务器发送大量数据(POST 没有数据量限制);
- 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
//post请求报文的结构 //请求首行
POST /index.html HTTP/1.1
//请求头
Accept: text/html, application/xhtml+xml, */*
Referer: http://localhost:3000/form.html
Accept-Language: zh-CN,en-US;q=0.5
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko
Content-Type: application/x-www-form-urlencoded
//请求体的数据类型:application/x-www-form-urlencoded 表示请求体会被url编码;
Accept-Encoding: gzip, deflate
Host: localhost:3000
Content-Length: 34
//请求体的长度(字节);
Connection: Keep-Alive
Cache-Control: no-cache
//缓存的设置:no-cache不使用缓存; //请求体
username=sunwukong&password=123123
//请求参数,post请求是通过请求体发送请求参数的
post和get请求的区别
基本区别
- 1.表单的method属性设置post时发送的是post请求,其余都是get请求(没有考虑AJAX);
- 2.get请求通过url地址发送请求参数,post请求通过请求体发送请求参数;
- 3.get请求直接通过url地址发送请求参数,参数在地址栏可见,不太安全;post请求通过请求体发送请求参数,参数在地址栏不可见,相对安全;
- 4.get请求直接通过url地址发送请求参数,url地址的长度限制在255字节内,所以get请求不能发送过多的参数,post请求通过请求体发送参数,长度没有限制。
- Get方法提交的数据大小长度并没有限制,而是IE浏览器本身对地址栏URL长度有最大长度限制:2048个字符。
- GET 的本质是「得」,而 POST 的本质是「给」。GET 的内容可以被浏览器缓存,而 POST 的数据不可以。
高级区别
- 1.get产生一个TCP数据包;post产生两个TCP数据包;
- 2.在一次请求中,get一次性完成,post在部分浏览器(除了火狐)需要发送两次信息,所以get比post更快,更有效率。
前端需要了解的HTTP协议的更多相关文章
- 前端学习笔记之HTTP协议
阅读目录 一 HTTP协议简介 二 HTTP协议之请求Request 三 HTTP协议之响应Response 四 HTTP协议完整工作流程 五 HTTP协议关键性总结 六 自定义套接字分析HTTP协议 ...
- 前端-HTML-web服务本质-HTTP协议-请求-标签-01(待完善)
目录 前端 什么是前端 什么是后端 学习流程 前端三剑客的形容 web服务的本质 测试--浏览器作为客户端向服务器发起请求 浏览器输入网址回车发生了几件事 ***** HTTP协议(超文本传输协议) ...
- 前端不得不了解的TCP协议
背景 早期的网络是基于OSI(开放式系统互联网,一般叫OSI参考模型)模型,该模型是由ISO国际标准组织制定的,包含了七层(应用层.表示层.会话层.传输层.网络层.数据链路层.物理层),即复杂又不实用 ...
- 淘宝前端工程师:国内WEB前端开发十日谈
一直想写这篇"十日谈",聊聊我对Web前端开发的体会,顺便解答下周围不少人的困惑和迷惘.我不打算聊太多技术,我想,通过技术的历练,得到的反思应当更重要. 我一直认为自己是" ...
- Web前端开发十日谈
=========================================================================== 原文章: http://kb.cnblogs.c ...
- 绝对精品推荐做前端的看下:Web前端开发体会十日谈
20151208感悟: 前端人的角度来看的话,感觉像是阅读一个大牛前端的全部武功的一个秘籍说明,里面的思想高价值蛋白真是太多太多,推荐看. Web前端开发体会十日谈 一直想写这篇“十日谈”,聊聊我对W ...
- SOCKS5的出现缓解了各种具体协议需要专门设计代理协议的困难局面
socks5_百度百科 https://baike.baidu.com/item/socks5/8915011?fr=aladdin 如果您的机器具有一个合法的 Internet IP 地址, 或者您 ...
- 游戏协议模拟测试工具(TcpEngine)使用简介
功能介绍 在有的网络开发需要走二进制流协议场景,比如网络游戏开发,在开发阶段,前端和后端协商好协议后就分别开发.在开发写代码的时候,有时需要对端发送一条完整的协议过来触发一下自己的代码,进行单步调试或 ...
- 前端基础知识之html和css全解
前端回顾 目录 前端回顾 基础知识 HTTP协议 认识HTML HTML组成 HTML标签 div和span标签 特殊的属性 常用标签 认识css 选择器 属性 前端就是展示给用户并且与用户进行交互的 ...
随机推荐
- 关于while read line 循环中变量作用域的问题
前一阵用shell写了一个从数据库中抽取数据生成.xml文件的脚本,要求是每个文件中只生成1000条数据.于是用到了while read line 作为循环. 在制作文件计数器的时候发现了一个问题,在 ...
- Sharepoint 2016 配置FBA(一) 创建Membership数据库
在Sharepoint 2016上配置FBA(forms based authentication)的过程和Sharepoint 2013一样. 第一步:创建Membership数据库. 为了存放所有 ...
- SpringBoot中的ajax跨域问题
在控制类加入注释@CrossOrigin(allowCredentials = "true",allowedHeaders = "*",origins = {& ...
- plsql插入数据出现乱码问题
今天在使用plsql 插数据时 ,遇到的问题就是插入进去是乱码问题,在这里总结一下如何解决的 首先声明一下就是: 现在只有客户端,没有服务端,有一些需求就是总是有许多数据要插入进去,但是在使用sql语 ...
- Python第九课学习
Python第九课学习 数据结构: 深浅拷贝 集合set 函数: 概念 创建 参数 return 定义域 www.cnblogs.com/yuanchenqi/articles/5782764.htm ...
- Linux下MySQL在知道密码的情况下修改密码
1.在知道原密码的情况下,进入MySQL: mysql -u root -p 2.进入 mysql数据库,然后通过语句修改密码: 我的MySQL版本是:mysql Ver 14.14 Distrib ...
- jQuery-4.动画篇---上卷下拉效果
jQuery中下拉动画slideDown 对于隐藏的元素,在将其显示出来的过程中,可以对其进行一些变化的动画效果.之前学过了show方法,show方法在显示的过程中也可以有动画,但是.show()方法 ...
- Netty 基本组件与线程模型
Netty 的学习内容主要是围绕 TCP 和 Java NIO 这两个点展开的,由于 Netty 是基于 Java NIO 的 API 之上构建的网络通讯框架,Java NIO 中的几个组件,都能在 ...
- nodejs故障cnpm没反应
莫名发生的故障cnpm没反应 重新整理nodejs使用流程 方案1 1.安装64位nodejs 2.设置代理 npm config set proxy http://127.0.0.1:9999 ...
- 什么是BFC
对css有了解的朋友肯定都知道盒式模型这个概念,对一个元素设置css,首先需要知道这个元素是block还是inline类型.而BFC就是用来格式化块级盒子,同样管理inline类型的盒子还有IFC,以 ...