1 . 客户端与服务器
客户端
在前端开发中 : 客户端特指 “Web 浏览器” 。
实际上线后 : 只要可以访问服务器的设备都属于客户端（手机、平板、电脑中的各种软件都可以是客户端）。
服务器
概念 ： 服务器是给客户端提供服务的设备。
作用 ： 在用户上网过程中，所有的网络资源不会存储到客户端, 需要从服务器上请求,请求服务器专门负责存放资源和对外提供服务。
客户端与服务器通信的过程
过程分为 : 请求 、响应 两个步骤
- 请求 ： 客户端通过网络向服务器要资源的过程
- 响应 ： 服务器通过网络给客户端发送资源的过程
URL 地址
全称是统一资源定位符
- 作用 ： 表示服务器上每个资源的访问路径
- 组成 ： 一个完整的url地址分为 协议、域名(IP地址)、端口号、资源存放路径。
- 协议 ： 用来规范数据传递接收的格式。常见
http和https - 主机名 ： 又称域名，对应一个 IP 地址，用来找到电脑主机在网络中存放的位置。
- 端口号 ： 电脑中程序的出入口，取值范围 0~65535 之间的数字。用来找到对应程序的。（80 为
http，443 为https） - 资源存放路径 ： 通过程序找到资源在服务器中的具体存放地址。
- 协议 ： 用来规范数据传递接收的格式。常见
注意 :
- 在 http 协议中，如果 URL 地址中的端口号是 80，则 :80 端口可以省略不写
- 在 https 协议中，如果 URL 地址中的端口号是 444，则 :443 端口可以省略不写
https://juejin.cn:443/user/642585808088190
https://juejin.cn/user/642585808088190
2 . Ajax
背景 :
服务器对外提供的所有内容都属于资源。而网页中的数据，也是服务器对外提供的一种资源。要获取数据就需要用 Ajax 技术
什么是 Ajax
Ajax 全称是 : Asynchronous Javascript And XML
- 是浏览器中的技术：用来实现客户端网页请求服务器的数据。。
Ajax 的作用
异步发送 JavaScript 和 XML
Ajax 请求数据的 5 种方式
- POST : 向服务器推送数据
- GET : 从服务器获取数据
- DELETE : 删除服务器上的数据
- PUT : 更新服务器上的数据（侧重于完整更新：例如更新用户的完整信息）
- PATCH : 更新服务器上的数据（侧重于部分更新：例如只更新用户的手机号）
3 . axios
什么是 axios
前端使用最多的 数据请求 库
中文官网地址：http://www.axios-js.com/
英文官网地址：https://www.npmjs.com/package/axios
axios 使用方法
- 本地 axios.js 文件资源引入
<script src="./lib/axios.js"></script> - 在线 axios 资源引入,方法同上
- 模块化导入
具体使用查看官网文档
axios 的基础语法
axios 发起请求, .then 接收处理响应
method: 请求的类型 ( post、get… )url: 请求的 URL 地址params: 用于传递参数 ( get 请求的查询参数 ) ,没有参数可以省略data: 用于传递参数 ( post 请求体参数 ).then((res) => {成功后执行的代码}: 成功之后的回调函数- 形参中的
res是请求成功之后拿到的结果 ( 请求的数据也在里面 ) - 函数体 中是请求成功后执行的代码 ( 可用于操作数据 )
- 形参中的
axios({
method: '请求的类型',
url: '请求的URL地址'
}).then((result) => {})
axios 发起 get (无参) 请求
<button>按钮</button>
<!-- 引入本地资源的 axios.js 文件资源 -->
<script src="./lib/axios.js"></script>
<script>
// 绑定事件
document.querySelector('button').onclick = function () {
// 发起ajax中的get请求
axios({
method: 'GET',
url: '服务器路径'
}).then((res) => {
console.log(res.data);
})
}
</script>
axios 发起 get (带参) 请求
axios({
method: 'GET',
url: '服务器路径',
params: {
id: 1,
name: '响响'
}
}).then(function (res) {
console.log(res.data);
})
GET 请求的查询参数本质:
会以 ? 键=值 的形式拼接到 URL 地址的末尾,多个查询参数之间使用 & 符号进行分隔
http://服务器路径?id=1&name=响响
axios({
method: 'GET',
// GET参数本质，就是在路径后面 ? 后用 & 连接 = 分隔键值对
url: 'http://服务器路径?id=1&name=响响',
}).then(function (res) {
console.log(res.data);
})
URL 编码 与 解码
什么是编码 : 在 URL 地址中不允许出现中文、空格等特殊字符，因此浏览器会自动对 URL 地址内的中文进行转换处理
http://服务器路径?id=1&name=响响
http://服务器路径?id=1&name=%E5%93%8D%E5%93%8D
浏览器内置方法 :
encodeURIComponent(): 编码decodeURIComponent(): 解码
let str1 = '响响'
console.log(str1) // '响响'
// 编码
let str2 = encodeURIComponent(str1)
console.log(str2) // '%E5%93%8D%E5%93%8D'
// 解码
let str3 = decodeURIComponent(str2)
console.log(str3) // '响响'
console.log(decodeURIComponent('%E5%93%8D%E5%93%8D')) // '响响'
axios 发起 post 请求
POST 请求和 GET 请求不一样，POST 请求一定会有请求参数
- POST 请求的功能就是向服务器推送数据
// 发起ajax
axios({
method: 'post',
url: '服务器路径',
data: {
id: 1,
name: '响响2'
}
}).then((res) => {
console.log(res)
})
4 . 请求报文和响应报文
客户端与服务器通信的过程是基于请求与响应的
- 请求报文 : 规定了客户端以什么格式把数据发送给服务器
- 响应报文 : 规定了服务器以什么格式把数据响应给客户端
请求报文
请求报文由 : 请求行（request line）、请求头部（ header ）、空行 和 请求体 4 个部分组成
请求报文格式 :
浏览器中查看请求报文
响应报文
响应报文由 : 状态行、响应头部、空行 和 响应体 4
个部分组成
响应报文格式 :
浏览器中查看响应报文
注意点
- 在浏览器中，GET 请求比较特殊，它只有请求头，没有请求体。
- 在浏览器中，POST、PUT、PATCH、DELETE 请求既有请求头，又有请求体。
5 . http 响应状态码
什么是响应状态码
http 响应状态码（Status Code）由三位数字组成，用来标识响应成功与否的状态。
响应状态码的作用
客户端浏览器根据响应状态码，即可判断出这次 http 请求是成功还是失败了。
常见的响应状态码
- 200 (ok) : 请求已成功
- 201 (Created) : 资源在服务器已成功创建
- 304 (Not Modified) : 资源在客户端已缓存,响应体中不包含任何内容
- 400 (Bad Request) : 客户端请求方式或者请求参数有误,导致请求失败
- 401 (Unauthorized) : 客户端用户身份认证身份未通过,没能登录
- 404 (Unauthorized) : 客户端资源地址错误,导致服务器无法找到资源
- 500 (Internal Server Error) : 服务器内部错误,导致本次请求失败
http 响应状态码 和 业务状态码的区别；
所处的位置不同 ：
- 在响应头的状态行中所包含的状态码，叫做 “响应状态码”
- 在响应体的数据中所包含的状态码，叫做 “业务状态码” 。
表示的结果不同 ：
- 响应状态码只能表示这次请求的成功与否（成功地失败了）
- 业务状态码用来表示这次业务处理的成功与否
通用性不同 ：
- 响应状态码是由 http 协议规定的，具有通用性。每个不同的状态码都有其标准的含义，不能乱用。
- 业务状态码是后端程序员自定义的，不具有通用性。