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”。参数可以允许有多个参数,参数与参数之间用“&”作为分隔符。

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的语法对其进行格式化,并在浏览器窗口中显示。
  • 例如:在浏览器地址栏键入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协议的更多相关文章

  1. 前端学习笔记之HTTP协议

    阅读目录 一 HTTP协议简介 二 HTTP协议之请求Request 三 HTTP协议之响应Response 四 HTTP协议完整工作流程 五 HTTP协议关键性总结 六 自定义套接字分析HTTP协议 ...

  2. 前端-HTML-web服务本质-HTTP协议-请求-标签-01(待完善)

    目录 前端 什么是前端 什么是后端 学习流程 前端三剑客的形容 web服务的本质 测试--浏览器作为客户端向服务器发起请求 浏览器输入网址回车发生了几件事 ***** HTTP协议(超文本传输协议) ...

  3. 前端不得不了解的TCP协议

    背景 早期的网络是基于OSI(开放式系统互联网,一般叫OSI参考模型)模型,该模型是由ISO国际标准组织制定的,包含了七层(应用层.表示层.会话层.传输层.网络层.数据链路层.物理层),即复杂又不实用 ...

  4. 淘宝前端工程师:国内WEB前端开发十日谈

    一直想写这篇"十日谈",聊聊我对Web前端开发的体会,顺便解答下周围不少人的困惑和迷惘.我不打算聊太多技术,我想,通过技术的历练,得到的反思应当更重要. 我一直认为自己是" ...

  5. Web前端开发十日谈

    =========================================================================== 原文章: http://kb.cnblogs.c ...

  6. 绝对精品推荐做前端的看下:Web前端开发体会十日谈

    20151208感悟: 前端人的角度来看的话,感觉像是阅读一个大牛前端的全部武功的一个秘籍说明,里面的思想高价值蛋白真是太多太多,推荐看. Web前端开发体会十日谈 一直想写这篇“十日谈”,聊聊我对W ...

  7. SOCKS5的出现缓解了各种具体协议需要专门设计代理协议的困难局面

    socks5_百度百科 https://baike.baidu.com/item/socks5/8915011?fr=aladdin 如果您的机器具有一个合法的 Internet IP 地址, 或者您 ...

  8. 游戏协议模拟测试工具(TcpEngine)使用简介

    功能介绍 在有的网络开发需要走二进制流协议场景,比如网络游戏开发,在开发阶段,前端和后端协商好协议后就分别开发.在开发写代码的时候,有时需要对端发送一条完整的协议过来触发一下自己的代码,进行单步调试或 ...

  9. 前端基础知识之html和css全解

    前端回顾 目录 前端回顾 基础知识 HTTP协议 认识HTML HTML组成 HTML标签 div和span标签 特殊的属性 常用标签 认识css 选择器 属性 前端就是展示给用户并且与用户进行交互的 ...

随机推荐

  1. 关于while read line 循环中变量作用域的问题

    前一阵用shell写了一个从数据库中抽取数据生成.xml文件的脚本,要求是每个文件中只生成1000条数据.于是用到了while read line 作为循环. 在制作文件计数器的时候发现了一个问题,在 ...

  2. Sharepoint 2016 配置FBA(一) 创建Membership数据库

    在Sharepoint 2016上配置FBA(forms based authentication)的过程和Sharepoint 2013一样. 第一步:创建Membership数据库. 为了存放所有 ...

  3. SpringBoot中的ajax跨域问题

    在控制类加入注释@CrossOrigin(allowCredentials = "true",allowedHeaders = "*",origins = {& ...

  4. plsql插入数据出现乱码问题

    今天在使用plsql 插数据时 ,遇到的问题就是插入进去是乱码问题,在这里总结一下如何解决的 首先声明一下就是: 现在只有客户端,没有服务端,有一些需求就是总是有许多数据要插入进去,但是在使用sql语 ...

  5. Python第九课学习

    Python第九课学习 数据结构: 深浅拷贝 集合set 函数: 概念 创建 参数 return 定义域 www.cnblogs.com/yuanchenqi/articles/5782764.htm ...

  6. Linux下MySQL在知道密码的情况下修改密码

    1.在知道原密码的情况下,进入MySQL: mysql -u root -p 2.进入 mysql数据库,然后通过语句修改密码: 我的MySQL版本是:mysql  Ver 14.14 Distrib ...

  7. jQuery-4.动画篇---上卷下拉效果

    jQuery中下拉动画slideDown 对于隐藏的元素,在将其显示出来的过程中,可以对其进行一些变化的动画效果.之前学过了show方法,show方法在显示的过程中也可以有动画,但是.show()方法 ...

  8. Netty 基本组件与线程模型

    Netty 的学习内容主要是围绕 TCP 和 Java NIO 这两个点展开的,由于 Netty 是基于 Java NIO 的 API 之上构建的网络通讯框架,Java NIO 中的几个组件,都能在 ...

  9. nodejs故障cnpm没反应

    莫名发生的故障cnpm没反应 重新整理nodejs使用流程 方案1 1.安装64位nodejs 2.设置代理 npm config set proxy http://127.0.0.1:9999    ...

  10. 什么是BFC

    对css有了解的朋友肯定都知道盒式模型这个概念,对一个元素设置css,首先需要知道这个元素是block还是inline类型.而BFC就是用来格式化块级盒子,同样管理inline类型的盒子还有IFC,以 ...