前端的知识伴随着博客系统这个项目的完结而告一段落,在接下来的博客中,将详细介绍如何将前后端连接起来,使得我们的博客系统更加牛逼
HTTP协议
是应用层中最典型的协议,供浏览器和服务器,手机和杜武器,服务器和服务器之间交互
当我们在浏览器的搜索栏打了一堆字时,我们最终会得到一个网页,这就是我们的浏览器通过HTTP协议和服务器进行了通信
HTTP协议是一问一答模型的协议
请求
HTTP请求包含一下几部分
- 首行 (方法,URL,版本号)
- 请求头 (一系列键值对)
- 空行 (用来分割请求头和正文)
- 正文 (有的请求没有正文)
响应
HTTP响应包含一下几部分
- 首行 (版本号,状态码)
- 响应报头 (一系列键值对)
- 空行 (用来分割响应报头和正文)
- 正文 (可以是json,css,js,图片等格式)
抓包
我们可以用抓包工具来对自己电脑上的请求交互进行监测
抓包工具就相当于请了一个代理,浏览器和服务器之间的交流过程这个代理都一清二楚
正向代理:给客户端提供代理,服务器就不知道真正的客户端是谁了
反向代理: 给服务器提供代理,客户端就不知道真正的服务器是谁了
在这里,我使用charles抓包工具来演示一下抓包过程,具体使用技巧大家csdn搜索一下其他博客就好了
上面是请求,下面是响应
请求
POST /EWS/Exchange.asmx HTTP/1.1 (首行)
Host: outlook.office365.com (请求头)
Content-Type: text/xml; charset=utf-8
Accept-Encoding: gzip, deflate, br
Connection: keep-alive
Accept: */*
User-Agent: AppleExchangeWebServices/827 AddressBookSourceSync/2536
Authorization: Bearer EwA4A+l3BAAUnQP8Jfa2FYxR0AX7HsEZwOdWa28AAWzrGeyPoiukqU7wsy2JdPTY09tC0Ep/rt5EoYpipplxLiE2WNA8PsGml2FJ655klYGDGOzcBQQD5KpvJKyWicJ6sVKR0DhYsIYovBJlcICjmTWEQIdqgX/v7qqRXXOSNK2LKwgngbP6crfIHw3PWH+MzpheP7BV16cvujPbcMOfml2V/4XTjK9VFjywZENj2KHmwMDGlTzVsQXNf+AXTdpmYWfj6DlATOvMukQG5Wa4qWimba3FZOwAVRlT2QGCANe4jhgqpJ/RffW3mfC7oAZkRzZVlRUJdlnyoyY/oDoL0PTm8FthdAbg/tiLPWDH5ju1pFTQfCvUNh9RSit+pUIDZgAACD16hZgyUdPMCAI7QauE0E8/x1e6+09ZblprB3YV6CbwbLYtCYdbxfTF9bAeLn43i0ojmJY60e9kMWsTnikTxhVdJE+LWhQsTJqmJuXziKbryHdPgnbRZbzfjVELSyeY/6kNUcGK/bO0/ADt9HXy61tSB/OpLQTahfWtevb00KE512dPdp07Jd3K1op0Wom8b0rdOQGSTkDIu2Sk0NbOLi8MYqVmyfo0jhAOT+rkTOr/NOytOUbOHwkW3ijIV+6+SWD7FA0xtN1fqEVhelymHWNSIu6UhQlGd7ZWXpaRyF51VL7UHuIZzc9pkHGzja88LZe1BaMn0rwUhT1nNX6hxQrYYI2dMkB+rFPWjCbWlznMjmL8T017YHNAyJ2pkGyzCOfvCEhOoVMnkgWcPzulG0g3pXNmHPdjFcyDyOFZR3fee0o9gTl/kP6+dugh7lyKQ/2+l7tl2/60wmxEBUqRjUg/Ddbl37zGkYwk92ndBmJ4RwlZPH5WwOWkyNn8BtU/bKxefywjgKJ8B2n7bNeaiV1zjtELndJlTB0V4T+/x1KRUETcTGxsNCyIpbND+T2va41kG0XP41Prac+VPzp4FeJHjjoEwO96yRW17HZ4M+NhORdnV14j/JI/E+Lib0zSQyyrGOlT6hhAMT5cOU4EbQieaQCnAku5L9WOhyoUqOdUjZEYAuC0BlvMeTDifo5Gg+/QOwI=
Content-Length: 612
Accept-Language: zh-CN,zh-Hans;q=0.9
<?xml version="1.0" encoding="utf-8"?><soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/" xmlns:t="http://schemas.microsoft.com/exchange/services/2006/types"><soap:Header><t:RequestServerVersion Version="Exchange2007_SP1"/></soap:Header><soap:Body><m:GetFolder xmlns:m="http://schemas.microsoft.com/exchange/services/2006/messages" xmlns:t="http://schemas.microsoft.com/exchange/services/2006/types"><m:FolderShape><t:BaseShape>IdOnly</t:BaseShape></m:FolderShape><m:FolderIds><t:DistinguishedFolderId Id="root"></t:DistinguishedFolderId></m:FolderIds></m:GetFolder></soap:Body></soap:Envelope>
(正文)
响应
HTTP/1.1 200 OK (首行)
Cache-Control: private (响应报头)
Transfer-Encoding: chunked
Content-Type: text/xml; charset=utf-8
Server: Microsoft-IIS/10.0
request-id: 4a461ca8-c28c-77ec-1951-64fc8681f011
Alt-Svc: h3=":443",h3-29=":443"
X-CalculatedBETarget: TYCPR01MB5775.jpnprd01.PROD.OUTLOOK.COM
X-BackEndHttpStatus: 200
Set-Cookie: exchangecookie=01e2d2d1545c46f8b3545db3bccb666a; expires=Tue, 07-Nov-2023 01:13:38 GMT; path=/; secure; HttpOnly
X-RUM-Validated: 1
x-ms-appId: 000000004C28068C
x-EwsHandler: GetFolder
X-AspNet-Version: 4.0.30319
X-BeSku: WCS6
X-DiagInfo: TYCPR01MB5775
X-BEServer: TYCPR01MB5775
X-Proxy-RoutingCorrectness: 1
X-Proxy-BackendServerStatus: 200
X-FirstHopCafeEFZ: HND
X-FEProxyInfo: TY2PR0101CA0030.APCPRD01.PROD.EXCHANGELABS.COM
X-FEEFZInfo: HND
X-Powered-By: ASP.NET
X-FEServer: TY2PR0101CA0030
Date: Mon, 07 Nov 2022 01:13:37 GMT
Connection: keep-alive
<?xml version="1.0" encoding="utf-8"?><s:Envelope xmlns:s="http://schemas.xmlsoap.org/soap/envelope/"><s:Header><h:ServerVersionInfo MajorVersion="15" MinorVersion="20" MajorBuildNumber="5791" MinorBuildNumber="26" Version="V2018_01_08" xmlns:h="http://schemas.microsoft.com/exchange/services/2006/types" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"/></s:Header><s:Body><m:GetFolderResponse xmlns:m="http://schemas.microsoft.com/exchange/services/2006/messages" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:t="http://schemas.microsoft.com/exchange/services/2006/types"><m:ResponseMessages><m:GetFolderResponseMessage ResponseClass="Success"><m:ResponseCode>NoError</m:ResponseCode><m:Folders><t:Folder><t:FolderId Id="AQMkADAwATNiZmYAZC0zN2I3LTdhNzMtMDACLTAwCgAuAAADXA6FrZEdOEKiytJBKvMbjwEAY0j1UvuiiE6PiyKRVJ9D1QAAAgEBAAAAAA==" ChangeKey="AQAAABYAAABjSPVS+6KITo+LIpFUn0PVAAFW3WZd"/></t:Folder></m:Folders></m:GetFolderResponseMessage></m:ResponseMessages></m:GetFolderResponse></s:Body></s:Envelope>
(正文)
基本概念
URL
URL 唯一资源定位符,可以用来找网络上的资源
与之类似的还有
URI 唯一资源标识符,用来区分网络上的资源
URL具体由以下几部分构成
- 协议方案名(例如http)
- 登陆信息认证 (现在很少用)
- 服务器地址 (服务器IP地址)
- 服务器端口号 (服务器进程)
- 带层次的文件路径 (服务器进程中的某一个文件)
- 查询字符串 (浏览器向服务器传递的参数)
- 片段标识符 (区分网页中的不同部分)
其中,如果URL中需要有一些特殊的字符,比如说 / @ ?等等这些已经用来作为分隔符的符号,那么这些符号将转换成% 加上十六进制的ascii码,这个过程称之为编码
方法
用来说明HTTP请求的主要功能是什么,主要有以下几种方法
- GET
- POST
- PUT
- HEAD
- DELETE
- OPTIONS
- TRACE
- CONNECT
- LINK
- UNLINE
事实上,实际用的最多的只有GET和POST
GET
以下几种情况会触发GET请求
- 浏览器地址栏输入URL
- html中的link,a,img,script
- form表单可以构造GET请求
- ajax
特点:
GET请求的长度是没有限制的
body为空,querystring可以空,也可以不为空
因此,给浏览器传递参数,通常用querystring
POST
产生POST的场景
- form表单
- ajax
特点:
URL中通常没有query string
因此,给浏览器传递参数,通常通过body
GET和POST的区别
事实上,GET和POST并没有本质上的区别,我们使用上可以相互进行替代
细节上有下面的区别
- GET代表从服务器获取数据,POST代表向服务器提交数据
- GET数据放在querystring中,POST放在body中
- GET一般实现成幂等的(输入是确定的,那么输出就是确定的)
- GET请求的结果会被缓存,POST的不会(也就是当我们访问的URL不变时,浏览器会拿出上次我们访问时的缓存给我们看,如果不想要缓存的信息,想看最新的,就用ctrl+F5进行强制刷新)