AJAX的原理（重点）

◆ XMLHttpRequest

  • 什么是XMLHttpRequest？

定义：

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

 注意：直白点说就是axios内部就是封装了XMLHttpRequest这个对象来实现发送异步请求的

  • 使用 XMLHttpRequest

步骤：

1. 创建 XMLHttpRequest 对象

2. 配置请求方法和请求 url 地址

3. 监听 loadend 事件，接收响应结果

4. 发起请求

 1.无参数的情况

获取并展示所有省份名字 

  //1. 创建 XMLHttpRequest 对象const xhr = new XMLHttpRequest()//2. 配置请求方法和请求 url 地址xhr.open('GET','http://hmajax.itheima.net/api/province')//3. 监听 loadend 事件，接收响应结果xhr.addEventListener('loadend',function(){console.log(xhr.response);const rs = JSON.parse(xhr.response)console.log(rs.list.join('<br>'));document.querySelector('p').innerHTML = rs.list.join('<br>')})//4. 发起请求xhr.send()

 2.有URL查询参数的情况

  •  使用字符串拼接

  • 使用浏览器提供的内置对对象 URLSearchParams
 // 1. 组织查询参数字符串const qObj = {pname: '辽宁省',cname: '大连市'}// 2查询参数对象 -> 查询参数字符串const paramsObj = new URLSearchParams(qObj)const queryString = paramsObj.toString()console.log(queryString)// 3. 使用XHR对象，查询地区列表const xhr = new XMLHttpRequest()xhr.open('GET', `http://hmajax.itheima.net/api/area?${queryString}`)xhr.addEventListener('loadend', () => {console.log(xhr.response)const data = JSON.parse(xhr.response)console.log(data)const htmlStr = data.list.map(areaName => {return `<li class="list-group-item">${areaName}</li>`}).join('')console.log(htmlStr)})xhr.send()

 3.以请求体（JSON）的方式发送数据的情况

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

核心：

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

请求体携带 JSON 字符串

/*** 目标：使用xhr进行数据提交-完成注册功能*/document.querySelector('.reg-btn').addEventListener('click', () => {const xhr = new XMLHttpRequest()xhr.open('POST', 'http://hmajax.itheima.net/api/register')xhr.addEventListener('loadend', () => {console.log(xhr.response)})// 设置请求头-告诉服务器内容类型（JSON字符串）xhr.setRequestHeader('Content-Type', 'application/json')// 准备提交的数据const userObj = {username: 'itheima007',password: '7654321'}//将对象转化成JSON字符串const userStr = JSON.stringify(userObj)// 设置请求体，发起请求xhr.send(userStr)})

 

总结： 

. AJAX 原理是什么？

  • ➢ XMLHttpRequest 对象

2. 为什么学习 XHR？

  • ➢ 有更多与服务器数据通信方式
  • ➢ 了解 axios 内部原理

3. XHR 使用步骤？

  • ➢ 创建 XHR 对象
  • ➢ 调用 open 方法，设置 url 和请求方法
  • ➢ 监听 loadend 事件，接收结果
  • ➢ 调用 send 方法，发起请求 
4.上传图片等二进制的情况
 //4  上传图片等二进制的情况//1. 获取图片文件document.querySelector('.upload').addEventListener('change',(e)=>{//  console.log(e.target.files); //2. 使用 FormData 携带图片文件const fd = new FormData()// append()  追加元素fd.append('img',e.target.files[0])//3 使用XmlHttpRequest提交数据const xhr = new XMLHttpRequest()//设置方法和urlxhr.open('POST','http://hmajax.itheima.net/api/uploadimg')//设置回调函数xhr.addEventListener('loadend',function(){console.log(xhr.response);  //这里不是一个对象，是字符串 console.log(JSON.parse(xhr.response));document.querySelector('img').src = JSON.parse(xhr.response).data.url})xhr.send(fd)})

 

 

 

◆ Promise

什么是 Promise？

  • 表示（管理）一个异步操作最终状态和结果值的对象

定义：

Promise 使用步骤

 

 Promise - 三种状态

概念：一个Promise对象，必然处于以下几种状态之一

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

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

<!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+XHR_获取省份列表</title>
</head><body><p class="my-p"></p><script>/*** 目标：使用Promise管理XHR请求省份列表*  1. 创建Promise对象*  2. 执行XHR异步代码，获取省份列表*  3. 关联成功或失败函数，做后续处理*/// 1. 创建Promise对象const p = new Promise((resolve, reject) => {// 2. 执行XHR异步代码，获取省份列表const xhr = new XMLHttpRequest()xhr.open('GET', 'http://hmajax.itheima.net/api/province')xhr.addEventListener('loadend', () => {// xhr如何判断响应成功还是失败的？// 2xx开头的都是成功响应状态码if (xhr.status >= 200 && xhr.status < 300) {resolve(JSON.parse(xhr.response))} else {reject(new Error(xhr.response))}})xhr.send()})// 3. 关联成功或失败函数，做后续处理p.then(result => {console.log(result)document.querySelector('.my-p').innerHTML = result.list.join('<br>')}).catch(error => {// 错误对象要用console.dir详细打印console.dir(error)// 服务器返回错误提示消息，插入到p标签显示document.querySelector('.my-p').innerHTML = error.message})</script>
</body></html>

总结 

◆ 封装简易版 axios

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))}})if (config.data) {const jsonStr = JSON.stringify(config.data)xhr.setRequestHeader('Content-Type', 'application/json')xhr.send(jsonStr)} else {xhr.send()}})
}

