AJAX笔记原理篇

黑马程序员视频地址：

AJAX-Day03-01.XMLHttpRequest_基本使用https://www.bilibili.com/video/BV1MN411y7pw?vd_source=0a2d366696f87e241adc64419bf12cab&spm_id_from=333.788.videopod.episodes&p=33https://www.bilibili.com/video/BV1MN411y7pw?vd_source=0a2d366696f87e241adc64419bf12cab&spm_id_from=333.788.videopod.episodes&p=33

XMLHttpRequest

基本使用方法 

    //第一步：创建 XMLHttpRequest 对象const xhr = new XMLHttpRequest()//第二步：配置请求方法和请求 url 地址xhr.open("GET", "https://hmajax.itheima.net/api/province")//第三步：监听 loadend 事件，接收响应结果xhr.addEventListener("loadend", () => {//响应结果console.log(xhr.response)//得到的是字符串const object = JSON.parse(xhr.response) //字符串转对象console.log(object)})//第四步：发起请求xhr.send()

查询参数 

    //第二步：配置请求方法和请求 url 地址xhr.open("GET", "https://hmajax.itheima.net/api/area?pname=辽宁省&cname=大连市")

将  对象  快速转成  参数1=值1&参数2=值2...   的字符串格式

   //获取输入框的值const pname = document.querySelector(".province").valueconst cname = document.querySelector(".city").value//构建对象 (输入框数量多时，用serialiaze函数快速获取，得到的结果是对象，就可以直接使用)const valueObj = {pname,cname}//⭐️查询参数对象转成查询参数字符串const paramsObj = new URLSearchParams(valueObj)const queryString = paramsObj.toString()//创建XMR对象const xhr = new XMLHttpRequest()//配置参数xhr.open("GET", `https://hmajax.itheima.net/api/area?${queryString}`)//配置监听事件xhr.addEventListener("loadend", () => {console.log(xhr.response)})//发送请求xhr.send()

数据提交

    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)})//⭐️设置请求头-告诉服务器数据类型xhr.setRequestHeader("Content-Type", "application/json")//准备提交的数据const userObj = {username: "admin123",password: "12345678"}const userStr = JSON.stringify(userObj)//设置请求体，发送请求xhr.send(userStr)})

Promise

基本使用方法

   //创建Promise对象const p = new Promise((resolve, reject) => {//执行异步任务-并传递结果//如果此处调用了resolve(),则接下来会让then()执行//如果此处调用了reject(),则接下来会让catch()执行})p.then(result => {//成功执行})p.catch(error => {//失败执行})

promise的三种状态

