当前位置： 首页 > news >正文

AJAX学习（2）

news 2025/8/16 18:18:47

目录

一.XMLHttpRequest

二.XMLHttpRequest——查询参数

三.案例——地区查询

四.XMLHttpRequest_数据提交

五.Promise

六.Promise三种状态

七.Promiseee+XHR获取省份列表（案例）

八.封装-简易axios-获取省份列表

九.封装-简易axios-获取地区列表

十.封装-简易axios-注册用户 

一.XMLHttpRequest

1.XMLHttpRequest定义：

        XMLHttpRequest(XHR)对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。XMLHttpRequest 在AJAX 编程中被大量使用。

2.关系：axios内部采用XMLHttpRequest与服务器交互

3.使用

  • 创建XMLHttpRequest对象
const xhr = new XMLRequest()
xhr.open('请求方法','请求URL网址')
xhr.addEventListener('loadend', ()=>{console.log(xhr.response)
})
xhr.send()
  • 配置请求方法和请求URL地址
  • 监听loadend事件，接受响应结果
  • 发起请求

4.案例：

<!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>XMLHttpRequest_基础使用</title>
</head><body><p class="my-p8"></p>
<script>/*** 目标：使用XMLHttpRequest对象与服务器通信*  1. 创建 XMLHttpRequest 对象*  2. 配置请求方法和请求 url 地址*  3. 监听 loadend 事件，接收响应结果*  4. 发起请求*/const xhr = new XMLHttpRequest()xhr.open('GET', 'https://hmajax.itheima.net/api/province')xhr.addEventListener('loadend', ()=> {console.log(xhr.response)//转换为了对象const  data = JSON.parse(xhr.response)console.log(data.list.join('<br>'))document.querySelector('.my-p8').innerHTML = data.list.join('<br>')})xhr.send()</script>
</body></html>

二.XMLHttpRequest——查询参数

1.定义：浏览器提供给服务i的额外信息，让服务器返回浏览器想要的数据

2.语法：http://xxxx.com/xxxx/xxxx?参数名1 = 值1 & 参数名2 = 值2

3.案例：

<!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>XMLHttpRequest_查询参数</title>
</head><body>
<p class="hello"></p>
<script>/*** 目标：使用XHR携带查询参数，展示某个省下属的城市列表*/const xhr = new XMLHttpRequest();xhr.open('GET', 'https://hmajax.itheima.net/api/city?pname=辽宁省');xhr.addEventListener('loadend', () => {console.log(xhr.response);const data = JSON.parse(xhr.response);console.log(data.list.join('<br>'));document.querySelector('.hello').innerHTML = data.list.join('<br>')})xhr.send();
</script>
</body></html>

三.案例——地区查询

<!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>案例_地区查询</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"><style>:root {font-size: 15px;}body {padding-top: 15px;}</style>
</head><body>
<div class="container"><form id="editForm" class="row"><!-- 输入省份名字 --><div class="mb-3 col"><label class="form-label">省份名字</label><input type="text" value="北京" name="province" class="form-control province" placeholder="请输入省份名称" /></div><!-- 输入城市名字 --><div class="mb-3 col"><label class="form-label">城市名字</label><input type="text" value="北京市" name="city" class="form-control city" placeholder="请输入城市名称" /></div></form><button type="button" class="btn btn-primary sel-btn">查询</button><br><br><p>地区列表: </p><ul class="list-group"><!-- 示例地区 --><li class="list-group-item">东城区</li></ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>/*** 目标: 根据省份和城市名字, 查询对应的地区列表*///1.查询按钮绑定点击事件document.querySelector('.sel-btn').addEventListener('click', ()=>{//2.获取输入框的值const pname = document.querySelector('.province').valueconst cname = document.querySelector('.city').value//3.组织查询参数到字符串const qOBJ = {pname,cname}const paramsOBJ = new URLSearchParams(qOBJ)const queryString = paramsOBJ.toString()console.log(queryString)//4.清空现有列表document.querySelector('.list-group').innerHTML = '<li class="list-group-item">加载中...</li>'//5.使用fetch查询地区列表fetch(`https://hmajax.itheima.net/api/area?${queryString}`).then(response => {if (!response.ok) {throw new Error('网络响应不正常')}return response.json()}).then(data => {console.log(data)// 使用反引号创建模板字符串const htmlStr = data.list.map(areaName => {return `<li class="list-group-item">${areaName}</li>`}).join('')console.log(htmlStr)document.querySelector('.list-group').innerHTML = htmlStr}).catch(error => {console.error('查询失败:', error)document.querySelector('.list-group').innerHTML = `<li class="list-group-item text-danger">查询失败: ${error.message}</li>`})})
</script>
</body>
</html>

四.XMLHttpRequest_数据提交

1.需求：通过XHR提交用户名和密码，完成注册功能

请求头设置Content-Type：application/json

请求体携带JSON字符串

const xhr = new XMLHttpRequest()
xhr.open('请求方法','请求URL网址')
xhr.addEventListener('loadend',()=>{console.log(xhr.response)
})
//告诉服务器，我传递的内容类型，是JSON字符串
xhr.setRequestHeader('Content-Type','application/json')
//准备数据并转成JSON字符串
const user = {username:'用户名'， password:'密码'}
const userStr = JSON.stringify(user)
//发送请求体
xhr.send(userStr)

2.案例：

<!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>XMLHttpRequest_数据提交</title>
</head><body>
<button class="reg-btn">注册用户</button>
<script>/*** 目标：使用xhr进行数据提交-完成注册功能*/document.querySelector('.reg-btn').addEventListener('click', () => {const xhr = new XMLHttpRequest()xhr.open('POST','https://hmajax.itheima.net/api/register')xhr.addEventListener('loadend',()=>{console.log(xhr.response)})
//告诉服务器，我传递的内容类型，是JSON字符串xhr.setRequestHeader('Content-Type','application/json')
//准备数据并转成JSON字符串const user = {username:'huopengzhao', password:'123456'}const userStr = JSON.stringify(user)
//发送请求体xhr.send(userStr)})
</script>
</body></html>

五.Promise

1.定义：Promise对象用于表示一个异步操作的最终完成（或失败）及其结果值

2.好处：

  • 逻辑更清晰
  • 了解axios函数内部的运行机制
  • 能够解决回调函数低于问题
//1.创建promise对象
const p = new Promise((resolve, reject) =>{//2.执行异步任务-并传递结果//成功调用：resolve（值）触发then()执行//失败调用：reject（值）触发catch（）执行})
//3.接受结果
p.then(result =>{//成功
}).catch（error=》{//失败
}）

案例：

<!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>认识Promise</title>
</head><body>
<script>/*** 目标：使用Promise管理异步任务*/const p = new Promise((resolve, reject) => {//执行异步代码setTimeout(() => {//成功调用resolve（.then接受），失败调用reject（.catch接受）//resolve('模拟AJAX请求成功')reject(new Error('模拟AJAX请求失败'))},2000)})//3.获取结果p.then((result) => {console.log(result)}).catch((error) => {console.log(error)})
</script>
</body></html>

六.Promise三种状态

1.作用：了解Promise对象如何关联的处理函数，以及代码执行顺序

2.概念：一个promise对象必将处于以下几种状态

（Promise对象一旦被兑现/拒绝就是已敲定，状态无法再被改变）

  • 待定（pending）：初始状态，既没有兑现，也没有拒绝
  • 已兑现（fulfilled）：意味着操作成功完成
  • 已拒绝（rejected）：意味着操作失败

3.案例

 /*** 目标：认识Promise状态*/// 1. 创建Promise对象(pending-待定状态)const p = new Promise((resolve, reject) => {console.log('Promise对象开始执行')// 2. 执行异步代码setTimeout(() => {// resolve('模拟AJAX请求-成功结果')//resolve()=>'fulfilled状态-已兑现'=>then()//reject()=>'rejected状态-已拒绝'=>catch()reject(new Error('模拟AJAX请求-失败结果'))}, 2000)})console.log(p)// 3. 获取结果p.then(result => {console.log(result)}).catch(error => {console.log(error)})

七.Promiseee+XHR获取省份列表（案例）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>案例_使用Promise+XHR_获取省份列表</title>
</head>
<body>
<p class="hello"></p><script>const p = new Promise((resolve, reject) => {const xhr = new XMLHttpRequest()xhr.open('GET', 'https://hmajax.itheima.net/api/province')xhr.addEventListener('load', () => {if (xhr.status >= 200 && xhr.status < 300) {try {const response = JSON.parse(xhr.response)resolve(response)} catch (e) {reject(new Error('解析JSON失败'))}} else {reject(new Error(`请求失败: ${xhr.status}`))}})xhr.addEventListener('error', () => {reject(new Error('网络请求失败'))})xhr.send()})p.then(result => {console.log(result)if (result.list && Array.isArray(result.list)) {document.querySelector('.hello').innerHTML = result.list.join('<br>')} else {throw new Error('返回数据格式不正确')}}).catch(error => {console.error(error)document.querySelector('.hello').innerHTML = `加载失败: ${error.message}`})
</script>
</body>
</html>

八.封装-简易axios-获取省份列表

需求：基于Promise+XHR封装myAxios函数，获取省份列表

步骤：

  1. 定义myAxios函数，接收配置对象，返回Promise对象
  2. 发起XHR请求，默认请求方法为GET
  3. 调用成功/失败的处理程序
  4. 使用myAxios函数，获取省份列表展示
function myAxios(config){return new Promise((resolve,reject) =>{//xhr请求//调用成功/失败的处理程序
})
}
myAxios（{url:'目标资源地址'
}）.then(result => {}).catch(error => {})

代码实现：

<!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>封装_简易axios函数_获取省份列表</title>
</head><body>
<p class="hello"></p>
<script>/*** 目标：封装_简易axios函数_获取省份列表*  1. 定义myAxios函数，接收配置对象，返回Promise对象*  2. 发起XHR请求，默认请求方法为GET*  3. 调用成功/失败的处理程序*  4. 使用myAxios函数，获取省份列表展示*/function myAxios(config){return new Promise((resolve,reject) =>{//xhr请求//调用成功/失败的处理程序const xhr = new XMLHttpRequest()xhr.open(config.method || 'GET', config.url)xhr.addEventListener('loadend', () => {if(xhr.status >= 200 && xhr.status < 300){resolve(JSON.parse(xhr.responseText))}else {reject(new Error(xhr.response))}})xhr.send()})}myAxios({url:'https://hmajax.itheima.net/api/province'}).then(result => {console.log(result)document.querySelector('.hello').innerHTML = result.list.join('<br>')}).catch(error => {console.log(error)document.querySelector('.hello').innerHTML = error.message})
</script>
</body></html>

九.封装-简易axios-获取地区列表

需求：修改myAxios函数支持传递查询参数，获取‘辽宁省’，‘大连市’对应地区列表展示

要求

  1. myAxios函数调用后，传入params选项
  2. 基于URLSearchParams转换查询字符串
  3. 使用自己封装的myAxios函数展示地区列表
function myAxios(config){return new Promise((resolve, reject) => {//XHR请求 - 判断params选项，携带查询参数//调用成功/失败的处理程序
})
}myAxios（{url:'目标自已按地址'，params：{参数名1：值1，参数名2：值2}
}）

代码展示：

<!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>封装_简易axios函数_获取地区列表</title>
</head><body>
<p class="my-p"></p>
<script>/*** 目标：封装_简易axios函数_获取地区列表*  1. 判断有params选项，携带查询参数*  2. 使用URLSearchParams转换，并携带到url上*  3. 使用myAxios函数，获取地区列表*/function myAxios(config) {return new Promise((resolve, reject) => {const xhr = new XMLHttpRequest()//1.判断params选项，是否携带查询参数if(config.params){//2.使用URLSearchParams转换，并携带到url上const paramsObj = new URLSearchParams(config.params)const queryString = paramsObj.toString()//把查询参数字符串，拼接在url？后面config.url += `?${queryString}`}xhr.open(config.method || 'GET', config.url)xhr.addEventListener('loadend', () => {if (xhr.status >= 200 && xhr.status < 300) {resolve(JSON.parse(xhr.response))} else {reject(new Error(xhr.response))}})xhr.send()})}
//3.使用myAxios函数，获取地区列表myAxios({url:'https://hmajax.itheima.net/api/area',params:{pname: '辽宁省',cname: '大连市'}}).then(result =>{console.log(result)document.querySelector('.my-p').innerHTML = result.list.join('<br>')}).catch(error =>{console.log(error)document.querySelector('.my-p').innerHTML = error.message})</script>
</body></html>

十.封装-简易axios-注册用户 

需求：修改myAxios函数支持传递请求体数据，完成注册用户功能

步骤：

  1. myAxios函数调用后，判断data选项
  2. 转换数据类型，在send方法中发送
  3. 使用自己封装的myAxios函数完成注册用户功能
function myAxios(config){return new Promise((resolve, reject) => {//XHR请求 - 判断data选项，携带查询参数//调用成功/失败的处理程序
})
}myAxios（{url:'目标自已按地址'，data：{参数名1：值1，参数名2：值2}
}）

代码实现：

<!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>封装_简易axios函数_注册用户</title>
</head><body>
<button class="reg-btn">注册用户</button>
<script>/*** 目标：封装_简易axios函数_注册用户*  1. 判断有data选项，携带请求体*  2. 转换数据类型，在send中发送*  3. 使用myAxios函数，完成注册用户*/function myAxios(config) {return new Promise((resolve, reject) => {const xhr = new XMLHttpRequest()if (config.params) {const paramsObj = new URLSearchParams(config.params)const queryString = paramsObj.toString()config.url += `?${queryString}`}xhr.open(config.method || 'GET', config.url)xhr.addEventListener('loadend', () => {if (xhr.status >= 200 && xhr.status < 300) {resolve(JSON.parse(xhr.response))} else {reject(new Error(xhr.response))}})//1.判断data选项，是否携带请求体if (config.data) {const jsonStr = JSON.stringify(config.data)xhr.setRequestHeader('Content-Type', 'application/json')xhr.send(jsonStr)}else{//如果没有请求体数据，就正常发起请求xhr.send()}})}document.querySelector('.reg-btn').addEventListener('click', () => {//3.使用myAxios函数，完成注册用户myAxios({url:'https://hmajax.itheima.net/api/register',method:'POST',data:{username:'huopengzhao',password:'123456'}}).then(result => {console.log(result)}).catch(error => {console.log(error)})})
</script>
</body></html>

http://www.dtcms.com/a/329348.html

相关文章：

  • AI 创作系列（30）海狸 IM：小而全、易二开、快迭代
  • 八爪鱼和影刀的区别和优缺点
  • 【题解】[CQOI2006] 洛谷P4196 凸多边形 /【模板】半平面交
  • AI时代程序员的进化：从代码工人到创意架构师-优雅草卓伊凡引言：AI浪潮下的职业重构
  • Celery在Django中的应用
  • 排序总结---保研机试极限复习
  • 亚马逊聚焦战略2.0：从资源分散到价值聚焦的商业重构逻辑
  • 北京JAVA基础面试30天打卡09
  • Java面试宝典：ZGC
  • 【自动化运维神器Ansible】playbook主机清单变量深度解析：主机变量与组变量的实战应用
  • InfluxDB数据恢复
  • 在JVM跑JavaScript脚本 | Oracle GraalJS 简介与实践
  • MySQL数据库核心操作解析
  • 数据库基础—SQL语句总结及在开发时
  • 如何使用 Ollama 在本地设置并运行 Qwen3
  • 2025年高效能工程项目管理软件推荐榜单：AI重构工程进度可视化与资源动态调度体系
  • 【国内电子数据取证厂商龙信科技】RAID存储技术
  • Spring Boot 集成 机器人指令中枢ROS2工业机械臂控制网关
  • Linux系统之K8S基本命令概述
  • PyTorch基础(Numpy与Tensor)
  • 集成 OceanBase 并打印 SQL 日志
  • 老生常谈智能指针：《More Effective C++》的条款28
  • PCIe Base Specification解析（十一）
  • nginx高性能web服务器实验
  • 【114页PPT】基于SAPSRM数字化采购解决方案（附下载方式）
  • Java面试宝典：G1垃圾收集器下
  • hadoop 前端yarn查看
  • 完整源码+技术文档！基于Hadoop+Spark的鲍鱼生理特征大数据分析系统免费分享
  • 以太坊的下一个十年：Vitalik Buterin的愿景与挑战
  • Day51--图论--99. 岛屿数量（卡码网），100. 岛屿的最大面积（卡码网）