◆ 案例 - 天气预报

步骤：

1. 获取北京市天气数据，展示

2. 搜索城市列表，展示

3. 点击城市，显示对应天气数据

<!DOCTYPE html>
<html lang="zh-CN"><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"><link rel="stylesheet" href="./css/reset.css"><link rel="stylesheet" href="./css/index.css"><title>案例_天气预报</title>
</head><body><div class="container"><!-- 顶部 --><div class="top-box"><div class="title"><span class="dateShort">10月28日</span><span class="calendar">农历&nbsp;<span class="dateLunar">十月初四</span></span></div><div class="search-box"><div class="location"><img src="./imgs/定位.png" alt=""><span class="area">城市名</span></div><!-- 搜索框+搜索列表 --><div class="search"><input type="text" class="search-city" placeholder="搜索城市"><ul class="search-list"><li class="city-item">北京市</li></ul></div></div></div><!-- 当前天气 --><div class="weather-box"><div class="tem-box"><span class="temp"><span class="temperature">12</span><span>°</span></span></div><div class="climate-box"><div class="air"><span class="psPm25">55</span><span class="psPm25Level">良</span></div><ul class="weather-list"><li><img src="./imgs/小雨-line.png" class="weatherImg" alt=""><span class="weather">多云</span></li><li class="windDirection">东南风</li><li class="windPower">2级</li></ul></div></div><div class="today-weather"><div class="range-box"><span>今天：</span><span class="range"><span class="weather">晴</span><span class="temNight">9</span><span>-</span><span class="temDay">14</span><span>℃</span></span></div><ul class="sun-list"><li><span>紫外线</span><span class="ultraviolet">强</span></li><li><span>湿度</span><span class="humidity">53</span>%</li><li><span>日出</span><span class="sunriseTime">06:38</span></li><li><span>日落</span><span class="sunsetTime">17:18</span></li></ul></div><!-- 周天气预报 --><div class="week-weather-box"><div class="title">7日内天气预报</div><ul class="week-wrap"><li class="item"><div class="date-box"><span class="dateFormat">今天</span><span class="date">10月28日</span></div><img src="./imgs/多云.png" alt="" class="weatherImg"><span class="weather">多云</span><div class="temp"><span class="temNight">12</span>-<span class="temDay">12</span><span>℃</span></div><div class="wind"><span class="windDirection">东南风</span><span class="windPower">&lt;3级</span></div></li><li class="item"><div class="date-box"><span class="dateFormat">今天</span><span class="date">10月28日</span></div><img src="./imgs/多云.png" alt="" class="weatherImg"><span class="weather">多云</span><div class="temp"><span class="temDay">12</span>-<span class="temNight">12</span><span>℃</span></div><div class="wind"><span class="windDirection">东南风</span><span class="windPower">&lt;3级</span></div></li><li class="item"><div class="date-box"><span class="dateFormat">今天</span><span class="date">10月28日</span></div><img src="./imgs/多云.png" alt="" class="weatherImg"><span class="weather">多云</span><div class="temp"><span class="temDay">12</span>-<span class="temNight">12</span><span>℃</span></div><div class="wind"><span class="windDirection">东南风</span><span class="windPower">&lt;3级</span></div></li><li class="item"><div class="date-box"><span class="dateFormat">今天</span><span class="date">10月28日</span></div><img src="./imgs/多云.png" alt="" class="weatherImg"><span class="weather">多云</span><div class="temp"><span class="temDay">12</span>-<span class="temNight">12</span><span>℃</span></div><div class="wind"><span class="windDirection">东南风</span><span class="windPower">&lt;3级</span></div></li><li class="item"><div class="date-box"><span class="dateFormat">今天</span><span class="date">10月28日</span></div><img src="./imgs/多云.png" alt="" class="weatherImg"><span class="weather">多云</span><div class="temp"><span class="temDay">12</span>-<span class="temNight">12</span><span>℃</span></div><div class="wind"><span class="windDirection">东南风</span><span class="windPower">&lt;3级</span></div></li><li class="item"><div class="date-box"><span class="dateFormat">今天</span><span class="date">10月28日</span></div><img src="./imgs/多云.png" alt="" class="weatherImg"><span class="weather">多云</span><div class="temp"><span class="temDay">12</span>-<span class="temNight">12</span><span>℃</span></div><div class="wind"><span class="windDirection">东南风</span><span class="windPower">&lt;3级</span></div></li><li class="item"><div class="date-box"><span class="dateFormat">今天</span><span class="date">10月28日</span></div><img src="./imgs/多云.png" alt="" class="weatherImg"><span class="weather">多云</span><div class="temp"><span class="temDay">12</span>-<span class="temNight">12</span><span>℃</span></div><div class="wind"><span class="windDirection">东南风</span><span class="windPower">&lt;3级</span></div></li></ul></div></div><!-- 自己封装myAxios函数 --><script src="./js/my-axios.js"></script><!-- 搜索框+下拉菜单出现逻辑 --><script src="./js/search.js"></script><!-- 核心js --><script src="./js/index.js"></script><script>//1 获取默认城市的天气预报function getWeather(cityCode){myAxios({url: 'http://hmajax.itheima.net/api/weather',params: {city: cityCode}}).then(result=>{//渲染数据console.log(result);const wObj = result.data//更新城市名document.querySelector('.area').innerHTML = result.data.area//当前日期document.querySelector('.title').innerHTML = `<span class="dateShort">${wObj.dateShort}</span><span class="calendar">农历&nbsp;<span class="dateLunar">${wObj.dateLunar}</span></span>`//当前气候document.querySelector('.climate-box').innerHTML = `<div class="air"><span class="psPm25">${wObj.psPm25}</span><span class="psPm25Level">${wObj.psPm25Level}</span></div><ul class="weather-list"><li><img src=${wObj.weatherImg} class="weatherImg" alt=""><span class="weather">${wObj.weather}</span></li><li class="windDirection">${wObj.windDirection}</li><li class="windPower">${wObj.windPower}</li></ul> `//当前温度document.querySelector('.tem-box').innerHTML = `<span class="temp"><span class="temperature">${wObj.temperature}</span><span>°</span></span>`const todayWeather = wObj.todayWeatherdocument.querySelector('.today-weather').innerHTML = `<div class="range-box"><span>今天：</span><span class="range"><span class="weather">${todayWeather.weather}</span><span class="temNight">${todayWeather.temNight}</span><span>-</span><span class="temDay">${todayWeather.temDay}</span><span>℃</span></span></div><ul class="sun-list"><li><span>紫外线</span><span class="ultraviolet">${todayWeather.ultraviolet}</span></li><li><span>湿度</span><span class="humidity">${todayWeather.humidity}</span>%</li><li><span>日出</span><span class="sunriseTime">${todayWeather.sunriseTime}</span></li><li><span>日落</span><span class="sunsetTime">${todayWeather.sunsetTime}</span></li></ul>`// <!-- 周天气预报 -->document.querySelector('.week-wrap').innerHTML =  wObj.dayForecast.map((item)=>`<li class="item"><div class="date-box"><span class="dateFormat">${item.dateFormat}</span><span class="date">${item.date}</span></div><img src=${item.weatherImg} alt="" class="weatherImg"><span class="weather">多云</span><div class="temp"><span class="temNight">${item.temNight}</span>-<span class="temDay">${item.temDay}</span><span>℃</span></div><div class="wind"><span class="windDirection">${item.windDirection}</span><span class="windPower">${item.windPower}</span></div></li>`).join('')})}getWeather('450700')//2 搜索城市列表document.querySelector('.search-city').addEventListener('input',function(e){//得到输入的内容const value = e.target.value// console.log(value);// 使用ajax调用接口myAxios({url: 'http://hmajax.itheima.net/api/weather/city',params: {city: value}}).then(result=>{//  console.log(result);document.querySelector('.search-list').innerHTML = result.data.map(item=>`<li class="city-item" data-code="${item.code}">${item.name}</li>`)})})//使用事件委托，给每个搜索出来的li加点击事件document.querySelector('.search-list').addEventListener('click',function(e){if(e.target.classList.contains('city-item')){// console.log(222);//获取自定义属性let code = e.target.dataset.code//调用天气函数console.log(code);getWeather(code)}})</script>
</body></html>

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/250617.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【lesson2】定长内存池的实现

