目录
1. 服务器相关的基础概念
1.1 服务器
概念：服务器是对外 提供服务 的机器设备。
作用：在上网过程中，负责 存放 资源或 对外提供资源 的计算机（电脑）。
1.2 客户端
概念：在上网过程中，负责 获取和消费 资源 的网络设备（电脑/手机/pad）。
作用：将 互联网世界 中的 Web 资源 加载、并呈现到 浏览器窗口 中供用户使用。
在前端开发中，客户端特指“ Web 浏览器 ”。
1.3 服务器对外提供的资源
1.4 数据也是资源
网页中的 数据 ， 也是服务器对外提供的一种资源 。例如 股票数据 、 各行业排行榜 等。
论数据的重要性 —— 数据是网页的灵魂
离开数据之后，这个网页再漂亮，也没有实际的作用。
1.5 资源与 URL 地址
URL 地址的概念
URL（全称是 UniformResourceLocator） 中文叫 统一资源定位符 ，用于 标识互联网上每个资源的唯一存放位置 。
浏览器只有通过URL地址，才能正确定位资源的存放位置，从而成功访问到对应的资源。
URL 地址用来表示服务器上 每个资源 的确切 访问路径 。
一个 标准的 URL 地址 主要由以下 4 个部分构成：
URL 地址 - 协议（protocol）
概念：协议是 网络协议 的简称，用来保证 通信的双方 能 读懂 彼此发送过来的消息内容。
URL 地址 - 主机名（hostname）
概念：主机名用来标识互联网中 服务器的唯一性 。
URL 地址 - 端口号（port）
概念：端口号是 0 - 65535 之间的整数，它的主要作用是表示一台计算机中的特定进程所提供的服务。
URL 地址 - 端口号的使用注意点
在 http 协议中，如果 URL 地址中的端口号是 80，则 :80 端口可以省略不写。例如：
- http://www.xxx:80/images/img1-min.jpg 可以简写为
- http://www.xxx/images/img1-min.jpg
注意：只有 :80 端口可以被简写！
URL 地址 - 路径（path）
概念：路径用来表示资源在服务器上 具体的存放位置 。
客户端与服务器通信的过程
客户端与服务器之间的通信过程，分为 请求 - 响应 两个步骤。其中：
- 请求的概念：客户端通过网络去找服务器要资源的过程，叫做“请求”
- 响应的概念：服务器把资源通过网络发送给客户端的过程，叫做“响应”
图解客户端与服务器通信的过程
互联网中的每一个资源，都是通过 请求-响应 的方式从服务器获取回来的
查看客户端与服务器通信的过程
网页中的数据如何从服务器 获取 ？网页中输入的数据如何 送给 服务器？
Ajax ！
1.6 什么是 Ajax
Ajax 是浏览器中的技术：用来实现 客户端网页 请求 服务器的数据 。
它的英文全称是 A synchronous J avascript A nd X ML，简称 Ajax。
2. Ajax 的基础用法
使用 Ajax 请求数据的 5 种方式
客户端浏览器在请求服务器上的数据时，根据 操作性质 的不同，可以分为以下 5 种常见的操作：
2.1 POST 请求
POST 请求用于 向服务器新增数据 ：
2.2 GET 请求
GET 请求用于 从服务器获取数据 ：
2.3 DELETE 请求
DELETE 请求用于 删除服务器上的数据 ：
2.4 PUT 请求
PUT 请求用于 更新 服务器上的数据（侧重于 完整更新 ：例如更新用户的完整信息）：
2.5 PATCH 请求
PATCH 请求用于 更新 服务器上的数据（侧重于 部分更新 ：例如只更新用户的手机号）：
3. axios
axios 专注于数据请求 的库。
中文官网地址： http://www.axios-js.com/
英文官网地址： https://www.npmjs.com/package/axios
3.1 axios 的基础语法
axios 的基本语法如下：
3.2 基于 axios 发起 GET 请求
测试 GET 请求 的 URL 地址 为 https://。。。/api/getbooks
打印 result 得到的结果：
GET 请求的 查询参数
刚才查询回来的是所有图书的列表数据，如果想 指定查询的条件 ，可以通过 params 选项 来指定 查询的参数 ：
查询参数的 本质
在使用 Ajax 发起 GET 请求时的参数，会以 ?键=值 的形式拼接到 URL 地址的末尾
注意：? 后面的都是查询参数，查询参数的键和值之间使用 = 进行分隔
在 GET 请求中携带 多个查询参数
如果要携带多个参数，只需要在 params 对象 中指定 多个查询参数项 即可。示例代码如下：
最终，在 URL 地址的末尾，多个查询参数之间使用 & 符号进行分隔：
https://xxx/api/getbooks ? id=1 & bookname=love
URL 编码*
在 URL 地址中 不允许出现中文 、 空格等特殊字符 ，因此浏览器会 自动 对 URL 地址内的中文进行 转换处理 。例如：
浏览器内置了 encodeURI() 和 decodeURI() 两个方法，用来实现 URL 的 编码 和 解码 处理：
result 是 axios 套壳 的结果
服务器端响应给 axios 的 原始数据 ，被 axios 在外面“ 套了一层壳 ”，示意图如下：
在函数的形参中使用解构赋值
使用 解构赋值 ，可以轻松地 获取到 axios 请求回来的 真实数据 。示例代码如下：
3.3 基于 axios 发起 POST 请求
使用 axios 发起 POST 请求时，只需要将 method 属性 的值设置为 ' POST ' 即可：
POST 提交数据 的方式
通过 Chrome 浏览器的 Network 网络请求面板，可以发现 POST 请求提交的数据， 并没有拼接到 URL 地址的末尾
原因：各个浏览器对 URL 的长度 有限制。
3.4 GET 和 POST 提交数据的区别
POST 为了能够提交大量的数据，所以 没有把数据拼接到 URL 的末尾 ；而是放到了独立的“ 请求体 ”中。
4. 请求报文 & 响应报文
4.1 什么是通信
通信，就是 信息的传递和交换 。
通信三要素：
- 通信的主体
- 通信的内容
- 通信的方式
4.2 通信协议
互联网的http协议
4.3 http协议
4.4 什么是请求报文和响应报文
由于 HTTP协议属于客户端浏览器和 服务器之间的通信协议。 因此， 客户端发起的请求 叫做 HTTP请求，客户端发送到服务器的消息，叫做 HTTP请求消息 ，又叫做 请求报文 。
服务器 响应给 客户端的消息内容 ， 叫做 HTTP响应消息 ，也叫做 响应报文 。
客户端与服务器通信的过程是基于 请求 与 响应 的。其中：
- 请求报文规定了客户端以什么格式把数据发送给服务器
- 响应报文规定了服务器以什么格式把数据响应给客户端
4.5 请求报文 - 格式
请求报文 由 请求行 （request line）、 请求头部 （ header ）、 空行 和 请求体 4 个部分组成。图示如下：
注意：
- 在浏览器中，GET 请求比较特殊， 没有请求体。
- 在浏览器中，POST、PUT、PATCH、DELETE 请求有请求体。
4.6 响应报文 - 格式
响应报文 由 状态行 、 响应头部 、 空行 和 响应体 4 个部分组成。图示如下：
4.7 http 响应状态码
概念：http 响应状态码（Status Code）由 三位数字 组成，用来标识 响应成功与否 的状态。
作用：客户端浏览器根据响应状态码，即可判断出这次 http 请求是 成功 还是 失败 了。
常见的 http 响应状态码
4.8 http 响应状态码 Vs 业务状态码
1. 所处的位置不同：
- 在状态行中所包含的状态码，叫做“响应状态码”
- 在响应体的数据中所包含的状态码，叫做“业务状态码”
2. 表示的结果不同：
- 响应状态码只能表示 这次请求的 成功与否（成功或失败）
- 业务状态码用来表示 这次业务处理的 成功与否
3. 通用性不同：
- 响应状态码是由 http 协议规定的，具有通用性。每个不同的状态码都有其标准的含义，不能乱用。
- 业务状态码是后端程序员自定义的，不具有通用性。
5. 接口相关的基础概念
5.1 接口的概念
专门对外提供数据资源的服务器，被称为“ 数据服务器 ”。
数据资源的请求地址，叫做“数据接口”，简称“接口”或“API接口”。
使用 Ajax 请求数据时， 被请求的 URL 地址 ，就叫做 数据接口 （简称： 接口 或 API 接口 ）。
同时，每个接口必须有对应的 请求方式 。例如：
5.2 接口文档的概念
接口文档 就是 接口的使用说明书 ，它是我们调用接口的依据。
其中包含了接口的描述信息
5.3 接口测试工具
接口测试工具能让我们在 不写任何代码 的情况下，对接口进行 调用 和 测试 ，从而检查接口能否被正常访问。
Postman 
官方下载地址 ： https://www.postman.com/downloads/
使用 Postman 测试 GET 接口
使用 Postman 测试 POST 接口
