前端技术Ajax入门
1.1 AJAX 概念和 axios 使用
目标
- 了解 AJAX 概念并掌握 axios 库基本使用
讲解
1. 什么是 AJAX？
- 使用浏览器的
XMLHttpRequest对象与服务器通信。 - 在浏览器网页中，通过 AJAX 技术（XHR 对象）发起获取省份列表数据的请求，服务器返回准备好的省份列表数据给前端，前端将数据展示到网页。
2. 什么是服务器？
- 可以暂时理解为提供数据的一台电脑。
3. 为何学习 AJAX？
- 以前数据是固定的，无法随时变化。
- 现在可以从服务器获取数据，让数据动态化。
4. 如何学习 AJAX？
- 使用第三方库
axios，后续再学习XMLHttpRequest对象以了解 AJAX 底层原理。 axios语法简单，让我们更关注与服务器通信，且在 Vue、React 中也使用axios。
5. 需求：从服务器获取省份列表数据并展示到页面
- 目标资源地址：
http://hmajax.itheima.net/api/province
6. 讲解 axios 语法步骤
7. 引入 axios.js 文件
html
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> |
8. axios 函数语法
javascript
axios({ | |
url: '目标资源地址' | |
}).then((result) => { | |
// 处理服务器返回的数据 | |
}); |
9. 示例代码
html
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>AJAX概念和axios使用</title> | |
</head> | |
<body> | |
<p class="my-p"></p> | |
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> | |
<script> | |
axios({ | |
url: 'http://hmajax.itheima.net/api/province' | |
}).then(result => { | |
console.log(result.data.list); | |
document.querySelector('.my-p').innerHTML = result.data.list.join('<br>'); | |
}); | |
</script> | |
</body> | |
</html> |
小结
- AJAX 的作用：浏览器和服务器之间通信，实现动态数据交互。
- 学习方法：先掌握
axios库，再了解XMLHttpRequest原理。 - axios 体验步骤：引入库文件，使用
axios语法。
1.2 认识 URL
目标
- 了解 URL 的组成和作用
讲解
1. 为什么要认识 URL？
- 了解 URL 的结构，方便与服务器有效沟通。
2. 什么是 URL？
- 统一资源定位符，简称网址，用于定位网络中的资源（如网页、图片、数据等）。
3. URL 的组成
- 协议：如
http，规定浏览器和服务器传递数据的格式。 - 域名：标记服务器在互联网中的位置。
- 资源路径：标识服务器内的具体资源。
4. 示例需求
- 访问新闻列表的 URL：
http://hmajax.itheima.net/api/news
5. 示例代码
javascript
axios({ | |
url: 'http://hmajax.itheima.net/api/news' | |
}).then(result => { | |
console.log(result); | |
}); |
小结
- URL 是什么：统一资源定位符，用于访问服务器上的资源。
- URL 组成：协议、域名、资源路径。
1.3 URL 查询参数
目标
- 掌握通过 URL 传递查询参数，获取匹配的数据
讲解
1. 什么是查询参数？
- 携带给服务器的额外信息，用于获取特定数据。
2. 查询参数语法
http://xxxx.com/xxx/xxx?参数名1=值1&参数名2=值2 |
3. axios 携带查询参数
javascript
axios({ | |
url: '目标资源地址', | |
params: { | |
参数名: 值 | |
} | |
}).then(result => { | |
// 处理服务器返回的数据 | |
}); |
4. 示例需求
- 获取“河北省”下属的城市列表：
- URL：
http://hmajax.itheima.net/api/city - 参数名：
pname
- URL：
5. 示例代码
javascript
axios({ | |
url: 'http://hmajax.itheima.net/api/city', | |
params: { | |
pname: '辽宁省' | |
} | |
}).then(result => { | |
console.log(result.data.list); | |
document.querySelector('p').innerHTML = result.data.list.join('<br>'); | |
}); |
小结
- 查询参数作用：提供额外信息，获取对应数据。
- axios 使用方法：通过
params选项携带参数。
1.4 案例：查询地区列表
目标
- 巩固查询参数的使用，查看多对查询参数如何传递
讲解
1. 需求
- 根据输入的省份和城市名字，查询下属地区列表。
- URL：
http://hmajax.itheima.net/api/area - 参数名：
pname：省份名字cname：城市名字
2. 示例代码
javascript
document.querySelector('.sel-btn').addEventListener('click', () => { | |
let pname = document.querySelector('.province').value; | |
let cname = document.querySelector('.city').value; | |
axios({ | |
url: 'http://hmajax.itheima.net/api/area', | |
params: { | |
pname, | |
cname | |
} | |
}).then(result => { | |
let list = result.data.list; | |
let theLi = list.map(areaName => `<li>${areaName}</li>`).join(''); | |
document.querySelector('.list-group').innerHTML = theLi; | |
}); | |
}); |
小结
- ES6 对象简写：属性名和值同名时可简写。
1.5 常用请求方法和数据提交
目标
- 掌握如何向服务器提交数据
讲解
1. 请求方法
- 常用方法：
GET、POST、PUT、DELETE、PATCH。 GET：获取数据（默认）。POST：提交数据。
2. 何时提交数据？
- 如订单数据、登录信息等需要保存到服务器。
3. axios 提交数据
javascript
axios({ | |
url: '目标资源地址', | |
method: 'POST', | |
data: { | |
参数名: 值 | |
} | |
}).then(result => { | |
// 处理服务器返回的数据 | |
}); |
4. 示例需求
- 注册账号，提交用户名和密码：
- URL：
http://hmajax.itheima.net/api/register - 请求方法：
POST - 参数名：
username：用户名password：密码
- URL：
5. 示例代码
javascript
document.querySelector('.btn').addEventListener('click', () => { | |
axios({ | |
url: 'http://hmajax.itheima.net/api/register', | |
method: 'POST', | |
data: { | |
username: 'itheima007', | |
password: '7654321' | |
} | |
}); | |
}); |
小结
- 常用请求方法：
POST（提交数据）、GET（查询数据）。 - axios 核心配置项：
url、method、params、data。
1.6 axios 错误处理
目标
- 掌握接收 axios 响应错误信息的处理语法
讲解
1. 错误处理
- 使用
catch方法捕获请求响应错误：
javascript
axios({ | |
// ...请求选项 | |
}).then(result => { | |
// 处理成功数据 | |
}).catch(error => { | |
// 处理失败错误 | |
}); |
2. 示例代码
javascript
document.querySelector('.btn').addEventListener('click', () => { | |
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.response.data.message); | |
alert(error.response.data.message); | |
}); | |
}); |
小结
- 错误处理：通过
.catch方法捕获错误信息。
1.7 HTTP 协议-请求报文
目标
- 了解 HTTP 协议中请求报文的组成和作用
讲解
1. 请求报文组成
- 请求行：请求方法、URL、协议。
- 请求头：附加信息（如
Content-Type）。 - 空行：分割请求头和请求体。
- 请求体：发送的资源。
小结
- 请求报文组成：请求行、请求头、空行、请求体。
1.8 请求报文-错误排查
目标
- 了解查看请求报文的作用，辅助错误排查
讲解
- 通过查看请求报文确认发送的数据是否正确。
小结
- 作用：快速确认发送内容是否正确。
1.9 HTTP 协议-响应报文
目标
- 了解响应报文的组成
讲解
1. 响应报文组成
- 响应行：协议、状态码、状态信息。
- 响应头：附加信息（如
Content-Type）。 - 空行：分割响应头和响应体。
- 响应体：返回的资源。
2. HTTP 响应状态码
- 如
404表示资源不存在。
小结
- 响应报文组成：响应行、响应头、空行、响应体。
- 状态码作用：表明请求是否成功完成。
1.10 接口文档
目标
- 掌握接口文档的使用，配合 axios 与服务器进行数据交互
讲解
1. 接口文档
- 描述接口的文章（由后端提供）。
- 包含请求的 URL、方法、参数等信息。
2. 示例需求
- 查看登录接口文档，编写登录代码。
3. 示例代码
javascript
document.querySelector('.btn').addEventListener('click', () => { | |
axios({ | |
url: 'http://hmajax.itheima.net/api/login', | |
method: 'post', | |
data: { | |
username: 'itheima007', | |
password: '7654321' | |
} | |
}); | |
}); |
小结
- 接口文档：描述接口的文章。
- 包含内容：URL、请求方法、参数。
1.11 案例：用户登录-主要业务
目标
- 尝试通过页面获取用户名和密码，进行登录
讲解
1. 实现步骤
- 点击登录，获取并判断用户名和密码长度。
- 提交数据与服务器通信。
2. 示例代码
javascript
document.querySelector('.btn-login').addEventListener('click', () => { | |
const username = document.querySelector('.username').value; | |
const password = document.querySelector('.password').value; | |
if (username.length < 8) { | |
console.log('用户名必须大于等于8位'); | |
return; | |
} | |
if (password.length < 6) { | |
console.log('密码必须大于等于6位'); | |
return; | |
} | |
axios({ | |
url: 'http://hmajax.itheima.net/api/login', | |
method: 'POST', | |
data: { | |
username, | |
password | |
} | |
}).then(result => { | |
console.log(result.data.message); | |
}).catch(error => { | |
console.log(error.response.data.message); | |
}); | |
}); |
小结
- 实现思路：绑定点击事件、获取输入值、判断长度、提交数据。
1.12 案例：用户登录-提示信息
目标
- 根据提示标签和样式，给用户反馈提示
讲解
1. 封装提示框函数
javascript
function alertFn(msg, isSuccess) { | |
myAlert.classList.add('show'); | |
myAlert.innerText = msg; | |
const bgStyle = isSuccess ? 'alert-success' : 'alert-danger'; | |
myAlert.classList.add(bgStyle); | |
setTimeout(() => { | |
myAlert.classList.remove('show'); | |
myAlert.classList.remove(bgStyle); | |
}, 2000); | |
} |
小结
- 封装函数：遇到重复逻辑时封装为函数。
- 提示框控制：通过添加或移除类名控制显示/隐藏。
1.13 form-serialize 插件
目标
- 使用 form-serialize 插件快速收集表单元素的值
讲解
1. 插件使用
- 引入插件文件。
- 使用
serialize函数：
javascript
const form = document.querySelector('.example-form'); | |
const data = serialize(form, { hash: true, empty: true }); | |
console.log(data); |
小结
- 使用场景：快速收集表单元素的值。
- 配置选项：
hash（对象/查询字符串）、empty（是否收集空值）。
1.14 案例：用户登录-form-serialize
目标
- 使用 form-serialize 插件重新修改用户登录案例
讲解
1. 修改代码
javascript
// 引入插件 | |
<script src="./lib/form-serialize.js"></script> | |
// 使用 serialize 函数 | |
const form = document.querySelector('.login-form'); | |
const data = serialize(form, { hash: true, empty: true }); | |
const { username, password } = data; |