【lesson2】定长内存池的实现

文章目录 介绍定长内存池的设计定长内存池的实现需要成员变量需要的成员函数定长内存池结构定长内存池Delete&#xff08;释放空间&#xff09;的实现定长内存池New&#xff08;申请空间&#xff09;的实现 定长内存池的实现完整版 介绍 作为程序员(C/C)我们知道申请内存使用的…
阅读更多...
鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Gauge组件

鸿蒙（HarmonyOS）项目方舟框架（ArkUI）之Gauge组件

鸿蒙&#xff08;HarmonyOS&#xff09;项目方舟框架&#xff08;ArkUI&#xff09;之Gauge组件 一、操作环境 操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1 二、Gauge组件 数据量规图表组件&#xff0c;用于将数据展示为环形图表。 子组件 无…
阅读更多...
【机器学习】科学库使用手册第2篇：机器学习任务和工作流程（已分享，附代码）

【机器学习】科学库使用手册第2篇：机器学习任务和工作流程（已分享，附代码）

本系列文章md笔记&#xff08;已分享&#xff09;主要讨论人工智能相关知识。主要内容包括&#xff0c;了解机器学习定义以及应用场景&#xff0c;掌握机器学习基础环境的安装和使用&#xff0c;掌握利用常用的科学计算库对数据进行展示、分析&#xff0c;学会使用jupyter note…
阅读更多...
LabVIEW叶片厚度远程监控