XHR与Promise联合使用

    const p = new Promise((resolve, reject) => {//创建XHR对象const xhr = new XMLHttpRequest()//设置参数xhr.open("GET", "https://hmajax.itheima.net/api/province123")//设置监听事件xhr.addEventListener("loadend", () => {//可以打印一下xhr对象看一下数据if(xhr.status >= 200 && xhr.status <= 300){//成功，调用resolve()让其自动调用then()resolve(JSON.parse(xhr.response))}else{//失败，调用reject()让其自动调用catch()reject(new Error(xhr.response))}})//发送请求体xhr.send()}).then(result => {//成功执行console.log(result)}).catch(error => {//失败执行,错误要用dir打印console.dir(error)})

dir打印结果 

封装简易版axios

简陋版（简单GET获取，不需要传参）

//封装函数function myAxios(object){return new Promise((resolve, reject) => {//创建XHR对象const xhr = new XMLHttpRequest()//设置属性xhr.open(object.method || "GET", object.url)//设置监听事件xhr.addEventListener("loadend", () => {if(xhr.status >= 200 && xhr.status < 300){//成功resolve(JSON.parse(xhr.response))}else{//失败reject(new Error(xhr.response))}})//发送请求体xhr.send()})}//调用myAxios({url: "https://hmajax.itheima.net/api/province"}).then(result => {console.log(result)}).catch(error => {console.log(error)})

完整版（GET/POST都可以用，可以携带参数）

//封装函数
function myAxios(object){return new Promise((resolve, reject) => {//创建XHR对象const xhr = new XMLHttpRequest()//设置属性if(obj.params){object.url += "?" + new URLSearchParams(object.params).toString()}xhr.open(object.method || "GET",  object.url)//设置监听事件xhr.addEventListener("loadend", () => {if(xhr.status >= 200 && xhr.status < 300){//成功resolve(JSON.parse(xhr.response))}else{//失败reject(new Error(xhr.response))}})//判断是否有data选项if(object.data){//设置请求头xhr.setRequestHeader("Content-Type", "application/json")const strdata = JSON.stringify(object.data)//发送请求体xhr.send(strdata)}else{//发送请求体xhr.send()}})}//调用（用户注册）
myAxios({url: "https://hmajax.itheima.net/api/register",method: "POST",data: {username: "usera_001",password: "usera_001"}}).then(result => {console.log(result)}).catch(error => {console.log(error)})

案例：获取天气预报

 

function getWeather(cityCode)   //封装获取天气函数
{myAxios({url: "https://hmajax.itheima.net/api/weather",params: {city: cityCode}}).then(result => {const weatherData = result.datafor(let k in weatherData){if(k === "data"){}else if(k === "dayForecast"){const weatherList = weatherData[k].map(item => {return`<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">${item.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">&lt;${item.windPower}</span>          </div>        </li>`})document.querySelector(".week-wrap").innerHTML = weatherList.join("")}else if(k === "todayWeather"){document.querySelector(".today-weather").innerHTML = `<div class="range-box"><span>今天：</span><span class="range"><span class="weather">${weatherData[k].weather}</span><span class="temNight">${weatherData[k].temNight}</span><span>-</span><span class="temDay">${weatherData[k].temDay}</span><span>℃</span></span></div><ul class="sun-list"><li><span>紫外线</span><span class="ultraviolet">${weatherData[k].ultraviolet}</span></li><li><span>湿度</span><span class="humidity">${weatherData[k].humidity}</span>%</li><li><span>日出</span><span class="sunriseTime">${weatherData[k].sunriseTime}</span></li><li><span>日落</span><span class="sunsetTime">${weatherData[k].sunsetTime}</span></li></ul>`}else if(k === "weatherImg"){document.querySelector(`.${k}`).src = weatherData[k]}else{document.querySelector(`.${k}`).innerText = weatherData[k]}}}).catch(error => {console.log(error)})
}getWeather("110111")  //默认获取北京天气document.querySelector(".search-city").addEventListener("input", e => { //输入字符实时搜索城并返回列表myAxios({url: "https://hmajax.itheima.net/api/weather/city",params: {city: e.target.value}}).then(result => {document.querySelector(".search-list").innerHTML = result.data.map(item => {return `<li class="city-item" data-cityCode = "${item.code}">${item.name}</li>`}).join("")})
})document.querySelector(".search-list").addEventListener("click", e => {   //列表点击再次搜索if(e.target.classList.contains("city-item")){getWeather(e.target.dataset.citycode)}
})

 

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

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

相关文章

Unity Shader Graph 2D - 跳动的火焰

Unity Shader Graph 2D - 跳动的火焰

在游戏中&#xff0c;火焰是一种常见的特效。通常来讲火焰特效通过粒子系统的方式实现的相对较多&#xff0c;本文将通过Shader Graph的方式来实现一种不同的火焰效果。 那么怎么实现呢 首先创建一个名为Fire的Shader Graph文件&#xff0c;然后创建一个名为M_Fire的材质球。 …
阅读更多...
【二分题目】

【二分题目】

二分 分巧克力求阶乘计算方程 分巧克力 分巧克力 import java.util.Scanner; // 1:无需package // 2: 类名必须Main, 不可修改 public class Main { public static void main(String[] args) {Scanner scan new Scanner(System.in);//在此输入您的代码...int nscan.nextInt…
阅读更多...
集合通讯概览

集合通讯概览

集合通信概览 &#xff08;1&#xff09;通信的算法 是根据通讯的链路组成的 &#xff08;2&#xff09;因为通信链路 跟硬件强相关&#xff0c;所以每个CCL的库都不一样 芯片与芯片、不同U之间是怎么通信的 多卡训练&#xff1a;多维并行&#xff08;xxx并行在上一期已经讲述…
阅读更多...
GWO优化SVM回归预测matlab

GWO优化SVM回归预测matlab

灰狼优化算法&#xff08;Grey Wolf Optimizer&#xff0c;简称 GWO&#xff09;&#xff0c;是由澳大利亚格里菲斯大学的 Mirjalii 等人于 2014 年提出的群智能优化算法。该算法的设计灵感源自灰狼群体的捕食行为&#xff0c;核心思想是对灰狼社会的结构与行为模式进行模仿。 …
阅读更多...
LLM - 基于LM Studio本地部署DeepSeek-R1的蒸馏量化模型

LLM - 基于LM Studio本地部署DeepSeek-R1的蒸馏量化模型

文章目录 前言开发环境快速开始LM Studio简单设置模型下载开始对话 模型选择常见错误最后 前言 目前&#xff0c;受限于设备性能&#xff0c;在本地部署的基本都是DeepSeek-R1的蒸馏量化模型&#xff0c;这些蒸馏量化模型的表现可能并没有你想象的那么好。绝大部分人并不需要本…
阅读更多...
csapp笔记3.6节——控制（1）

csapp笔记3.6节——控制（1）

本节解决了x86-64如何实现条件语句、循环语句和分支语句的问题 条件码 除了整数寄存器外&#xff0c;cpu还维护着一组单个位的条件码寄存器&#xff0c;用来描述最近的算数和逻辑运算的某些属性。可检测这些寄存器来执行条件分支指令。 CF&#xff08;Carry Flag&#xff09…
阅读更多...
电路研究9.2.8——合宙Air780EP中IP 应用相关命令使用方法研究

电路研究9.2.8——合宙Air780EP中IP 应用相关命令使用方法研究

这个有点吐血了&#xff0c;之前研究的时候只想着网络了&#xff0c;所以我对AT指令的那几个基本等指令以外&#xff0c;是跳到后面看的网络&#xff0c;加上IP也算网络里面的&#xff0c;就没注意&#xff0c;当时使用搜索查找时候并没有搜到ATSAPBR指令&#xff0c;结果这里打…
阅读更多...
ubuntu解决普通用户无法进入root

ubuntu解决普通用户无法进入root

项目场景&#xff1a; 在RK3566上移植Ubuntu20.04之后普通用户无法进入管理员模式 问题描述 在普通用户使用sudo su试图进入管理员模式的时候报错 解决方案&#xff1a; 1.使用 cat /etc/passwd 查看所有用户.最后一行是 若无用户&#xff0c;则使用 sudo useradd -r -m -s…
阅读更多...
深度学习之“缺失数据处理”

深度学习之“缺失数据处理”

缺失值检测 缺失数据就是我们没有的数据。如果数据集是由向量表示的特征组成&#xff0c;那么缺失值可能表现为某些样本的一个或多个特征因为某些原因而没有测量的值。通常情况下&#xff0c;缺失值由特殊的编码方式。如果正常值都是正数&#xff0c;那么缺失值可能被标记为-1…
阅读更多...
Pandoc, Zotero, JabRef 管理论文引用，生成参考文献 | 撰写论文 paper

Pandoc, Zotero, JabRef 管理论文引用，生成参考文献 | 撰写论文 paper

书接上回&#xff0c;使用 Obsidian, Zotero, JabRef, Pandoc, Markup-Markdown | 撰写论文 paper 管理论文引用&#xff0c;生成参考文献 TL; DR导出 bibliography 文件JabRefZotero 参考文献引用语法reference-docLinks TL; DR 安装 pandoc v3.6.2. 使用一下命令&#xff0c…
阅读更多...
FFmpeg：多媒体处理的瑞士军刀

FFmpeg：多媒体处理的瑞士军刀

FFmpeg&#xff1a;多媒体处理的瑞士军刀 前言 FFmpeg 是一个功能强大且跨平台的开源多媒体框架&#xff0c;广泛应用于音视频处理领域。 它由多个库和工具组成&#xff0c;能够处理各种音视频格式&#xff0c;涵盖编码、解码、转码、流处理等多种操作。 无论是专业视频编辑…
阅读更多...
优化代码性能：利用CPU缓存原理

优化代码性能：利用CPU缓存原理

在计算机的世界里&#xff0c;有一场如同龟兔赛跑般的速度较量&#xff0c;主角便是 CPU 和内存 。龟兔赛跑的故事大家都耳熟能详&#xff0c;兔子速度飞快&#xff0c;乌龟则慢吞吞的。在计算机中&#xff0c;CPU 就如同那敏捷的兔子&#xff0c;拥有超高的运算速度&#xff0…
阅读更多...
oracle:索引(B树索引,位图索引,分区索引,主键索引,唯一索引,联合索引/组合索引,函数索引)

oracle:索引(B树索引,位图索引,分区索引,主键索引,唯一索引,联合索引/组合索引,函数索引)

索引通过存储列的排序值来加快对表中数据的访问速度&#xff0c;帮助数据库系统快速定位到所需数据&#xff0c;避免全表扫描 B树索引(B-Tree Index) B树索引是一种平衡树结构&#xff0c;适合处理范围查询和精确查找。它的设计目标是保持数据有序&#xff0c;并支持高效的插入…
阅读更多...
【DeepSeek背后的技术】系列一：混合专家模型（MoE）

【DeepSeek背后的技术】系列一：混合专家模型（MoE）

目录 1 概述2 稀疏性3 微调3.1 令牌的负载均衡3.2 使用HuggingFace微调MoE模型3.3 专家如何学习3.4 专家的数量3.5 微调 4 提速4.1 并行计算4.2 容量因子和通信开销4.3 部署技术4.4 高效训练 5 MoE和稠密模型对比6 为什么是替换FFN层6.1 FFN层的角色与特性6.2 MoE的优势与FFN的…
阅读更多...
AI技术在SEO关键词优化中的应用策略与前景展望

AI技术在SEO关键词优化中的应用策略与前景展望

内容概要 在数字营销的快速发展中&#xff0c;AI技术逐渐成为SEO领域的核心驱动力。其通过强大的数据分析和处理能力&#xff0c;不仅改变了我们优化关键词的方式&#xff0c;也提升了搜索引擎优化的效率和效果。在传统SEO中&#xff0c;关键词的选择与组合常依赖人工经验和直…
阅读更多...
!力扣 84. 柱状图中最大矩形

!力扣 84. 柱状图中最大矩形

给定 n 个非负整数&#xff0c;用来表示柱状图中各个柱子的高度。每个柱子彼此相邻&#xff0c;且宽度为 1 。 求在该柱状图中&#xff0c;能够勾勒出来的矩形的最大面积。 示例 1: 输入&#xff1a;heights [2,1,5,6,2,3] 输出&#xff1a;10 解释&#xff1a;最大的矩形为…
阅读更多...
ieee模版如何修改参考文献的格式以及多作者省略等

ieee模版如何修改参考文献的格式以及多作者省略等

在用latex写论文的时候&#xff0c;会遇到各种模板&#xff0c;如果你要投IEEE的期刊或者会议&#xff0c;就得使用相应的latex模板。对于参考文献很多模版不一样的有些使用文本导入 有些使用的是bib 格式&#xff0c;因此记录一下如何修改IEEE参考文献的格式已经对应的多作者进…
阅读更多...
【产品经理学习案例——AI翻译棒出海业务】

【产品经理学习案例——AI翻译棒出海业务】

前言&#xff1a; 本文主要讲述了硬件产品在出海过程中&#xff0c;翻译质量、翻译速度和本地化落地策略是硬件产品规划需要考虑的核心因素。针对不同国家&#xff0c;需要优化翻译质量和算法&#xff0c;关注市场需求和文化差异&#xff0c;以便更好地满足当地用户的需求。同…
阅读更多...
Jenkins 触发构建的几种常见方式

Jenkins 触发构建的几种常见方式

为了实现自动化构建，Jenkins 提供了多种触发构建的方式。这些触发方式可以根据开发团队的需求来选择，使得构建过程更加灵活和高效。 1. 手动触发构建 手动触发构建是最简单的一种方式，通常用于开发人员或管理员手动启动构建任务。 步骤： 登录 Jenkins 后，进入某个项目（…
阅读更多...
全栈开发：使用.NET Core WebAPI构建前后端分离的核心技巧（一）

全栈开发：使用.NET Core WebAPI构建前后端分离的核心技巧（一）

目录 cors解决跨域 依赖注入使用 分层服务注册 缓存方法使用 内存缓存使用 缓存过期清理 缓存存在问题 分布式的缓存 cors解决跨域 前后端分离已经成为一种越来越流行的架构模式&#xff0c;由于跨域资源共享(cors)是浏览器的一种安全机制&#xff0c;它会阻止前端应用…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023