Ajax(一)
Ajax(一)
服务器相关基础概念
常见的客户端浏览器
谷歌，IE/Edge , Safari
服务有哪两个重要作用：
- 资源存放服务
- 对外提供具体服务
客户端和服务器的通讯是基于 请求 和 响应
URL主要有哪几部分组成：
协议 主机名 端口号 资源存放路径
协议
http: 使用明文传输 不安全
https: s 表示 SS L加密协议，安全
端口号
默认端口号
http: 80
https: 443
URL编码
在 URL 地址中不允许出现中文、空格等特殊字符，因此浏览器会自动对 URL 地址内的中文进行转换处理。例如上面的地址：
浏览器内置了 encodeURI() 和 decodeURI()两个方法，用来实现 URL：
Ajax含义
Ajax 是浏览器中的技术：用来实现客户端网页请求服务器的数据。 它的英文全称是 Asynchronous Javascript And
基础用法
Ajax请求数据的5种方式
请求方式 | 描述 |
|---|---|
POST | 向服务器新增数据 |
GET | 从服务器获取数据 |
DELETE | 删除服务器上的一条数据 |
PUT | 更新服务器上的数据（侧重于完整更新）全量更新 |
PATCH | 更新服务器上的数据（侧重于部分更新）打补丁 局部更新 |
axios
是前端圈最火的、专注于数据请求的。
基础语法
axios({
method: '请求的类型',
url: '请求的URL地址'
}).then((result) => {
// .then 用来指定请求成功之后的回调函数
// 形参中的 result 是请求成功之后的结果
})GET请求
axios({
method : 'GET', // 请求方式
url : 'http://www.liulongbin.top:3009/api/getbooks' // 请求地址
}).then(result => {
console.log(result)
})查询参数：params
// 发起get请求，并传入查询参数
// 查询参数的本质 ： 把参数 以？拼接在url后面 key = value 即 url?key=value
axios({
method: 'GET',
url: 'http://www.liulongbin.top:3009/api/getbooks',
params: { // 查询参数
id : 1
}
}).then(result => {
console.log(result)
})
/*
// 上面这种写法就相当于：
axios({
method: 'GET',
url: 'http://www.liulongbin.top:3009/api/getbooks?id=1'
}).then(result => {
console.log(result)
})
*/
在 GET 请求中携带多个查询参数
axios({
method: 'GET',
url: 'http://www.liulongbin.top:3009/api/getbooks',
params: {
id : 1,
publisher: '北京图书出版社'
}
}).then(result => {
console.log(result.data)
})
/*
// 上面这种写法就相当于：
// 两个及以上参数用&符进行连接
axios({
method: 'GET',
url: 'http://www.liulongbin.top:3009/api/getbooks?id=1&publisher=%E5%8C%97%E4%BA%AC%E5%9B%BE%E4%B9%A6%E5%87%BA%E7%89%88%E7%A4%BE'
}).then(result => {
console.log(result)
})
*/
result 是 axios 套壳的结果
示例图：
所以需要对result进行解构赋值：
axios({
method : 'GET', // 请求方式
url : 'http://www.liulongbin.top:3009/api/getbooks' // 请求地址
}).then(({data:{data}}) => { // 深层解构
console.log(data)
})
POST请求
let btnPOST = document.querySelector('#btnPOST')
btnPOST.addEventListener('click', function () {
axios({
method: 'POST',
url: 'http://www.liulongbin.top:3009/api/addbook',
data: {
bookname: '美人是如何炼成的',
author: 'Tricia',
publisher: '个人出版社'
}
}).then(({ data: res }) => {
console.log(res)
})
})![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xSLy2SjM-1651243083358)(https://s3-us-west-2.amazonaws.com/secure.notion-static.com/417fa09b-f795-42da-bdbb-2f13cb5aeead/Untitled.png)]](https://developer.qcloudimg.com/http-save/yehe-9923069/d5433b90d168dc12d5e62566b341a0d4.png)
提交数据方式
由于提交的数据太多，所以没有把数据拼接到 URL 的末尾；而是放到了独立的请求体中。
let btnPOST = document.querySelector('#btnPOST')
btnPOST.addEventListener('click', function () {
axios({
method: 'POST',
url: 'http://www.liulongbin.top:3009/api/addbook',
data: {
bookname: '美人是如何炼成',
author: 'Tricia',
publisher: '个人出版社'
}
}).then(({ data: res }) => {
console.log(res)
})
})
请求报文&响应报文
请求报文
请求报文由请求行（request line）、请求头部（ header ）、空行 和 请求体 4 个部分组成。图示如下：
注意：
- 在浏览器中，GET 请求比较特殊， 没有请求体。
- 在浏览器中，POST、PUT、PATCH、DELETE 请求有请求体。
响应报文
响应报文由状态行、响应头部、空行 和 响应体 4 个部分组成。图示如下：
http响应状态码
概念：
http 响应状态码（Status Code）由三位数字组成，用来标识响应成功与否的状态。
作用：
客户端浏览器根据响应状态码，即可判断出这次 http 请求是成功还是失败了。
常见的响应状态码
状态码 | 状态码描述 | 说明 |
|---|---|---|
200 | OK | 请求成功。 |
201 | Created | 资源在服务器端已成功创建 |
304 | Not Modified | 资源在客户端被缓存，响应体中不包含任何资源内容 |
400 | Bad Request | 客户端的请求方式、或请求参数有误导致的请求失败 |
401 | Unauthorized | 客户端的用户身份认证未通过，导致的此次请求失败 |
404 | Not Found | 客户端请求的资源地址错误，导致服务器无法找到资源 |
500 | Internal Server Error | 服务器内部错误，导致的本次请求失败 |
http 响应状态码 Vs 业务状态码
正确区分响应状态码和业务状态码的不同，是保证使用 Ajax 不迷茫的必要前提。从如下 3 个方面进行区分： ① 所处的位置
- 在状态行中所包含的状态码，叫做“响应状态码”
- 在响应体的数据中所包含的状态码，叫做“业务状态码”
② 表示的结果
- 响应状态码只能表示这次请求的成功与否（成功或失败）
- 业务状态码用来表示这次业务处理的成功与否
③ 通用
- 响应状态码是由 http 协议规定的，具有通用性。每个不同的状态码都有其标准的含义，不能乱用
- 业务状态码是后端程序员自定义的，不具有通用性
接口
使用 Ajax 请求数据时，被请求的 URL 地址，就叫做数据接口（简称：接口或 API 接口）。 同时，每个接口必须有对应的请求方式。例如：
- http://www.liulongbin.top:3009/api/getbooks 获取图书列表的接口(GET 请求)-
- http://www.liulongbin.top:3009/api/addbook 添加图书的接口（POST 请求）
接口测试工具 postman
GET测试
POST测试
腾讯云开发者
