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.mzph.cn/news/654979.shtml

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

相关文章

C# 实现 gRPC 服务和调用

C# 实现 gRPC 服务和调用

写在前面 gRPC 是一种与语言无关的高性能远程过程调用 (RPC) 框架。 主要优点如下&#xff1a; 1.高性能轻量化。 2.协议优先的 API 定义模式&#xff0c;默认使用协议缓冲区&#xff0c;允许与语言无关的实现。 3.可用于多种语言的工具&#xff0c;以生成强类型服务器和客户…
阅读更多...
项目解决方案：市小区高清视频监控平台联网整合设计方案(上)

项目解决方案：市小区高清视频监控平台联网整合设计方案(上)

目 录 一、项目需求 1.1业务需求 1.2技术需求 1.3 环境要求 1.3.1 硬件要求 1.3.2 技术服务要求 二、系统设计方案 2.1 视频监控平台基础功能设计 2.2 视频资源及联网设备编码与管理设计 2.2.1 全省现有联网视频资源属性 2.2.2 视频资源编码具体格…
阅读更多...
Spring IoC容器（一）

Spring IoC容器（一）

IoC,Inversion of Control 控制反转&#xff0c;是一个过程。仅通过构造函数、工厂方法或在对象实例化后在对象实例上设置属性来定义其依赖关系。容器负责这些工作&#xff0c;这个过程从本质上来说是bean本身的反向&#xff0c;因此称为反向控制。 1 容器 负责实例化、配置及…
阅读更多...
C语言入门（二）、每日Linux（三）——gcc命令，通过gcc命令熟悉C语言程序实现的过程

C语言入门（二）、每日Linux（三）——gcc命令，通过gcc命令熟悉C语言程序实现的过程

使用gcc编译C语言程序 C语言程序实现的过程gcc命令基础用法常用选项编译和汇编选项&#xff1a;优化选项&#xff1a;调试选项&#xff1a;链接选项&#xff1a;警告选项&#xff1a; 实验对于-o选项 通过gcc命令熟悉C语言程序的执行过程1.预处理2.编译阶段3.汇编阶段4.链接阶段…
阅读更多...
Java 面试题之 IO（二）

Java 面试题之 IO（二）

字符流 文章目录 字符流Reader&#xff08;字符输入流&#xff09;Writer&#xff08;字符输出流&#xff09; 文章来自Java Guide 用于学习如有侵权&#xff0c;立即删除 不管是文件读写还是网络发送接收&#xff0c;信息的最小存储单元都是字节。 那为什么 I/O 流操作要分为字…
阅读更多...
Java 与 JavaScript的区别

Java 与 JavaScript的区别

Java 与 JavaScript的区别 Java 与 JavaScript&#xff1a;概述Java的特点JavaScript 的起源JavaScript 的特点Java 与 JavaScript&#xff0c;哪个更好&#xff1f;JavaScript 与 Java 相似吗&#xff1f;Java 与 JavaScript 的区别JavaScript 在服务器端的运行方式是怎样的&a…
阅读更多...
网络防御安全知识（第二版）

网络防御安全知识（第二版）

安全策略 传统的包过滤防火墙 --- 其本质为ACL列表&#xff0c;根据数据报中的特征进行过滤&#xff0c;之后对比规制&#xff0c; 执行动作。 五元组 --- 源IP&#xff0c; 目标IP&#xff0c;源端口&#xff0c; 目标端口&#xff0c;协议 安全策略 --- 相较于ACL的改进之…
阅读更多...
Linux/Delivery

Linux/Delivery

Enumeration nmap 首先扫描目标端口对外开放情况&#xff0c;第一轮扫描发现对外开放了22,80,8065三个端口&#xff0c;端口详细信息如下 nmap -sC -sV -p 22,80,8065 10.10.10.222 nmap显示22端口运行着ssh服务&#xff0c;80端口运行着http服务&#xff0c;8065端口运行的…
阅读更多...
基于go mod模式创建项目最佳实践

基于go mod模式创建项目最佳实践

希望能带给你成功的喜悦&#xff01; 除go get、vendor这两种方式外&#xff0c;Go版本在1.11之后推出了go module模式来管理依赖&#xff0c;使用go mod时下载的依赖文件在$GOPATH/pkg/mod/下。本文以两种办法介绍如何创建go mod项目。 目录 goland开启玩法 本地手动创建项目…
阅读更多...
【Linux】Linux下多线程

【Linux】Linux下多线程

需要云服务器等云产品来学习Linux的同学可以移步/–>腾讯云<–/官网&#xff0c;轻量型云服务器低至112元/年&#xff0c;优惠多多。&#xff08;联系我有折扣哦&#xff09; 文章目录 1. 前置&#xff1a;进程地址空间和页表1.1 如何看待进程地址空间和页表1.2 虚拟地址…
阅读更多...
MIAOYUN获评OpenCloudOS社区2023年度优秀贡献企业