LabVIEW叶片厚度远程监控

LabVIEW叶片厚度远程监控 随着网络技术的高速发展&#xff0c;远程监控广泛应用在各个领域。本文介绍了一种基于LabVIEW的植物叶片厚度远程监控系统&#xff0c;旨在实现对植物生长状况的精准监测和分析。 该系统利用LabVIEW软件开发工具&#xff0c;通过TCP网络协议实现数据…
阅读更多...
[嵌入式系统-6]：龙芯1B 开发学习套件 -3-软件层次架构

[嵌入式系统-6]：龙芯1B 开发学习套件 -3-软件层次架构

目录 一、龙芯软件架构 1.1 通用软件架构 1.2 龙芯软件架构 1.3 龙芯各种应用程序 1.4 龙芯SOC芯片硬件&#xff1a;龙芯1B 1.5 PMON软件 1.6 龙芯IDE管辖的软件 &#xff08;1&#xff09;CPU Core驱动程序 &#xff08;2&#xff09;SOC芯片外设驱动程序 &#xff…
阅读更多...
近期CCF系列会议截稿时间

近期CCF系列会议截稿时间

专属领域会议订阅 关注{晓理紫}&#xff0c;每日更新会议信息&#xff0c;如感兴趣&#xff0c;请转发给有需要的同学&#xff0c;谢谢支持 如果你感觉对你有所帮助&#xff0c;请关注我&#xff0c;每日准时为你推送最新会议信息。 CSFW (CCF B) IEEE Computer Security Foun…
阅读更多...
opencv-python计算视频光流

