HTTP协议在前端开发中的应用

• 工具
• HTTP协议实现的过程
• HTTP协议的含义及格式

调试工具

首先，前端开发的一个很重要的工具就是chrome浏览器。其实像火狐浏览器也很很好的调试工具，但我更喜欢使用chrome的。
按下F12就能调出这个管理控制台。

点击Network后就会出现所有的网络请求。
当我点击其中一个网络请求时，可以点击它的header来获取它的头信息。

其中包含了general，response headers和request header。

HTTP协议实现的过程

当点击进行跳转的时候浏览器到底发生了什么？

当点击跳转时，客户端（也就是我的浏览器）发送了一个http request请求，然后请求到了web服务器后，它会根据你输入的url进行资源定位，也就是传说中的路由。然后web服务器根据url定位到后再发送一个response，告诉我定位的结果及我需要的内容。
当然在客户端与服务端进行http请求时，率先进行了tcp链接的操作。
浏览器先给web服务器发送tcp连接。连接后，浏览器再给web服务器发送request请求。然后web服务器给浏览器发送response请求。最后他们的tcp连接完成，断开连接。所以每次请求都是先进行tcp连接再进行http请求和响应。

HTTP协议的含义及格式

url解析

url就是统一资源定位器。也就是网络请求的地址。它住在这个地方，我们根据它给我们的地址去找它。
http代表我们用的是哪个协议。目前还有https协议也比较多。
这个localhost表示的是host name，就是它住在哪个房子里。
8888代表的是端口。就是它在这个房子的哪一层里。当然端口并不是必须要写的，因为不写它会有一个默认端口，80。
后面的/hello表示路径，表示你在这一层的哪个房间，房间里的哪一个人。
就这样，web服务器就能根据url找到我们想要的东西了。

request解析

一般的http请求包含以下三部分：请求行、消息报头、请求正文。

第一行：GET / HTTP/1.1
GET表示一个读取请求，将从服务器获得网页数据，/表示URL的路径，URL总是以/开头，/就表示首页，最后的HTTP/1.1指示采用的HTTP协议版本是1.1。目前HTTP协议的版本就是1.1，但是大部分服务器也支持1.0版本，主要区别在于1.1版本允许多个HTTP请求复用一个TCP连接，以加快传输速度。
从第二行开始，每一行都类似于Xxx: abcdefg：
第二行：www.sina.com.cn
代表的是请求的域名。

response 解析

HTTP响应分为Header和Body两部分（Body是可选项），我们在Network中看到的Header最重要的几行如下：

HTTP/1.1 200 OK

200表示一个成功的响应状态，后面的OK是说明。失败的响应有404 Not Found：网页不存在，500 Internal Server Error：服务器内部出错，等等。其他还有304表示读取缓存，301，302表示资源重定向。

Content-Type:text/html

Content-Type指示响应的内容，这里是text/html表示HTML网页。请注意，浏览器就是依靠Content-Type来判断响应的内容是网页还是图片，是视频还是音乐。浏览器并不靠URL来判断响应的内容，所以，即使URL是http://example.com/abc.jpg，它也不一定就是图片。

post和get方法的区别

请求方法（所有方法全为大写）有多种，各个方法的解释如下：
GET 请求获取Request-URI所标识的资源
POST 在Request-URI所标识的资源后附加新的数据
HEAD 请求获取由Request-URI所标识的资源的响应消息报头
PUT 请求服务器存储一个资源，并用Request-URI作为其标识
DELETE 请求服务器删除Request-URI所标识的资源
TRACE 请求服务器回送收到的请求信息，主要用于测试或诊断
CONNECT 保留将来使用
OPTIONS 请求查询服务器的性能，或者查询与资源相关的选项和需求
GET和POST的主要区别在于GET一般没有请求体，请求的时候不会带数据。所以当数据量少或不需要传数据的时候可以用GET。而POST一般会有请求体，一般数据较多的时候会使用POST。