「写在前面」
本文为黑马程序员 AJAX 教程的学习笔记。本着自己学习、分享他人的态度,分享学习笔记,希望能对大家有所帮助。
目录
-
0 课程介绍 -
1 AJAX 入门 -
1.1 AJAX 概念和 axios 使用 -
1.2 认识 URL -
1.3 URL 查询参数 -
1.4 常用请求方法和数据提交 -
1.5 HTTP协议-报文 -
1.6 接口文档 -
1.7 案例 - 用户登录 -
1.8 form-serialize 插件
-
0 课程介绍
P1:https://www.bilibili.com/video/BV1MN411y7pw?p=1
1 AJAX 入门
1.1 AJAX 概念和 axios 使用
P2:https://www.bilibili.com/video/BV1MN411y7pw?p=2
什么是 AJAX ?
AJAX 是浏览器与服务器进行数据通信的技术
比如:浏览器网页中,使用 AJAX技术(XHR对象)发起获取省份列表数据的请求,服务器代码响应准备好的省份列表数据给前端,前端拿到数据数组以后,展示到网页
怎么用 AJAX ?
-
先使用 axios 库,与服务器进行 数据通信
-
因为 axios 库语法简单,让我们有更多精力关注在与服务器通信上,而且后续 Vue,React 学习中,也使用 axios 库与服务器通信
-
再学习 XMLHttpRequest 对象的使用,了解 AJAX 底层原理
axios 使用
语法:
-
引入 axios.js:https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js -
使用 axios 函数
-
传入 配置对象 -
再用 .then 回调函数接收结果,并做后续处理
axios({
url: '目标资源地址'
}).then((result) => {
//对服务器返回的数据做后续处理
})
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AJAX概念和axios使用</title>
</head>
<body>
<!--
axios库地址:https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js
省份数据地址:http://hmajax.itheima.net/api/province
目标: 使用axios库, 获取省份列表数据, 展示到页面上
1. 引入axios库
-->
<p class="my-p"></p>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
// 2. 使用axios函数
axios({
url: 'http://hmajax.itheima.net/api/province'
}).then(result => {
console.log(result)
// 好习惯:多打印,确认属性名
console.log(result.data.list)
console.log(result.data.list.join('<br>'))
// 把准备好省份列表,插入到页面
document.querySelector('.my-p').innerHTML = result.data.list.join('<br>')
})
</script>
</body>
</html>
1.2 认识 URL
P3:https://www.bilibili.com/video/BV1MN411y7pw?p=3
什么是 URL ?
定义:
例如:
URL 的组成
http 协议:超文本传输协议,规定浏览器和服务器之间传输数据的格式
域名:标记服务器在互联网中方位
资源路径:标记资源在服务器下的具体位置
1.3 URL 查询参数
P4:https://www.bilibili.com/video/BV1MN411y7pw?p=4
什么是查询参数 ?
定义:浏览器提供给服务器的额外信息,让服务器返回浏览器想要的数据
语法:http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2
举例:查询河北省下属的城市列表,需要先把河北省传递给服务器
axios 如何携带查询参数?
语法:使用 axios 提供的 params 选项
axios({
url: '目标资源地址',
params: {
参数名: 值
}
}).then(result => {
// 对服务器返回的数据做后续处理
})
案例:获取“河北省”下属的城市列表,展示到页面
axios({
url: 'http://hmajax.itheima.net/api/city',
params: {
pname: '河北省'
}
}).then(result => {
console.log(result.data.list)
})
案例:地区查询
P5:https://www.bilibili.com/video/BV1MN411y7pw?p=5
1.4 常用请求方法和数据提交
P6:https://www.bilibili.com/video/BV1MN411y7pw?p=6
常用请求方法
请求方法:是一些固定单词的英文,例如:GET,POST,PUT,DELETE,PATCH(这些都是http协议规定的),每个单词对应一种对服务器资源要执行的操作
前面我们获取数据其实用的就是 GET 请求方法,但是 axios 内部设置了默认请求方法就是 GET,我们就没有写
axios 请求配置
-
url:请求的 URL 网址 -
method:请求的方法, GET可以省略(不区分大小写) -
data:提交数据
axios({
url: '目标资源地址',
method: '请求方法',
data: {
参数名: 值
}
}).then(result => {
// 对服务器返回的数据做后续处理
})
案例:注册账号,提交用户名和密码到服务器保存
axios({
url: 'http://hmajax.itheima.net/api/register',
method: 'POST',
data: {
username: 'itheima007',
password: '7654321'
}
})
axios 错误处理
P7:https://www.bilibili.com/video/BV1MN411y7pw?p=7
如果注册相同的用户名,则会遇到注册失败的请求,也就是 axios 请求响应失败了,你会在控制台看到如图的错误:
因为,普通用户不会去控制台里看错误信息,我们要编写代码拿到错误并展示给用户在页面上
语法:在 then 方法的后面,通过点语法调用 catch 方法,传入回调函数并定义形参
axios({
// ...请求选项
}).then(result => {
// 处理成功数据
}).catch(error => {
// 处理失败错误
})
案例:重复注册时通过弹框提示用户错误原因
axios({
url: 'http://hmajax.itheima.net/api/register',
method: 'post',
data: {
username: 'itheima007',
password: '7654321'
}
}).then(result => {
// 成功
console.log(result)
}).catch(error => {
// 失败
// 处理错误信息
console.log(error)
console.log(error.response.data.message)
alert(error.response.data.message)
})
1.5 HTTP协议-报文
P8:https://www.bilibili.com/video/BV1MN411y7pw?p=8
HTTP 协议:规定了浏览器发送及服务器返回内容的格式
请求报文:浏览器按照 HTTP 协议要求的格式,发送给服务器的内容
请求报文的组成部分有:
-
请求行:请求方法,URL,协议 -
请求头:以键值对的格式携带的附加信息,比如:Content-Type -
空行:分隔请求头,空行之后的是发送给服务器的资源 -
请求体:发送的资源
通过 Chrome 的网络面板查看请求报文:
请求报文-错误排查
P9:https://www.bilibili.com/video/BV1MN411y7pw?p=9
HTTP 协议-响应报文
P10:https://www.bilibili.com/video/BV1MN411y7pw?p=10
响应报文:服务器按照 HTTP 协议要求的格式,返回给浏览器的内容
响应报文的组成:
-
响应行(状态行):协议、HTTP 响应状态码、状态信息 -
响应头:以键值对的格式携带的附加信息,比如:Content-Type -
空行:分隔响应头,空行之后的是服务器返回的资源 -
响应体:返回的资源
HTTP 响应状态码:用来表明请求是否成功完成
比如:404(服务器找不到资源)
通过 Chrome 的网络面板查看响应报文:
1.6 接口文档
P11:https://www.bilibili.com/video/BV1MN411y7pw?p=11
接口文档:描述接口的文章(一般是后端工程师,编写和提供)
接口:指使用 AJAX 和 服务器通讯时,使用的 URL,请求方法,以及参数,例如:
AJAX阶段接口文档: https://apifox.com/apidoc/shared-1b0dd84f-faa8-435d-b355-5a8a329e34a8
1.7 案例 - 用户登录
P12:https://www.bilibili.com/video/BV1MN411y7pw?p=12
P13:https://www.bilibili.com/video/BV1MN411y7pw?p=13
1.8 form-serialize 插件
P14:https://www.bilibili.com/video/BV1MN411y7pw?p=14
P15:https://www.bilibili.com/video/BV1MN411y7pw?p=15
我们前面收集表单元素的值,是一个个标签获取的,如果一套表单里有很多很多表单元素,如何一次性快速收集出来呢?使用 form-serialize 插件提供的 serialize 函数就可以办到。
form-serialize 插件语法:
-
引入 form-serialize 插件到自己网页中 -
使用 serialize 函数
-
参数1:要获取的 form 表单标签对象(要求表单元素需要有 name 属性-用来作为收集的数据中属性名) -
参数2:配置对象 -
hash: -
true - 收集出来的是一个 JS 对象结构 -
false - 收集出来的是一个查询字符串格式
-
-
empty: -
true - 收集空值 -
false - 不收集空值
-
-
const form = document.querySelector('.example-form')
const data = serialize(form, { hash: true, empty: true })
本文由 mdnice 多平台发布