opencv-python计算视频光流

光流基本概念 光流表示的是相邻两帧图像中每个像素的运动速度和运动方向。具体&#xff1a;光流是空间运动物体在观察成像平面上的像素运动的瞬时速度&#xff0c;是利用图像序列中像素在时间域上的变化以及相邻帧之间的相关性来找到上一帧跟当前帧之间存在的对应关系&#xf…
阅读更多...
RISC-V指令格式

RISC-V指令格式

RISC-V指令格式 1 RISC-V指令集命名规范2 RISC-V指令集组成2.1 基础整数指令集2.2 扩展指令集 3 RISC-V指令格式3.1 指令表述3.2 指令格式 本文属于《 RISC-V指令集基础系列教程》之一&#xff0c;欢迎查看其它文章。 1 RISC-V指令集命名规范 前面提到过RV32I&#xff0c;这是…
阅读更多...
谷粒商城【成神路】-【4】——分类维护

谷粒商城【成神路】-【4】——分类维护

目录 1.删除功能的实现 2.新增功能的实现 3.修改功能的实现 4.拖拽功能 1.删除功能的实现 1.1逻辑删除 逻辑删除&#xff1a;不删除数据库中真实的数据&#xff0c;用指定字段&#xff0c;显示的表示是否删除 1.在application.yml中加入配置 mybatis-plus:global-config:…
阅读更多...
基于springboot校园二手书交易管理系统源码和论文

基于springboot校园二手书交易管理系统源码和论文

在Internet高速发展的今天&#xff0c;我们生活的各个领域都涉及到计算机的应用&#xff0c;其中包括乐校园二手书交易管理系统的网络应用&#xff0c;在外国二手书交易管理系统已经是很普遍的方式&#xff0c;不过国内的管理系统可能还处于起步阶段。乐校园二手书交易管理系统…
阅读更多...
WebAssembly002 FFmpegWasmLocalServer项目

WebAssembly002 FFmpegWasmLocalServer项目

项目介绍 https://github.com/incubated-geek-cc/FFmpegWasmLocalServer.git可将音频或视频文件转换为其他可选的多媒体格式&#xff0c;并导出转码的结果 $ bash run.sh FFmpeg App is listening on port 3000!运行效果 相关依赖 Error: Cannot find module ‘express’ …
阅读更多...
《Linux软件编程》的初步认识

《Linux软件编程》的初步认识

一&#xff0c;Linux的认知&#xff1a; Linux 实际上来说是操作系统的内核&#xff0c;ubuntu是操作系统&#xff08;包括redhat&#xff0c;centos&#xff0c;freebsd等&#xff09; Linux(操作系统化的内核)&#xff1a; 1.管理CPU 2.管理内存 3.管理硬…
阅读更多...
基于WordPress开发微信小程序2：决定开发一个wordpress主题

