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

记录:post通常代表新增,put通常代表修改


HTTP协议在前端开发中的应用
  • 工具
  • HTTP协议实现的过程
  • HTTP协议的含义及格式

   1.调试工具

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

点击Network后就会出现所有的网络请求。 
当我点击其中一个网络请求时,可以点击它的header来获取它的头信息。 
头部信息1
其中包含了general,response headers和request header。

   2.HTTP协议实现的过程

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

  3.HTTP协议的含义及格式

url解析

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

request解析

一般的http请求包含以下三部分:请求行、消息报头、请求正文。 
request 
第一行: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 解析

response 
HTTP响应分为Header和Body两部分(Body是可选项),我们在Network中看到的Header最重要的几行如下:

HTTP/1.1 200 OK
  • 1

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

Content-Type:text/html
  • 1

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。


HTTP协议在前端开发中的应用
  • 工具
  • HTTP协议实现的过程
  • HTTP协议的含义及格式

调试工具

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

点击Network后就会出现所有的网络请求。 
当我点击其中一个网络请求时,可以点击它的header来获取它的头信息。 
头部信息1
其中包含了general,response headers和request header。

HTTP协议实现的过程

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

HTTP协议的含义及格式

url解析

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

request解析

一般的http请求包含以下三部分:请求行、消息报头、请求正文。 
request 
第一行: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 解析

response 
HTTP响应分为Header和Body两部分(Body是可选项),我们在Network中看到的Header最重要的几行如下:

HTTP/1.1 200 OK
  • 1

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

Content-Type:text/html
  • 1

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。

猜你喜欢

转载自blog.csdn.net/qq_36573925/article/details/80396199