Ajax 的基础用法
概念
Ajax 是浏览器中的技术，用来实现客户端网页请求服务器的数据。
它的英文全称是 Asynchronous Javascript And XML，简称 Ajax。
使用 Ajax 请求数据的 5 种方式
| 序号 | 请求方式 | 描述 |
|---|---|---|
| 1 | POST | 向服务器新增数据 |
| 2 | GET | 从服务器获取数据 |
| 3 | DELETE | 删除服务器上的数据 |
| 4 | PUT | 更新服务器上的数据（侧重于完整更新：例如更新用户的完整信息） |
| 5 | PATCH | 更新服务器上的数据（侧重于部分更新：例如只更新用户的手机号） |
post请求
- post请求侧重点：增加数据/向服务器新增数据
- 如果希望将本地数据添加到服务端 --- 通过Ajax发送post请求，到服务器
get请求
- get是用来获取数据的，如果本地没有数据，希望将服务器的数据得到 --- 通过Ajax发送get请求，到服务器
- get请求侧重点：获取数据/从服务器获取数据
delete请求
- DELETE 请求用于删除服务器上的数据
put请求
- PUT 请求用于更新服务器上的数据（侧重于完整更新：例如更新用户的完整信息）
patch请求
- PATCH 请求用于更新服务器上的数据（侧重于部分更新：例如只更新用户的手机号）
Ajax使用
使用纯粹的原生js实现Ajax请求
利用第三方提供的js库实现
jQuery(了解)
jQuery实现Ajax请求步骤
- 必须先引入jQuery文件（jQuery文件本质是一个js文件）
- 使用jQuery提供的语法实现Ajax请求
语法：
$.ajax({
// 1. 必须设置请求方式，type是固定写法
type: '请求方式',
// 2. 必须设置url地址
url: '请求地址',
// 3. 获取fwq响应结果
success: function(形参) {
// 形参就是服务器响应结果
}
})
<!-- 点击按钮获取服务端数据 -->
<input type="button" value="按钮">
<script src="./lib/jquery.js"></script>
<script>
// 1. 按钮注册事件
let btn = document.querySelector('input')
btn.addEventListener('click', function () {
// 2. 发送Ajax请求
$.ajax({
type: 'get',
url: 'http://www.liulongbin.top:3006/api/getbooks',
// success: function(res) {
// // res形参就是服务器响应结果
success: function({data:res}) {
console.log(res)
}
})
})
</script>
axios（推荐使用）
axios（发音：艾克C奥斯） 是前端圈最火的、专注于数据请求的库。
基本语法如下:
axios({
method: '请求类型',
url: '请求的URL地址'
}).then(function(*形参*){
// .then 用来指定请求成功之后的回调函数
// 形参就是服务器响应结果
})
基于 axios 发起 GET 请求
axios({
method: 'get',
url: 'http://www.liulongbin.top:3006/api/getbooks',
}).then(function(res){
// res服务器端应结果
console.log(res)
})
上面代码查询回来的是所有图书的列表数据，如果想指定查询的条件，可以通过 params 选项来指定查询的参数
在使用 Ajax 发起 GET 请求时， params中的参数，会以 ?键=值 的形式拼接到 URL 地址的末尾
http://www.liulongbin.top:3006/api/getbooks?id=2
注意：? 后面的都是查询参数，查询参数的键和值之间使用 = 进行分隔
axios({
method: 'get',
url: 'http://www.liulongbin.top:3006/api/getbooks',
params: {//查询参数
id : 2,
}
}).then(function(res){
// res服务器端应结果
console.log(res)
})
如果要携带多个参数，只需要在 params 对象中指定多个查询参数项即可。
最终，在 URL 地址的末尾，多个查询参数之间使用 & 符号进行分隔：
http://www.liulongbin.top:3006/api/getbooks?id=2&bookname=红楼梦
axios({
method: 'get',
url: 'http://www.liulongbin.top:3006/api/getbooks',
params: {//查询参数
id : 2
bookname : '红楼梦',
}
}).then(function(res){
// res服务器端应结果
console.log(res)
})
注意：
- 请求方式，get大小写都可以
- 现在get请求默认获取服务端所有数据
- 如何根据自己设定条件获取数据
a)将用户自己设置的条件发送给服务端
b)在axios中，通过params设置查询条件 ----查询参数
c)params对象中的键值对，键不可自己乱写，按照后端程序员要求设置
d)设置多个查询条件时，多个查询参数是且的关系，都需要满足的数据才能返回
e)查询参数一定要和后端程序员配合，人家实现了的，我们才能使用，没实现不能用
URL 编码*
在 URL 地址中不允许出现中文、空格等特殊字符，因此浏览器会自动对 URL 地址内的中文进行转换处理
浏览器内置了 encodeURI() 和 decodeURI() 两个方法，用来实现 URL 的编码和解码处理：
将汉字进行编码的方法： encodeURI('汉字')
将编码后的结果进行解码： decodeURI('编码')
console.log(encodeURI('红楼梦'))
console.log(decodeURI('%E7%BA%A2%E6%A5%BC%E6%A2%A6'))
基于 axios 发起 POST 请求
post请求：向服务器增加数据，一般用户注册会使用post请求
使用 axios 发起 POST 请求时，只需要将 method属性的值设置为 'POST' 即可：
axios({
method: 'post',
url: 'http://www.liulongbin.top:3006/api/post',
// data:向服务端添加的数据
data: {
uname: '小明',
age: 123,
pwd: 666666
}
}).then(function(res){
console.log(res)
})
模拟器查看ajax请求数据
get请求与post请求的区别：
get请求
a)get请求的侧重点是向服务端要数据（获取数据）
b)get请求在获取数据同时也可以向服务端发送数据，通过查询参数发送
c)get请求通过查询参数发送数据时，可以将查询参数键值对拼接到url后面，有固定格式 ？键=值&键=值
d)get请求安全性比post请求低（数据拼接到url后面，用户可见）
post请求
a)post请求的侧重点是向服务端增加数据（给与数据）
b)post请求本身就要向服务端发送数据，通过数据体data发送数据
c)post请求通过数据体data发送数据时，不会将查询参数拼接到url后面
d)post请求安全性比get请求安全性高
请求报文 & 响应报文
请求报文 -
格式
请求报文由请求行（request line）、请求头部（ header ）、空行 和 请求体 4 个部分组成。图示如下：
请求报文：记录了客户端向服务端发送数据相关信息（就是一个记录的作用）
请求头：请求方式，请求路径，协议类型
请求体：Host : 主机名，Content-Type: 请求数据类型 ,Connection: 网络状态
注意：
在浏览器中，GET 请求比较特殊，它只有请求头，没有请求体。
在浏览器中，POST、PUT、PATCH、DELETE 请求既有请求头，又有请求体。
响应报文
格式
响应报文由状态行、响应头部、空行 和 响应体 4 个部分组成。图示如下：
响应报文：记录了服务端向客户端返回数据的相关信息（就是一个记录的作用）
状态行：协议类型 状态码 对状态的描述
响应头：Content-Type:服务端对客户端返回响应数据类型 Connection：请求完成后的网络状态
响应体：Response 记录了响应数据
状态码
响应状态码
概念：http 响应状态码（Status Code）由三位数字组成，用来标识响应成功与否的状态
简单来说：状态码是响应报文中的一个数字（只有发送ajax请求才会出现状态码）
作用：用来描述当前ajax请求状态（是否成功），客户端浏览器根据响应状态码，即可判断出这次 http 请求是成功还是失败了。
状态码分类：
-
以数字2开头的状态码， 2XX 表示客户端和服务端通信是成功的
-
以数字3开头的状态码， 3XX 表示客户端和服务端通信时，服务端资源路径发生了改变（重定向）
-
以数字4开头的状态码， 4XX 表示客户端在发送ajax请求时发生错误，导致服务端无法正确返回响应结果
-
以数字5开头的状态码， 5XX 表示服务端发生错误，导致服务端无法返回响应结果
常见的 http 响应状态码
业务状态码
http 响应状态码 Vs 业务状态码
-
所处的位置不同：
在响应头的状态行中所包含的状态码，叫做“响应状态码”
在响应体的数据中所包含的状态码，叫做“业务状态码”
-
表示的结果不同：
响应状态码只能表示这次请求的成功与否（成功地失败了）
业务状态码用来表示这次业务处理的成功与否
-
通用性不同：
响应状态码是由 http 协议规定的，具有通用性。每个不同的状态码都有其标准的含义，不能乱用。
业务状态码是后端程序员自定义的，不具有通用性。
