目录
🎨1. HTTP 请求
🏰1.1 首行
👑1.2 URL
🚩1.3 Content-Type 和 Content-Length
🍊1.4 User-Agent
🌽1.5 Referer
⚽1.6 Cookie
🍩2. HTTP 响应
🌞2.1 HTTP 响应 首行
🍘3. 如何构造 HTTP 请求?
HTTP,Hyper Text Transfer Protocol ,即超文本传输协议,是一种应用广泛的应用层协议。
我们平时打开一个网站, 就是通过 HTTP 协议来传输数据的。
当我们在浏览器中输入一个百度搜索的 "网址" (URL) 时,浏览器就给百度的服务器发送了一个 HTTP 请求,百度的服务器返回了一个 HTTP 响应。这个响应结果被浏览器解析之后,就展示成我们看到的页面内容。(这个过程中浏览器可能会给服务器发送多个 HTTP 请求,服务器会对应返回多个响应,这些响应里就包含了页面 HTML,CSS,JavaScript,图片,字体等信息)。
1. HTTP 请求
一个 HTTP GET 请求包含以下四个部分:
header 内容为键值对结构,每个键值对占一行,键和值之间,使用 冒号+空格 来分割。键值对有 N 行,最后用空行作为结束的标记,空行类似于链表中的 null。
POST 请求:
所有的 HTTP 请求中,GET 请求占了绝大部分,其次是 POST,剩余的为其余方法。
POST 请求,body 一般不为空,而 GET 请求,body一般为空。
POST 和 GET 同为请求,那有什么区别吗?
GET 和 POST 表示不同的语义,HTTP 方法的语义,只是一种建议,程序猿实际使用的时候,不一定非要遵守。对于 body 有没有的问题,也不是上述说的那么绝对。GET 也可能有 body,但非常少见,而 POST 也可以没有 body,也只是比较少见。
那两者之间,到底有什么区别呢?没有本质区别!使用 GET 的场景,替换成 POST 也可以。而使用 POST 的场景,替换成 GET 也行。
但两者在使用习惯上存在区别:
1. GET 习惯上用来表示 “获取一个数据”,POST 用来表示 “提交一个数据”。
2. GET 一般没有 body,需要携带数据,则放到 URL 中。POST 一般有 body。
3. GET 请求通常会设计成幂等,而 POST 则无要求。
在编程中,幂等的理解就是,在数据不变的情况下,一个操作,无论执行多少次,结果都是一样的。幂等在服务器开发中非常关键,设计成幂等之后,请求就可以缓存,后续重复请求可以直接使用,提高了响应速度,节省运算资源。
4. GET 是可缓存的,POST 则不能
5. GET 请求可以被浏览器收藏,而 POST 不能。
1.1 首行
打开必应搜索,fildder 抓包之后的首行:
版本号有:
HTTP/1.0
HTTP/1.1
HTTP/2
HTTP/3
HTTP/1.1 是最主流的版本,绝大部分互联网的网站都是用的 1.1。
一般看到的请求大部分是 GET,但在登录时,或是上传文件时,可以看到 POST。
1.2 URL
URL :唯一资源定位符,描述了网络上唯一的一个资源。这个概念并非专属于 HTTP,很多协议都会用到 URL。
URL 的结构大概是这几个部分:
也可以举一个形象一点的例子:
在 URL 中,已经写了当前要访问的服务器是谁,为什么在 Host 中,还要再写一遍呢?
大多数情况下,Host 中的值和 URL 中的域名是一致的。但如果,当前我们访问的服务器,不是直接访问,而是通过 ”代理“ 来访问的,那么 Host 和 URL 就可能不一样。
1.3 Content-Type 和 Content-Length
Content-Type 描述了 body 的数据格式,Content-Length 描述了 body 的长度(字节)。这两个属性只有那些有 body 的请求才有。如果一个没有 body 的 GET 请求,它的 header 中就没有这两个属性。
application/json ,表示数据的格式,描述了数据是按照 json 格式来组织的。 json 格式,用
{ } 来表示,里面包含若干键值对,键和值之间,用:分割,而键值对间用,分割。
charset = utf-8,表示数据的字符集。
Content-Type 还有其他写法:Content-type: application/x-www-form-urlencoded。
Content-Type 作为请求时,最多只有上述两种写法。
而作为响应,Content-Type 还有以下几种写法:
text/html
text/css
application/javascript
application/json
image/jpg
image/png
......
有了这两个属性之后,浏览器/http 服务器,才能够认识到当前的 body,并正确的进行解析。
1.4 User-Agent
User-Agent,简称 UA。这一属性用来描述用户使用的浏览器版本以及操作系统的版本。
早期浏览器种类繁多,功能参差不齐,于是人们便发明了 User-Agent,这样就可以在请求中,告诉网站服务器,当前的上网设备是什么,这样一来,服务器就可以根据客户端的种类,返回相应的页面了。但随着时间的推移,浏览器发展到如今,相互间的差别越来越小,UA 也没必要区分浏览器类型。现在 UA 的一个重要用途,就是区分用户是手机/PC/平板。
1.5 Referer
Referer,描述了当前这个页面,是从哪个网页跳转过来的。如果直接在地址栏输入 url,此时请求中没有 referer。从收藏夹中点开某个链接,请求里也是没有 referer 的。
1.6 Cookie
Cookie 也是键值结构,键和值之间使用 = 分割,而键值对之间只用;分割。键值对具体意思,只有这个网站的开发者知道,这里的键值对是程序员自定义的数据,不同网站有不同的键值对,也就有了不同的含义。
Cookie 从服务器中来——当浏览器访问服务器时,服务器会在 HTTP 响应中,通过 Set-Cookie 字段,把 Cookie 的键值对返回给浏览器,浏览器接收这个数据,会在本地存储。
Cookie 再到服务器中去——浏览器在下一次请求时,把 cookie 带回给服务器。cookie 是由服务器来使用的。cookie 在浏览器这边,只能算 ”暂存“。
Cookie 是浏览器本地存储数据的机制,最典型的应用,就是存储用户的身份信息。
Cookie 的作用跟我们去医院看病使用的就诊卡很相似。第一次去医院看病,医院会让你办理就诊卡。办理就诊卡需要你的身份证、电话等信息。不管看什么科,医生见你的第一句话就是,刷一下就诊卡。那是因为,在就诊卡中有一个简单的芯片,存储了一个身份标识。在医院的机子一刷,电脑就会出现你的身份信息,包含姓名,身份证,年龄,性别,以及以往病例,当前开出的诊断,当前开出的药等。身份信息存储在医院的信息系统中。就诊卡就相当于 Cookie!!
2. HTTP 响应
响应可能是经过压缩的,本身是 http 文件,压缩成了二进制,能减少网络传输的数据量,节省带宽。把数据压缩,本质上是用 cpu 资源,换带宽资源。
响应中的 body ,不仅包含 html,还包括 css、js、图片、字体等,那些浏览器上显示出来的内容,都是服务器返回的响应,携带的数据交给浏览器。
2.1 HTTP 响应 首行
HTTP 响应首行中,包含版本号以及状态码。
状态码就是数字,用来表示这次请求执行成功还是失败以及失败的原因。HTTP 中提供了很多状态码:
类别 | 原因短语 | |
1XX | Informational (信息性状态码) | 接收的请求正在处理 |
2XX | Success (成功状态码) | 请求正常处理完毕 |
3XX | Fedirection (重定向状态码) | 需要进行附加操作以完成请求 |
4XX | Client Error (客户端错误状态码) | 服务器无法处理请求 |
5XX | Server Error (服务器错误状态码) | 服务器处理请求出错 |
上述请求和响应的格式,可用下图表示:
3. 如何构造 HTTP 请求?
我们可以通过什么方式来构造一个 HTTP 请求?
1. 直接通过浏览器地址栏,输入一个 url,来构造出一个 GET 请求
2. html 中,一些特殊标签,也会触发 GET 请求,如
1) link
2) script
3) img
4) a
3. form 表单,可以触发 GET 和 POST 请求。
前两种,我们比较熟悉了,下面介绍第三种:
html"><form action="https://www.sogou.com/abc" method="get">
<input type="text" name="aaa">
<input type="text" name="bbb">
<input type="submit" value="提交">
</form>
html"><form action="https://www.sogou.com/abc" method="post">
<input type="text" name="aaa">
<input type="text" name="bbb">
<input type="submit" value="提交">
</form>
4. Ajax
Asynchronous JavaScript and XML ,缩写 Ajax,即异步的 JavaScript 和 XML 。
异步可能大家不熟悉,可是同步 (synchronized) 呢?在线程那篇文章中介绍的锁概念,它的英语单词也是 synchronized 。在计算机中,一个术语,在不同的场景下会有多种含义。synchronized 在加锁场景下,意味着多线程环境下,同一个资源,被一个线程访问时,其他也想访问的线程只能阻塞等待。只有等到这个线程解锁之后,其他线程才能抢占式访问。它的反义词是,互斥。而在 IO 场景下,synchronized 意味着请求的发起者,自行获取响应。而 Asynchronous 意味着请求的发起者不关心结果,而是由被请求者计算出结果之后,把结果推送给发起者。
XML 位于网络应用层的一种自定义的数据格式,同 html 一样,都是由标签构成的。 区别就在于,html 支持哪些标签,且这些标签具体啥含义,都是标准委员会规定的;而 xml 的标签都是自定义的。
ajax 是前端和后端异步交互的一种方式。推荐使用 jQuery 里面提供的 ajax api。
前端引入第三方库十分方便,可以直接写网络地址。
html"><script>
jQuery.ajax({
// ajax 可以有以下属性:
// url 当前请求要发给谁
url:"https://www.baidu.com/",
type:"get",
// 请求成功的话,使用回调函数来处理响应
success:function(body){
// 写处理响应的代码
}
});
</script>
success 后面是回调函数,会在服务器返回一个正确的响应时,被浏览器自动执行。这个执行过程就是 “异步” 的。
在上述 js 代码中,把请求发出去之后就不管了,继续执行后续代码,直到响应回来了,浏览器会调用上述的 success 回调函数,执行处理响应的逻辑。
html"><script>
jQuery.ajax({
// ajax 可以有以下属性:
// url 当前请求要发给谁
url:"https://www.baidu.com/",
type:"post",
data:"这是body",
contentType:"text/plain",
// 请求成功的话,使用回调函数来处理响应
success:function(body){
// 写处理响应的代码
console.log(body);
}
});
</script>
这是 ajax 的一个非常典型的问题,跨域问题。举例子:现在运行 ajax 的代码的页面域名为 abc.com,但是 ajax 里的请求,访问的域名是 def.com。两个域名不一样的话,哪怕服务器响应了数据,浏览器还是不能处理,还是要报错。这不是 bug,而是浏览器为了限制安全问题引入的保护机制,防止 a 网站的页面请求 b 网站的数据。
上述构造请求,都是要写代码的,但我们也可以用一些现成的工具,直接构造出 HTTP 请求,比如 postman。