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.链接阶段…
阅读更多...
牛客周赛round30D题讲解(公式推导)

牛客周赛round30D题讲解(公式推导)

写的时候题目理解错了(*/ω&#xff3c;*) 登录—专业IT笔试面试备考平台_牛客网 #include <bits/stdc.h>using ll long long;int main(){std::ios::sync_with_stdio(false);std::cin.tie(nullptr);ll x, y, l, r;std::cin >> x >> y >> l >>…
阅读更多...
Day 34 | 贪心 1005.K次取反后最大化的数组和 、 134. 加油站、 135. 分发糖果

Day 34 | 贪心 1005.K次取反后最大化的数组和 、 134. 加油站、 135. 分发糖果

1005.K次取反后最大化的数组和 题目 文章讲解 视频讲解 思路&#xff1a;要按照绝对值大小进行排序&#xff0c;负数转换后还不到k个选择最小值不断反转 class Solution {public int largestSumAfterKNegations(int[] nums, int k) {nums IntStream.of(nums).boxed().sorte…
阅读更多...
大白话解析LevelDB 4: 查找一个 Key

大白话解析LevelDB 4: 查找一个 Key

文章目录 查询一个 Key查找 Key 的入口: DBImpl::Get(const ReadOptions& options, const Slice& key, std::string* value)从 MemTable 中查找从 Immutable MemTable 中查找从 SST 中查找 查询一个 Key 查找 Key 的入口: DBImpl::Get(const ReadOptions& options…
阅读更多...
Python爬虫---scrapy的post请求

Python爬虫---scrapy的post请求

爬虫文件&#xff1a; import scrapyclass TestpostSpider(scrapy.Spider):name "testpost"allowed_domains ["fanyi.baidu.com"]# post 请求如果没有参数&#xff0c;那么这个请求将没有任何意义&#xff0c;所以start_urls也没有用了&#xff0c;pars…
阅读更多...
Mysql 索引优化

Mysql 索引优化

Mysql 索引优化 mysql如何选择使用索引。 select *from user where username a and password b如果useranme和password都是普通索引&#xff0c;那么他们会把2个索引都查出来&#xff0c;然后在把他们的交集拿出来 如果username是唯一索引&#xff0c;password是普通索引&…
阅读更多...
探究React中的非受控组件：自由而简便的表单处理

探究React中的非受控组件：自由而简便的表单处理

探究React中的非受控组件&#xff1a;自由而简便的表单处理 在React中&#xff0c;我们常听到"受控组件"的概念&#xff0c;但同样存在一种自由度更高、处理简便的形式——非受控组件。本文将深入介绍非受控组件的使用&#xff0c;通过代码片段中的登录表单实例&…
阅读更多...
Java 面试题之 IO（二）

Java 面试题之 IO（二）

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

状态管理与导航守卫

为什么要用vuex&#xff1f; 进行统一的状态管理&#xff0c;解决不同组件共享数据的问题。 如何使用vuex&#xff1f; 1.安装引入 npm install vuex --save 2.注册到vue中 import Vue from vue import Vuex from vuexVue.use(Vuex)3.实例化vuex的store export default new Vue…
阅读更多...
算法训练营总结

算法训练营总结

目录 收获思考感悟后续 收获 不知不觉&#xff0c;已经跟着训练营刷了两个月的题。 之前也跟着代码随想录刷了一大半&#xff0c;因为出差中断没有坚持下来&#xff0c;仅有的基础也扔下了不少。 而这两个月跟着训练营最大的收获就是坚持&#xff0c;不会的题硬啃几天也要搞…
阅读更多...
Java 与 JavaScript的区别

Java 与 JavaScript的区别

Java 与 JavaScript的区别 Java 与 JavaScript&#xff1a;概述Java的特点JavaScript 的起源JavaScript 的特点Java 与 JavaScript&#xff0c;哪个更好&#xff1f;JavaScript 与 Java 相似吗&#xff1f;Java 与 JavaScript 的区别JavaScript 在服务器端的运行方式是怎样的&a…
阅读更多...
微信小程序canvas画布如何实现元素编辑框（仅UI），包含颜色、线条、文字字体、加粗、斜体等

微信小程序canvas画布如何实现元素编辑框（仅UI），包含颜色、线条、文字字体、加粗、斜体等

目录 矩形编辑框 ​编辑 椭圆编辑框 直线编辑框 自由绘制编辑框
阅读更多...
网络防御安全知识（第二版）

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

安全策略 传统的包过滤防火墙 --- 其本质为ACL列表&#xff0c;根据数据报中的特征进行过滤&#xff0c;之后对比规制&#xff0c; 执行动作。 五元组 --- 源IP&#xff0c; 目标IP&#xff0c;源端口&#xff0c; 目标端口&#xff0c;协议 安全策略 --- 相较于ACL的改进之…
阅读更多...
网站打不开怎么办？高防IP弹性防护更省心

网站打不开怎么办？高防IP弹性防护更省心

不管你是什么网站&#xff0c;商城网站、游戏网站或者支付网站都有可能存在被攻击的情况&#xff0c;超过防护就会被打死&#xff0c;网站随即而来就打不开了。网站打不开怎么办&#xff1f;看看是不是网站主机或者服务器被攻击了。攻击的大小不可控&#xff0c;选择高防服务器…
阅读更多...
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端口运行的…
阅读更多...
微信小程序 如何调用微信支付接口

微信小程序 如何调用微信支付接口

前提&#xff1a; 小程序为企业小程序 并开通了 微信打款认证 例子&#x1f330;&#xff1a; 我们这里以订单为例子 1.创建订单 朝后端发送订单id 或信息 2.后端生成 时间戳/随机字符/id/后端算法签名 3.将获取到的数据 塞入 wx.requestPayment然后就可以掉起为微信支付…
阅读更多...
基于go mod模式创建项目最佳实践

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

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

Copyright @ 2022~2023