欢迎来到尧图网

客户服务 关于我们

您的位置：首页 > 汽车 > 维修 > 前端技术Ajax入门

前端技术Ajax入门

2025/4/30 20:46:42 来源：https://blog.csdn.net/return_Jessica/article/details/147514737  浏览:  次   关键词：前端技术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
     
 

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：密码
       
     
 

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. 实现步骤
 

  1. 点击登录，获取并判断用户名和密码长度。
  2. 提交数据与服务器通信。
 

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;
 

 









版权声明:



本网仅为发布的内容提供存储空间，不对发表、转载的内容提供任何形式的保证。凡本网注明“来源：XXX网络”的作品，均转载自其它媒体，著作权归作者所有，商业转载请联系作者获得授权，非商业转载请注明出处。


我们尊重并感谢每一位作者，均已注明文章来源和作者。如因作品内容、版权或其它问题，请及时与我们联系，联系邮箱：809451989@qq.com，投稿邮箱：809451989@qq.com

























相关资讯
























热文排行







最新新闻







推荐新闻







热搜词