AJAX 入门 day1 ajax先容、axios利用、URL、哀求方法、数据提交、HTTP协议-
目录1.AJAX 概念和 axios 利用
2.熟悉 URL
3.URL 查询参数
4.常用哀求方法和数据提交
5.HTTP协议-报文
5.1 HTTP 协议－哀求报文
5.2 HTTP 协议－响应报文
6.接口文档
7.案例 - 用户登录
8.form-serialize 插件
1.AJAX 概念和 axios 利用
“Ajax” 是 “Asynchronous(异步) JavaScript and XML” 的缩写，是一种用于创建动态网页的技能。它允许网页在不重新加载整个页面的情况下与服务器进行交互和更新内容，从而提高用户体验和页面的响应速度。
Ajax 的基本工作流程是：
[*]用户在网页上触发事件（如点击按钮）。
[*]JavaScript 代码利用 XMLHttpRequest 对象向服务器发送哀求。
[*]服务器处置处罚哀求并返回数据。
[*]JavaScript 代码处置处罚返回的数据，并更新页面内容，而无需重新加载整个页面。
怎么用 AJAX ？
1. 先利用 axios [æk‘sioʊs] 库，与服务器进行数据通讯
[*]基于 XMLHttpRequest 封装、代码简单、月下载量在 14 亿次
[*]Vue、React 项目中都会用到 axios
2. 再学习 XMLHttpRequest 对象的利用，相识 AJAX 底层原理
语法： 1. 引入 axios.js：https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js 2. 利用 axios 函数
[*]✓ 传入配置对象
[*]✓ 再用 .then 回调函数接收结果，并做后续处置处罚
https://i-blog.csdnimg.cn/direct/e15b0cb93c6742b6811f087189f0bea5.png
训练：
需求：哀求目标资源地址，拿到省份列表数据，表现到页面 目标资源地址：http://hmajax.itheima.net/api/province https://i-blog.csdnimg.cn/direct/0554d94e2e05431e97088faff97753ec.png 代码： <body>
<p></p>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
/* 通过后台数据渲染到页面 */
const p = document.querySelector('p')
axios({
url: 'https://hmajax.itheima.net/api/province'
}).then(result => {
// console.log(result)
// console.log(result.data.list)
p.innerHTML = result.data.list.join('<br>')
})
</script>
</body>
2.熟悉 URL
URL，即统一资源定位符（Uniform Resource Locator），是用来指定互联网资源位置的地址。
一个典范的 URL 由以下几个部分组成：
[*]协议（Protocol）：指定利用的网络协议，例如 http、https、ftp 等。比如 https:// 表示利用安全的 HTTP 协议。
[*]域名（Domain Name）：表示资源地点的服务器的名称，例如 www.example.com。
[*]端口号（Port）（可选）：指定服务器上用于通讯的端口。例如，http://example.com:8080 指的是端口号为 8080 的服务器。
[*]资源路径（Path）：指向服务器上特定的资源或文件的位置。例如 /path/to/resource。
[*]查询字符串（Query String）（可选）：提供附加的参数或数据，通常以 ? 开始。例如 ?key1=value1&key2=value2。
[*]锚点（Fragment）（可选）：指向页面内部的某个部分或位置，通常以 # 开始。例如 #section1。
一个完备的 URL 大概如下所示：
https://www.example.com:8080/path/to/resource?key1=value1&key2=value2#section1
最常见的URL是这样的：
https://i-blog.csdnimg.cn/direct/1bafe6daedee4e7686639cb37315c0ca.png
参数说明：
[*]http 协议：超文本传输协议，规定欣赏器和服务器之间传输数据的格式
[*]域名：标记服务器在互联网中方位
[*]资源路径：标记资源在服务器下的具体位置
3.URL 查询参数
定义：欣赏器提供给服务器的 额外信息 ，让服务器返回欣赏器想要的数据 语法：http://xxxx.com/xxx/xxx ? 参数名1=值1 & 参数名2=值2
https://i-blog.csdnimg.cn/direct/516c2edaec9f40568c082a9a501e4401.png
语法：利用 axios 提供的 params 选项 注意：axios 在运行时把参数名和值，会拼接到 url ?参数名=值 都会列表： http://hmajax.itheima.net/api/city?pname=河北省
https://i-blog.csdnimg.cn/direct/351c00d1b0484bd9bc4d11d56561d3fe.png
案例： 地域查询 需求：根据输入的省份名字和都会名字，查询地域并渲染列表 效果图： https://i-blog.csdnimg.cn/direct/a53bdb0e4bda4317abc155a80e2fb8c3.png 代码： <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
/*
获取地区列表: http://hmajax.itheima.net/api/area
查询参数:
pname: 省份或直辖市名字
cname: 城市名字
*/
const btn = document.querySelector('.sel-btn')
btn.addEventListener('click', function () {
// 获取表单数据
pName = document.querySelector('.province').value
cName = document.querySelector('.city').value
// console.log(11)
// console.log(cname)
axios({
url: 'https://hmajax.itheima.net/api/area',
params: {
pname: pName,
cname: cName
}
}).then(result => {
// console.log(result.data.list)
document.querySelector('.list-group').innerHTML = result.data.list.map(item => {
return `
<li class="list-group-item">${item}</li>
`
}).join('')
})
})
</script>
4.常用哀求方法和数据提交
哀求方法：对服务器 资源 ，要实行的 操作 https://i-blog.csdnimg.cn/direct/058ca8b3bea74ce9b3f7afd0e0da632d.png 利用场景： 当数据需要在服务器上 生存 https://i-blog.csdnimg.cn/direct/9360439da19546f7b356caeb7fd832b4.png
案例：
数据提交－注册账号
需求：通过 axios 提交用户名和密码，完成注册功能 注册用户 URL 地址： http://hmajax.itheima.net/api/register 哀求方法： POST 参数名： username 用户名（中英文和数字组成，最少 8 位） password 密码（最少 6 位）
代码：
<body>
<button class="btn">注册用户</button>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
/*
注册用户: http://hmajax.itheima.net/api/register
请求方法: POST
参数名:
username: 用户名 (中英文和数字组成, 最少8位)
password: 密码 (最少6位)
目标: 点击按钮, 通过axios提交用户和密码, 完成注册
*/
const btn = document.querySelector('.btn')
btn.addEventListener('click', function () {
axios({
url: 'http://hmajax.itheima.net/api/register',
method: 'POST',
data: {
username: 'linhanxin',
password: '123456'
}
}).then(result => {
console.log(result)
//获取错误信息,显示给用户看
}).catch(error => {
alert(error.response.data.message)
})
})
</script>
</body>
axios错误处置处罚，可以让客户端更直观看到错误信息。从而去修改。
捕捉到的 error 是一个错误对象。
5.HTTP协议-报文
5.1 HTTP 协议－哀求报文
HTTP 协议：规定了欣赏器发送及服务器返回内容的 格式 哀求报文 ：欣赏器按照 HTTP 协议要求的 格式 ，发送给服务器的 内容 https://i-blog.csdnimg.cn/direct/03bb0057ec854cbabedce6294f176f0c.png
哀求报文的组成部分有:
[*]1. 哀求行：哀求方法，URL，协议
[*]2. 哀求头：以键值对的格式携带的附加信息，比如：Content-Type
[*]3. 空行：分隔哀求头，空行之后的是发送给服务器的资源
[*]4. 哀求体：发送的资源
5.2 HTTP 协议－响应报文
HTTP 协议：规定了欣赏器发送及服务器返回内容的 格式 响应报文 ：服务器按照 HTTP 协议要求的 格式 ， 返回给欣赏器的 内容 响应报文的组成部分有:
[*]1. 响应行（状态行）：协议、HTTP 响应状态码、状态信息
[*]2. 响应头：以键值对的格式携带的附加信息，比如：Content-Type
[*]3. 空行：分隔响应头，空行之后的是服务器返回的资源
[*]4. 响应体：返回的资源
https://i-blog.csdnimg.cn/direct/4bdacf303f9342b2892f0fe84fe3da8f.png
HTTP 响应状态码 HTTP 响应状态码：用来表明哀求 是否成功 完成 比如： 404（服务器找不到资源） https://i-blog.csdnimg.cn/direct/ceb258833662406283ca924b91207949.png 6.接口文档
接口文档 ： 描述 接口 的文章 （后端工程师） 接口 ：利用 AJAX 和服务器通讯时， 利用的 URL ， 哀求方法 ， 以及参数 传送门 ：https://apifox.com/apidoc/shared-1b0dd84f-faa8-435d-b355-5a8a329e34a8
https://i-blog.csdnimg.cn/direct/aa0970880a99423fa666de0c4a50ef81.png
通过接口文档，就可以根据里面的需求来实现代码。
7.案例 - 用户登录
案例－用户登录
[*]1. 点击登录时，判断用户名和密码长度
[*]2. 提交数据和服务器通讯
[*]3. 提示信息
[*]并且实现成功或者失败返回差别颜色的提示框
https://i-blog.csdnimg.cn/direct/885e84118ad94c928274746051fd27c6.png
https://i-blog.csdnimg.cn/direct/d91d51b58acd405eb50ab00a741b96fe.png
代码：
<!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>11.案例_登录</title>
<!-- 引入bootstrap.css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css">
<!-- 公共 -->
<style>
html,
body {
background-color: #EDF0F5;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.container {
width: 520px;
height: 540px;
background-color: #fff;
padding: 60px;
box-sizing: border-box;
}
.container h3 {
font-weight: 900;
}
</style>
<!-- 表单容器和内容 -->
<style>
.form_wrap {
color: #8B929D !important;
}
.form-text {
color: #8B929D !important;
}
</style>
<!-- 提示框样式 -->
<style>
.alert {
transition: .5s;
opacity: 0;
}
.alert.show {
opacity: 1;
}
</style>
</head>
<body>
<div class="container">
<h3>欢迎-登录</h3>
<!-- 登录结果-提示框 -->
<div class="alert alert-success" role="alert">
提示消息
</div>
<!-- 表单 -->
<div class="form_wrap">
<form>
<div class="mb-3">
<label for="username" class="form-label">账号名</label>
<input type="text" class="form-control username">
</div>
<div class="mb-3">
<label for="password" class="form-label">密码</label>
<input type="password" class="form-control password">
</div>
<button type="button" class="btn btn-primary btn-login"> 登 录 </button>
</form>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
// 目标1：点击登录时，用户名和密码长度判断，并提交数据和服务器通信
//不要盲目写代码，先写需求，然后再翻译成代码
const btn = document.querySelector('.btn-login')
const admin = document.querySelector('.alert')
btn.addEventListener('click', () => {
const username = document.querySelector('.username').value
const password = document.querySelector('.password').value
// 封装函数,提示用户登录状态
function status(mes, flag) {
// 1.显示提示框
admin.classList.add('show')
// 2.实现细节
admin.innerHTML = mes
const bgStyle = flag ? 'alert-success' : 'alert-danger'
admin.classList.add(bgStyle)
// 3.提示两秒后消失
timeOut = setTimeout(function () {
admin.classList.remove('show')
admin.classList.remove(bgStyle)
}, 2000)
}
if (username.length < 8) {
console.log('账户不能少于8位')
status('账户不能少于8位', false)
// 不满足条件就返回,不要往下执行
return
}
if (password.length < 6) {
console.log('密码不能少于6位')
status('密码不能少于6位', false)
// 不满足条件就返回,不要往下执行
return
}
// console.log(11)
axios({
url: 'http://hmajax.itheima.net/api/login',
method: 'POST',
// 属性名和属性值的变量名一样可以简写
data: {
username,
password
}
}).then(result => {
// 打印对象
console.log(result.data.message)
status(result.data.message, true)
}).catch(error => {
// 捕捉错误信息
console.log(error.response.data.message)
status(error.response.data.message, false)
})
})
</script>
</body>
</html>
8.form-serialize 插件
作用： 快速 收集表单元素的值 https://i-blog.csdnimg.cn/direct/f83394d3972c4cb3a42e6caf27d0194a.png
利用：
[*]1.引入form-serialize 插件的 js文件
[*]2.通过调用serialize(表单，对象)函数来实现
[*]利用serialize函数，快速收集表单元素的值
* 参数1：要获取哪个表单的数据
* 表单元素设置name属性，值会作为对象的属性名
* 参数2：配置对象
* hash 设置获取数据布局
* - true：JS对象（推荐）一般哀求体里提交给服务器
* - false: 查询字符串(username="Xxx" & )
* empty 设置是否获取空值
* - true: 获取空值（推荐）数据布局和标签布局同等
* - false：不获取空值
代码演示：
<body>
<form action="javascript:;" class="example-form">
<input type="text" name="uname">
<br>
<input type="text" name="pwd">
<br>
<input type="button" class="btn" value="提交">
</form>
<!--
目标：在点击提交时，使用form-serialize插件，快速收集表单元素值
-->
<!-- 引入插件的js -->
<script src="./lib/form-serialize.js"></script>
<script>
document.querySelector('.btn').addEventListener('click', () => {
// 获取表单对象
const form = document.querySelector('.example-form')
/**
* 2. 使用serialize函数，快速收集表单元素的值
* 参数1：要获取哪个表单的数据
*表单元素设置name属性，值会作为对象的属性名
*建议name属性的值，最好和接口文档参数名一致
* 参数2：配置对象
*hash 设置获取数据结构
* - true：JS对象（推荐）一般请求体里提交给服务器
* - false: 查询字符串(username="Xxx" & )
*empty 设置是否获取空值
* - true: 获取空值（推荐）数据结构和标签结构一致
* - false：不获取空值
*/
const data = serialize(form, { hash: true, empty: true })
console.log(data)
})
</script>
</body>
案例－用户登录 利用 form-serialize 插件， 收集 用户名和密码 https://i-blog.csdnimg.cn/direct/68e229ba8db24890bdeabab1c8fdc4e3.png
代码实现：
<body>
<div class="container">
<h3>欢迎-登录</h3>
<!-- 登录结果-提示框 -->
<div class="alert alert-success" role="alert">
提示消息
</div>
<!-- 表单 -->
<div class="form_wrap">
<form class="login-form">
<div class="mb-3">
<label for="username" class="form-label">账号名</label>
<input type="text" class="form-control username" name="username">
</div>
<div class="mb-3">
<label for="password" class="form-label">密码</label>
<input type="password" class="form-control password" name="password">
</div>
<button type="button" class="btn btn-primary btn-login"> 登 录 </button>
</form>
</div>
</div>
<script src="./lib/form-serialize.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
// 目标1：点击登录时，用户名和密码长度判断，并提交数据和服务器通信
// 目标2：使用提示框，反馈提示消息
// 目标3：使用form-serialize插件，收集用户名和密码
// 2.1 获取提示框
const myAlert = document.querySelector('.alert')
/**2.2 封装提示框函数，重复调用，满足提示需求
* 功能：
* 1. 显示提示框
* 2. 不同提示文字msg，和成功绿色失败红色isSuccess（true成功，false失败）
* 3. 过2秒后，让提示框自动消失
*/
function alertFn(msg, isSuccess) {
// 1> 显示提示框
myAlert.classList.add('show')
// 2> 实现细节
myAlert.innerText = msg
const bgStyle = isSuccess ? 'alert-success' : 'alert-danger'
myAlert.classList.add(bgStyle)
// 3> 过2秒隐藏
setTimeout(() => {
myAlert.classList.remove('show')
// 提示：避免类名冲突，重置背景色
myAlert.classList.remove(bgStyle)
}, 2000)
}
// 1.1 登录-点击事件
document.querySelector('.btn-login').addEventListener('click', () => {
// 1.2 获取用户名和密码
// 获取表单对象
const form = document.querySelector('.login-form')
// 利用serialize插件来实现获取表单的值
const data = serialize(form, { hash: true, empty: true })
// 利用解构简化开发
const { username, password } = data
console.log(data)
// const username = document.querySelector('.username').value
// const password = document.querySelector('.password').value
// console.log(username, password)
// 1.3 判断长度
if (username.length < 8) {
alertFn('用户名必须大于等于8位', false)
console.log('用户名必须大于等于8位')
return // 阻止代码继续执行
}
if (password.length < 6) {
alertFn('密码必须大于等于6位', false)
console.log('密码必须大于等于6位')
return // 阻止代码继续执行
}
// 1.4 基于axios提交用户名和密码
// console.log('提交数据到服务器')
axios({
url: 'http://hmajax.itheima.net/api/login',
method: 'POST',
data: {
username,
password
}
}).then(result => {
alertFn(result.data.message, true)
console.log(result)
console.log(result.data.message)
}).catch(error => {
alertFn(error.response.data.message, false)
console.log(error)
console.log(error.response.data.message)
})
})
</script>
</body>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]