网站认知与交互

前提认识:

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-请求不会被缓存，也不会保留在浏览器历史记录中 用于：密码等安全性要求比较高的场合，提交的数据量比较大：发布文章，上传文件。