基于WordPress开发微信小程序2：决定开发一个wordpress主题

上一篇&#xff1a;基于WordPress开发微信小程序1&#xff1a;搭建Wordpress-CSDN博客 很快发现一个问题&#xff0c;如果使用别人的主题模板&#xff0c;多多少少存在麻烦&#xff0c;所以一咬牙&#xff0c;决定自己开发一个主题模板&#xff0c;并且开源在gitee上&#xff…
阅读更多...
redis 6.x集群搭建

redis 6.x集群搭建

redis6集群搭建 安装文件下载 redis-6.2.6.tar.gz 编译 tar -zxvf redis-6.2.6.tar.gz cd redis-6.2.6/ make MALLOClibc make install PREFIX/opt/soft/redis复制可执行文件 cp /opt/soft/redis/redis-cli /usr/bin/redis-cli cp /opt/soft/redis/redis-server /usr/bi…
阅读更多...
2024 Flutter 重大更新，Dart 宏（Macros）编程开始支持，JSON 序列化有救

2024 Flutter 重大更新，Dart 宏（Macros）编程开始支持，JSON 序列化有救

说起宏编程可能大家并不陌生&#xff0c;但是这对于 Flutter 和 Dart 开发者来说它一直是一个「遗憾」&#xff0c;这个「遗憾」体现在编辑过程的代码修改支持上&#xff0c;其中最典型的莫过于 Dart 的 JSON 序列化。 举个例子&#xff0c;目前 Dart 语言的 JSON 序列化高度依…
阅读更多...
2024 年， Web 前端开发趋势

2024 年， Web 前端开发趋势

希腊哲学家赫拉克利特认为&#xff0c;变化是生命中唯一不变的东西。这句话适用于我们的个人生活、行业和职业领域。 尤其是前端开发领域&#xff0c;新技术、开发趋势、库和框架不断涌现&#xff0c;变化并不陌生。最近发生的一些事件正在改变开发人员构建网站和 Web 应用的方…
阅读更多...
Vue2+ElementUI 弹窗全局拖拽 支持放大缩小

Vue2+ElementUI 弹窗全局拖拽 支持放大缩小

拖拽组件 dialogDrag.vue <template><div></div> </template> <script>export default {name: dialogDrag,data() {return {originalWidth: null,originalHeight: null}},created() {this.$nextTick(()>{this.dialogDrag()})},mounted() {}…
阅读更多...
业务流程自动化平台在制造业应用案例，助力业务自动化、智能化

业务流程自动化平台在制造业应用案例，助力业务自动化、智能化

捷昌驱动成立于2000年&#xff0c;并于2018年9月在上海证券交易所上市&#xff0c;是一家专注于线性驱动产品研发、生产及销售的科技集团。 公司整合全球资源&#xff0c;为智慧办公、医疗康护、智能家居、工业自动化等关联产业提供驱动及智能控制解决方案&#xff0c;以科技驱…
阅读更多...
一站式在线协作开源办公软件ONLYOFFICE，协作更安全更便捷

一站式在线协作开源办公软件ONLYOFFICE，协作更安全更便捷

1、ONLYOFFICE是什么&#xff1f; ONLYOFFICE是一款功能强大的在线协作办公软件&#xff0c;可以创建编辑Word文档、Excel电子表格&#xff0c;PowerPoint&#xff08;PPT&#xff09;演示文稿、Forms表单等多种文件。ONLYOFFICE支持多个平台&#xff0c;无论使用的是 Windows、…
阅读更多...
了解UDP发送过快导致的问题和对应解决方案

了解UDP发送过快导致的问题和对应解决方案

在当今这个以数据为核心的时代&#xff0c;企业对于数据传输的速度和稳定性有着日益增长的需求。UDP凭借其低延迟和高效率的特性&#xff0c;在实时通信和大规模数据传输领域扮演着关键角色。然而&#xff0c;UDP的无连接特性和缺乏可靠性也给数据传输带来了挑战&#xff0c;尤…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发