Web高阶课堂笔记6（HTTP协议和静态Web服务器）

HTTP协议和静态Web服务器

HTTP协议

HTTP协议

HTTP协议介绍

HTTP协议的全称（HyperText Transfer Protocol），即 超文本传输协议。

超文本是超级文本的缩写，指 超越文本限制或者 超链接（a标签），比如图片、音乐、视频、超链接等等都属于超文本。

HTTP协议的制作者是蒂姆·伯纳斯·李。于1991年设计出来的，HTTP协议设计之前目的是传输网页数据，现在允许传输任意类型的数据。

传输HTTP协议格式的数据基于TCP传输协议的，发送数据之前需要先建立连接（常连接）。

HTTP协议的作用

规定了浏览器和Web服务器通信数据的格式，即浏览器和web服务器通信需要HTTP协议。

浏览器访问web服务器的通信过程

通信效果图：

1. 访问一个浏览器先指向DNS（域名解析服务器）
2. 在域名解析服务器中网址变成一串IP地址，根据IP地址找到对应外部服务器（web服务器）。默认端口号：80
3. 有了IP地址和端口号可以于服务器建立连接
4. 建立连接后对服务器发送http数据请求
5. 根据请求返回相对应数据

URL

URL概念

URL（Uniform Resoure Locator）：表达统一资源定位符，即网络资源地址【我们常说的网址】

URL的组成

URL的样子:http://news.163.com/18/1122/10/E178J2O4000189FH.html

URL组成部分：

协议部分：https:// 、 http:// 、 ftp://
域名部分：news.163.com
资源路径部分：/18/1122/10/E178J2O4000189FH.html

域名：IP地址的别名，用“点”进行分割使用英文字母和数字组成的名字，使用域名目的为了方便记住某台主机IP地址。

URL的扩展：
http://news.163.com/hello.html?page=1&count=10
查询参数部分：?page=1&count=10【第一页数据有10个，一般在做翻页、爬虫时候使用】

参数说明：
？后面的page表示第一个参数。后面的参数用&进行连接

查看HTTP协议的通信过程

谷歌浏览器开发者工具的使用

首先安装Google Chrome浏览器，然后Windows和Linux平台按F12调出开发者工具、MAC OS 选择视图->开发者->开发者工具或者直接使用option+command+i这个快捷键或者网页右击选择检查。

开发者工具效果图：

开发者工具标签选项说明：

标签栏有几个选项，一般常用以下四个：

• 元素(Elements)：用于查看或修改HTML标签
• 控制台(Console)：执行 js 代码
• 源代码(Sources)：查看静态资源文件，断点调试 js 代码
• 网络(Network)：查看HTTP协议的通信过程

开发者工具使用效果图：

开发者工具的使用说明：

• 点击Network标签选项
• 在浏览器的地址栏输入百度的网址，就能看到请求百度首页的http的通信过程
• 这里的每项记录都是请求+响应一次的过程

查看HTTP协议的通信过程

响应体：用浏览器请求百度服务器时，百度服务器返回的信息。

view parsed：原始的请求头，和响应头

HTTP请求报文

浏览器发送给web服务器程序的数据（http协议的数据）

HTTP请求报文介绍

HTTP最常见的请求报文有两种：

• GET方式的请求报文。获取web服务器数据。
• POST方式的请求报文。向web服务器提交数据。【一般都是登陆的时候使用，登陆时候发送数据】

HTTP GET请求报文分析

HTTP头信息解：https://www.cnblogs.com/wanghuaqiang/p/12093563.html

GET请求报文说明：

HTTP POST请求报文分析

请求报文说明：
基本和GET请求报文一致，但是多了个请求体以及请求行中的请求方式发生变化。

GET 、POST请求报文对比总结

• 一个HTTP请求报文可以由请求行、请求头、空行和请求体四个部分组成。
• 请求行是由三个部分组成
  - 请求方式
  - 请求资源路径
  - HTTP协议版本</