网站认知与交互

前提认识:

HTTP协议

• HTTP（HyperText Transfer Protocol，超文本传输协议）最早就是计算机与计算机之间沟通的一种标准协议，这种协议规范了通讯内容的格式以及各项内容的含义。说白了，在web领域，HTTP协议就规范了客户端如何向服务器发送请求，以及服务器如何响应数据到客户端。
• 随着时代的发展，技术的变迁，这种协议现在广泛的应用在各种领域，也不仅仅局限于计算机与计算机之间，手机、电视等各种智能设备很多时候都在使用这种协议通讯，所以一般现在称 HTTP 为端与端之间的通讯协议。
• Web 属于 B/S 架构的应用软件，在 B/S 架构中，浏览器与服务器沟通的协议就是 HTTP 协议，作为一个合格的 Web 开发者，了解 HTTP 协议中约定的内容是一门必修课。

约定形式

1. 客户端通过随机端口与服务端某个固定端口（一般为80）建立连接 三次握手
   • 客户端向服务器发送一个连接请求
   • 服务器向客户端返回一个确认信息
   • 客户端将连接请求及这个确认信息发送服务器
2. 客户端通过这个“发送请求”连接到服务端（这里的请求是名词）
3. 服务端监听端口得到的客户端发送过来的请求
4. 服务端通过连接响应给客户端状态和内容

约定内容

• 请求 / 响应报文格式
• 请求方式 —— GET / POST / PUT / DELETE / OPTION...
• 响应状态 —— 200 / 404 / 302 / 304 ...
• 预设的请求 / 响应头

1.请求报文

• 请求行
  GET http://127.0.0.1:3000/getData HTTP/1.1
  请求方式 + 空格 + 请求路径 + 空格 + HTTP 协议版本

• 请求头
  客户端想要告诉服务端的一些额外信息，以下为常见的请求头(不用刻意去记忆)：
  

• 请求体
  这次请求客户端想要发送给服务端的数据正文，一般在 GET 请求时很少用到，因为 GET 请求主观上都是去“拿东西”。

2.响应报文

• 状态行
  HTTP/1.1 200 OK
  HTTP 协议版本 + 空格 + 状态码 + 空格 + 状态描述

• 响应头
  服务端想要告诉客户端的一些额外信息，常见的有以下：
  

• 响应体
  这次请求服务端想要返回给客户端的数据正文，一般返回的都是 HTML，也可以返回数据， JavaScript 或者 CSS（需要修改响应头中的响应类型）。

• 补充：状态码
  状态代码由三位数字组成，第一个数字定义了响应的类别，且有五种可能取值。
  - 1xx：指示信息 —— 表示请求已接收，继续处理。
  - 2xx：成功 —— 表示请求已被成功接收、理解、接受。
  - 3xx：重定向 —— 要完成请求必须进行更进一步的操作。
  - 4xx：客户端错误 —— 请求有语法错误或请求无法实现。
  - 5xx：服务器端错误 —— 服务器未能实现合法的请求。

网络基础概念

• IP 地址
  设备在某一个网络中的地址，目前最常见的格式：[0-255].[0-255].[0-255].[0-255] 即为四个 0-255 的数字组成。本质是四组八位的二进制数。
  作用就是标识一个网络设备（计算机、手机、电视）在某一个具体的网络当中的地址。
  127.0.0.1 是本地回环地址 localhost：用来测试本机服务器是否连通。

• 域名
  由于 IP 地址都是没有规律的一些数字组成的，很难被人记住，不利于广泛传播，所以就有人想出来要给 IP 起名字（别名）。

• 特殊的域名
  localhost 含义为本地主机，对应127.0.0.1 。这是一个保留域名，主要用于本地测试。

-DNS domain name system
通过宽带运营商提供的服务器解析一个域名背后对应的 IP，这个过程叫做 DNS 寻址，帮你完成 DNS 寻址过程的服务器叫做 DNS 服务器。
hosts 文件
操作系统在发起对 DNS 服务器的查询请求之前，会优先检查本机的 hosts 文件。如果这个文件中包含了对当前需要解析的域名的配置，则不再发起对 DNS 服务器的请求，直接使用 hosts 文件中的配置。

• 端口
  计算机本身是一个封闭的环境，就像是一个大楼，如果需要有数据通信往来，必须有门，这个门在术语中就叫端口，每一个端口都有一个编号，每台计算机只有 65536 个端口（0-65535）。
  可以通过在命令行中运行： netstat -an 命令监视本机端口使用情况：

• URL
  URL（Uniform Resource Locator），统一资源定位符，通俗点来说就是表示网络当中某一个网页的完整访问地址，它具有一定的格式：
  -- 协议名称://域名:端口/文件目录(文件名称)?key=value&key2=value2
  例如：https://itcast.cn:80/schools/students?id=18&name=zce

**总结请求响应流程 **

1. 用户打开浏览器
2. 地址栏输入我们需要访问的网站网址（URL）
3. 浏览器通过 DNS 服务器 获取即将访问的网站 IP 地址
4. 浏览器发起一个对这个 IP地址的 （请求）
5. 服务端监听指定的 端口 的服务器软件接收到这个请求，进行相应的处理（处理）
6. 服务端将处理完的结果返回给客户端浏览器（响应）
7. 浏览器接收服务端返回的结果并相应相应的处理(渲染)

GET与POST
请求在网站的访问过程中很常见，并且请求分为多种方式：GET、POST、PUT、DELETE、OPTIONS等。其中GET和POST最常用。

GET请求

常见的发起GET请求的方式

• 地址栏访问
• src/href
• 表单：method='get'
• ajax:type设置为get

网页中有许多效果使用的就是GET请求：

• 各种搜索框
• 各种详情页面
• 大部分超链接

GET方式提交数据的格式

1. 格式:index.php?userName=jack&password=123
2. 参数名与参数值之间没有空格
3. 参数值不需要使用单双引号包括

GET方式提交数据的特点：

1. get方式在url后面拼接参数，只能以文本的形式传递数据
2. 传递的数据量小，4KB左右（不同浏览器会有差异）
3. 安全性低，会将数据显示在地址栏
4. 速度快，通常用于对安全性要求不高的请求

POST请求
字面上理解，post就是指发送，提交,它可以向指定的资源提交要被处理的数据。
GET方式提交数据通过URL传递到请求的页面，提交的数据量一般较小，用于请求页面数据。此外，GET方式传递的数据安全性低, 对于密码等隐私信息、文件上传必须使用POST方式提交。

特点
1-post 方式 安全性比较高
2-传递数据量大，请求对数据长度没有要求
3-请求不会被缓存，也不会保留在浏览器历史记录中
用于：密码等安全性要求比较高的场合，提交的数据量比较大：发布文章，上传文件。