MIAOYUN获评OpenCloudOS社区2023年度优秀贡献企业

近日&#xff0c;OpenCloudOS社区发布了社区年度贡献企业榜单&#xff0c;成都元来云志科技有限公司&#xff08;简称“MIAOYUN”&#xff09;凭借对国产开源的热情&#xff0c;及对操作系统产业的支持&#xff0c;通过兼容适配互认证&#xff0c;为推动OpenCloudOS规模化应用&…
阅读更多...
使用IP爬虫代理提取数据的步骤是什么？爬虫代理IP怎么提高采集效率？

使用IP爬虫代理提取数据的步骤是什么？爬虫代理IP怎么提高采集效率？

​​​​​ 一、使用IP爬虫代理提取数据的步骤 在使用爬虫代理IP提取数据之前&#xff0c;需要先了解数据来源和目标网站的结构。以下是一个基本的步骤&#xff1a;1.确定数据来源 首先需要确定要提取数据的网站或数据源&#xff0c;了解网站的结构、数据存储方式以及数据更新…
阅读更多...
Qt应用软件【协议篇】Modbus详细介绍

Qt应用软件【协议篇】Modbus详细介绍

文章目录 概述Modbus 485协议概述在工业自动化中的应用 通信模式数据模型功能码 Modbus RTU示例 1&#xff1a;读取保持寄存器示例 2&#xff1a;写入单个线圈示例 3&#xff1a;写入多个保持寄存器报文传输 Modbus ASCII报文示例报文传输 Modbus TCP报文示例报文传输 概述 在…
阅读更多...
如何将iPad连接到USB设备？这里提供了详细步骤

如何将iPad连接到USB设备？这里提供了详细步骤

本文介绍了如何将iPad连接到USB设备。说明适用于所有版本的iPad。 将USB设备与带USB-C端口的iPad一起使用 以下iPad具有USB-C端口： 自2018年第三代以来的iPad Pro机型 自2020年第四代以来的iPad Air机型 自2021年第六代以来的iPad迷你机型 自2022年以来的第十代iPad机型 这些…
阅读更多...
动手学深度学习（一）深度学习介绍2

动手学深度学习（一）深度学习介绍2

目录 二、起源 三、深度学习的成功案例&#xff1a; 四、特点&#xff1a; 五、小结&#xff1a; 二、起源 为了解决各种各样的机器学习问题&#xff0c;深度学习提供了强大的工具。 虽然许多深度学习方法都是最近才有重大突破&#xff0c;但使用数据和神经网络编程的核心思…
阅读更多...
Redis学习——高级篇①

Redis学习——高级篇①

Redis学习——高级篇① Redis7高级之单线程和多线程&#xff08;一&#xff09; 一、Redis单线程VS多线程1.Redis的单线程部分1.1 Redis为什么是单线程&#xff1f;1.2 Redis所谓的“单线程”1.3 Redis演进变化1.3.1 Redis 3.x 单线程时代性能很快的原因1.3.2…
阅读更多...
【Linux网络编程】网络编程套接字(1)

【Linux网络编程】网络编程套接字(1)

【Linux网络编程】网络编程套接字(1) 目录 【Linux网络编程】网络编程套接字(1)源IP地址和目的IP地址端口号端口号和进程ID的关系 网络通信TCP协议UDP协议网络字节序socket编程接口简单的UDP网络程序 作者&#xff1a;爱写代码的刚子 时间&#xff1a;2024.1.29 前言&#xff1…
阅读更多...
树--二叉树(C语言纯手凹)

树--二叉树(C语言纯手凹)

目录 目录 1.什么是树&#xff1f;&#xff08;不深入&#xff0c;仅做了解&#xff09; 2.树的表示方式 2.1孩子兄弟表示法&#xff08;左孩子右兄弟&#xff09; 2.2孩子表示法 2.3双亲表示法 3.什么是二叉树 4.二叉树分类 4.1满二叉树 4.2完全二叉树 4.3二叉搜索树…
阅读更多...
基础小白快速学习c语言----变量的仔细介绍

基础小白快速学习c语言----变量的仔细介绍

变量&#xff1a; 表面理解&#xff1a;在程序运行期间&#xff0c;可以改变数值的数据&#xff0c; 深层次含义&#xff1a;变量实质上代表了一块儿内存区域&#xff0c;我们可以将变量理解为一块儿内存区域的标识&#xff0c;当我们操作变量时&#xff0c;相当于操作了变量…
阅读更多...
qemu搭建arm64 linux kernel环境

qemu搭建arm64 linux kernel环境

一、环境准备 ubuntu 22.04 内核源码&#xff1a;linux-6.6.1 &#xff08;直接上最新版&#xff09; 下载链接&#xff1a;The Linux Kernel Archives 交叉编译工具链&#xff1a; sudo apt-get install gcc-12-aarch64-linux-gnu 具体能用的版本gcc-XX-arch64-linux-gnu…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023