【前端】AJAX（学习笔记）

news2024/9/22 16:39:06

一、AJAX基础

1、 AJAX 有什么用

浏览器和服务器之间通信，动态数据交互

2、axios库的使用

引入axios库

<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.6/axios.js"></script>

使用axios函数

axios({
    url: 'http://hmajax.itheima.net/api/province'
}).then(result => {
    document.write(result['data']['list'].join('<br>'))
})

3、URL查询参数

浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据

axios({
    url: 'http://hmajax.itheima.net/api/city',
    params: {
        pname: '河南省'
    }
}).then(result => {
    document.write(result.data.list.join(' '))
})

4、请求方法与错误处理

axios({
    url: 'http://hmajax.itheima.net/api/register',
    method: 'post',
    // 请求体携带的信息
    data: {
        username,
        password
    }
}).then(result => {
    p.innerText = result['data']['message']
}).catch(error => {
    p.innerText = error['response']['data']['message']
})

5、form-serialize插件

作用：快速收集表单元素的值

document.querySelector('button').addEventListener('click', () => {
    const form = document.querySelector('.test-form')
    const data = serialize(form, {
        hash: true,
        empty: true
    })
    console.log(data)
})
  • hash：设置获取数据结构（json对象、查询字符串）
  • empty：设置是否获取空值（获取、不获取）

6、图片上传

  1. 先获取图片文件对象
  2. 使用 FormData 表单数据对象装入（因为图片是文件而不是以前的数字和字符串了所以传递文件一般需要放入 FormData 以键值对-文件流的数据传递）
const fd = new FormData()
fd.append(参数名, 值)

document.querySelector('.upload').addEventListener('change', e => {
    // 1. 获取图片文件
    console.log(e.target.files[0])
    // 2. 使用 FormData 携带图片文件
    const fd = new FormData()
    fd.append('img', e.target.files[0])
    // 3. 提交到服务器，获取图片url网址使用
    axios({
        url: 'http://hmajax.itheima.net/api/uploadimg',
        method: 'POST',
        data: fd
    }).then(result => {
        console.log(result)
        // 取出图片url网址，用img标签加载显示
        const imgUrl = result.data.data.url
        document.querySelector('.my-img').src = imgUrl
    })
})

7、补充

1）本地存储
// 设置本地存储
localStorage.setItem('url', imgUrl)

// 读取本地存储
const imgUrl = localStorage.getItem('url')
2）设置基地址
axios.default.baseURI = 'http://geek.itheima.net'

二、AJAX原理

1、XMLHttpRequest

1）查询GET
const xhr = new XMLHttpRequest()
const pname = '河北省'
xhr.open('get', `http://hmajax.itheima.net/api/city?pname=${pname}`)
xhr.addEventListener('loadend', e => {
    console.log(JSON.parse(e.explicitOriginalTarget.responseText).list)
})
xhr.send()

使用urlSearchParams 对象简化操作

const obj = {
    name: 'wmh',
    gender: 'man'
}
console.log((new URLSearchParams(obj)).toString())
// 'name=wmh&gender=man'
2）提交POST
  • 请求头：设置Content-Type: application/json
  • 请求体：携带JSON字符串
const xhr = new XMLHttpRequest()
xhr.open('POST','http://hmajax.itheima.net/api/register')
// 设置Content-Type: application/json
xhr.setRequestHeader('Content-Type', 'application/json')
xhr.addEventListener('loadend', e => {
    console.log(e.explicitOriginalTarget.response)
})
const obj = {
    username : 'wmh12345678',
    password : 'wmh123456',
}
// 携带JSON字符串
xhr.send(JSON.stringify(obj))

2、Promise

1）使用

Promise：一个异步操作最终状态和结果值的对象

用于管理异步操作的代码，解决回调函数地狱的问题

// 1. 创建 Promise 对象
const p = new Promise((resolve, reject) => {
    // 2. 执行异步任务-并传递结果
    // 成功调用: resolve(值) 触发 then() 执行
    // 失败调用: reject(值) 触发 catch() 执行
})
// 3. 接收结果
p.then(result => {
    // 成功
}).catch(error => {
    // 失败
})

通过status状态码判断是否请求成功

const p = new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest()
    xhr.open('POST', 'http://hmajax.itheima.net/api/register')
    xhr.setRequestHeader('Content-Type', 'application/json')
    xhr.addEventListener('loadend', e => {
        if (e.explicitOriginalTarget.status >= 200 && e.explicitOriginalTarget.status < 300) {
            resolve('注册成功')
        } else {
            reject(new Error('注册失败'))
        }
    })
    const obj = {
        username: 'wmh123456',
        password: 'wmh123456',
    }
    xhr.send(JSON.stringify(obj))
})

p.then(r => {
    console.log(r)
}).catch(e => {
    console.log(e)
})
2）三种状态
  1. 待定（pending）：初始状态，既没有被兑现，也没有被拒绝
  2. 已兑现（fulfilled）：操作成功完成
  3. 已拒绝（rejected）：操作失败

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

三、AJAX进阶

1、同步与异步

  1. 同步代码：逐行执行，需原地等待结果后，才继续向下执行
  2. 异步代码：调用后耗时，不阻塞代码继续执行（不必原地等待），在将来完成后触发回调函数传递结果

2、回调函数地狱

在回调函数中嵌套回调函数，一直嵌套下去就形成了回调函数地狱

缺点：可读性差，异常无法捕获，耦合性严重，牵一发动全身

let pname, cname
axios({
    url: 'http://hmajax.itheima.net/api/province'
}).then(r => {
    pname = r.data.list[0]
    document.querySelector('.province').innerHTML = pname
    axios({
        url: 'http://hmajax.itheima.net/api/city',
        params: {pname}
    }).then(r => {
        cname = r.data.list[0]
        document.querySelector('.city').innerHTML = cname
        axios({
            url: 'http://hmajax.itheima.net/api/area',
            params: {pname, cname}
        }).then(r => {
            document.querySelector('.area').innerHTML = r.data.list[0]
        })
    })
})

3、Promise 链式调用

Promise 链式调用：依靠 then() 方法会返回一个新生成的 Promise 对象特性，继续串联下一环任务，直到结束

  1. 细节：then() 回调函数中的返回值，会影响新生成的 Promise 对象最终状态和结果
  2. 好处：通过链式调用，解决回调函数嵌套问题

let pname = ''
axios({url: 'http://hmajax.itheima.net/api/province'}).then(result => {
    pname = result.data.list[0]
    document.querySelector('.province').innerHTML = pname
    return axios({url: 'http://hmajax.itheima.net/api/city', params: {pname}})
}).then(result => {
    const cname = result.data.list[0]
    document.querySelector('.city').innerHTML = cname
    return axios({url: 'http://hmajax.itheima.net/api/area', params: {pname, cname}})
}).then(result => {
    console.log(result)
    const areaName = result.data.list[0]
    document.querySelector('.area').innerHTML = areaName
})

4、async、await函数

在 async 函数内，使用 await 关键字取代 then 函数，等待获取 Promise 对象成功状态的结果值

async function getData() {
    const province = await axios({url: 'http://hmajax.itheima.net/api/province'})
    const pname = province.data.list[0]
    const city = await axios({url: 'http://hmajax.itheima.net/api/city', params: {pname}})
    const cname = city.data.list[0]
    const area = await axios({url: 'http://hmajax.itheima.net/api/area', params: {pname, cname}})
    const aname = area.data.list[0]
    document.querySelector('.area').innerHTML = aname
    document.querySelector('.province').innerHTML = pname
    document.querySelector('.city').innerHTML = cname
}

getData()

5、try catch语句

语句标记要尝试的语句块，并指定一个出现异常时抛出的响应

try 里有报错的代码，会立刻跳转到 catch 中

try {
  // 要执行的代码
} catch (error) {
  // error 接收的是，错误消息
  // try 里代码，如果有错误，直接进入这里执行
}

6、事件循环

  • 作用：事件循环负责执行代码，收集和处理事件以及执行队列中的子任务
  • 原因：JavaScript 单线程（某一刻只能执行一行代码），为了让耗时代码不阻塞其他代码运行，设计了事件循环模型
  • 概念：执行代码和收集异步任务的模型，在调用栈空闲，反复调用任务队列里回调函数的执行机制，就叫事件循环

7、宏任务与微任务

  • 宏任务：由浏览器环境执行的异步代码
  • 微任务：由 JS 引擎环境执行的异步代码

宏任务每次在执行同步代码时，产生微任务队列，清空微任务队列任务后，微任务队列空间释放！

下一次宏任务执行时，遇到微任务代码，才会再次申请微任务队列空间放入回调函数消息排队

总结：一个宏任务包含微任务队列，他们之间是包含关系，不是并列关系

8、Promise.all 静态方法

合并多个 Promise 对象并等待所有同时成功的结果，如果有一个报错就会最终为失败状态，当需要同时渲染多个接口数据同时到网页上时使用

const p = Promise.all([Promise对象, Promise对象, ...])
p.then(result => {
  // result 结果: [Promise对象成功结果, Promise对象成功结果, ...]
}).catch(error => {
  // 失败的 Promise 抛出的异常对象
})

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

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

相关文章

nginx在国产服务器上stream配置项无法识别的问题

nginx在国产服务器上stream配置项无法识别的问题

最近在搭建k8sranchar&#xff0c;需要用到nginx做负载均衡&#xff0c;之前在系统中也会用到&#xff0c;之前一直使用http选项&#xff0c;做转发配置。 基本格式如下图所示&#xff1a; 但是在ranchar的安装中默认方式使用stream配置项。 使用yum默认安装的nginx不支持该关…
阅读更多...
.babky勒索病毒解密方法|勒索病毒解决|勒索病毒恢复|数据库修复

.babky勒索病毒解密方法|勒索病毒解决|勒索病毒恢复|数据库修复

导言&#xff1a; 网络安全威胁不断进化&#xff0c;其中.babky勒索病毒引起了广泛关注。这篇文章91数据恢复将深入介绍.babky的狡猾特征&#xff0c;以及在遭受其袭击时如何高效地恢复被加密的数据&#xff0c;并提供实用的预防方法。当面对被勒索病毒攻击导致的数据文件加密…
阅读更多...
类的加载机制、主动引用、被动引用、什么是类加载器、类加载器的分类、自定义类的加载器

类的加载机制、主动引用、被动引用、什么是类加载器、类加载器的分类、自定义类的加载器

类的加载机制、类加载器 类的加载时机主动引用被动引用 类加载器什么是类加载器类的加载器分类什么情况下需要自定义类的加载器 类的加载时机 主动引用 虚拟机规范中并没有强制约束何时进行加载&#xff0c;但是规范严格规定了只有下列六种情况必须对类进行加载: 当遇到new.…
阅读更多...
光子学考试

光子学考试

光子学 一二三四 一 a) Use a symmetry argument to find the expectation value of the electric dipole moment < e r > <\mathrm{er}> <er> of an atom in an eigenstate. 采用对称性论证找到原子在本征态中的电偶极矩 < e r > <\mathrm{er}&g…
阅读更多...
鸿蒙南向开发—PWM背光(OpenHarmony技术）

鸿蒙南向开发—PWM背光(OpenHarmony技术）

背光驱动模型也是基于HDF框架开发的&#xff0c;整个框架如下&#xff1a; 现在以RK3568为例&#xff0c;来看看PWM背光整个驱动&#xff0c;这里使用的是PWM占空比控制的背光&#xff0c;默认基于hdf的pwm驱动已经OK&#xff01; 需要注意的是&#xff1a;这里是基于HDF实现的…
阅读更多...
C++ 多态向下转型详解

C++ 多态向下转型详解

文章目录 1 . 前言2 . 多态3 . 向下转型3.1 子类没有改进父类的方法下&#xff0c;去调用该方法3.2 子类有改进父类的方法下&#xff0c;去调用该方法3.3 子类没有改进父类虚函数的方法下&#xff0c;去调用改方法3.4 子类有改进父类虚函数的方法下&#xff0c;去调用改方法3.5…
阅读更多...
捕捉“五彩斑斓的黑”：锗基短波红外相机的多种成像应用

捕捉“五彩斑斓的黑”：锗基短波红外相机的多种成像应用

红外处于人眼可观察范围以外&#xff0c;为我们了解未知领域提供了新的途径。红外又可以根据波段范围&#xff0c;分为短波红外、中波红外与长波红外。较短的SWIR波长——大约900nm-1700nm——与可见光范围内的光子表现相似。虽然在SWIR中目标的光谱含量不同&#xff0c;但所产…
阅读更多...
JRT控制打印机

JRT控制打印机

本次测试打印机控制和纸张方向控制。 打印机状态 选择打印机 控制纸张 定义纸张 旋转纸张 不旋转纸张 A4
阅读更多...
java代码规范（适合写程序之前先了解有助于开发协同）

java代码规范（适合写程序之前先了解有助于开发协同）

目录 一、类定义 二、方法定义 三、接口定义 四、变量定义 1、命名规范&#xff1a; 2、类型规范&#xff1a; 3、常量规范&#xff1a; 五、static关键字 1、静态变量&#xff08;类变量&#xff09;&#xff1a; 2、静态方法&#xff08;类方法&#xff09;&#x…
阅读更多...
Baumer工业相机堡盟工业相机如何通过NEOAPI SDK设置相机的图像剪切（ROI）功能（C#）

Baumer工业相机堡盟工业相机如何通过NEOAPI SDK设置相机的图像剪切（ROI）功能（C#）

Baumer工业相机堡盟工业相机如何通过NEOAPI SDK设置相机的图像剪切&#xff08;ROI&#xff09;功能&#xff08;C#&#xff09; Baumer工业相机Baumer工业相机的图像剪切&#xff08;ROI&#xff09;功能的技术背景CameraExplorer如何使用图像剪切&#xff08;ROI&#xff09;…
阅读更多...
Netty使用SSL实现双向通信加密

Netty使用SSL实现双向通信加密

最近项目有个需求，TCP服务器实现基于证书通信加密，之前没做过，花了一些时间调研，今天整理下。 SSL(Secure Sockets Layer 安全套接字协议) 1、原理 算法原理 简而言之就是非对称加密算法 私钥自己持有，公钥发给对方，对方在发送信息的时候使用公钥进行加密数据，当接收到…
阅读更多...
C++-类和对象（2）

C++-类和对象（2）

1.类的6个默认成员函数 如果一个类中什么成员都没有&#xff0c;简称为空类。 空类中真的什么都没有吗&#xff1f;并不是&#xff0c;任何类在什么都不写时&#xff0c;编译器会自动生成以下 6 个默认成员 函数。 默认成员函数&#xff1a;用户没有显式实现&#xff0c;编译…
阅读更多...
【AI】DETR模型可视化操作

【AI】DETR模型可视化操作

Detr作为目标检测的算法&#xff0c;不同于之前算法的就是注意力机制&#xff0c;注意力机制能够直观看出来模型对图像关注的点&#xff0c;这个直观到底怎么直观呢&#xff0c;我们只听别人说肯定是不行的&#xff0c;上手测试才是最好的方式&#xff0c;像论文中插图那样的使…
阅读更多...
【网络流】最大流与Ford–Fulkerson算法

【网络流】最大流与Ford–Fulkerson算法

目录 一、引言1.1 网络流问题1.2 “流”的定义1.3 “割”的定义 二、最大流最小割2.1 最大流2.2 最小割2.3 最大流最小割定理2.4 最大流最小割定理证明 三、Ford–Fulkerson算法3.1 增广路径3.2 剩余图3.3 算法代码3.4 FordFulkerson Demo 一、引言 1.1 网络流问题 网络流问题…
阅读更多...
【教学类-43-13】 20240103 （4宫格数独：错误版：768套） 不重复的基础模板数量：768套

【教学类-43-13】 20240103 （4宫格数独：错误版：768套） 不重复的基础模板数量：768套

作品展示&#xff1a;——4宫格 768套不重复模板&#xff08;64页*12套题&#xff09; 有错误&#xff0c;实际数量小于768套 背景需求&#xff1a; 测试4宫格数独基础模板有几种。 写个程序&#xff0c;验算是不是真的是乘阶法的288种。 代码展示&#xff1a; 768套4宫格题…
阅读更多...
AI原生应用开发“三板斧”亮相WAVE SUMMIT+2023

AI原生应用开发“三板斧”亮相WAVE SUMMIT+2023

面对AI应用创新的风口跃跃欲试&#xff0c;满脑子idea&#xff0c;却苦于缺乏技术背景&#xff0c;不得不望而却步&#xff0c;这曾是许多开发者的苦恼&#xff0c;如今正在成为过去。 12月28日&#xff0c;WAVE SUMMIT深度学习开发者大会2023在北京举办。百度AI技术生态总经理…
阅读更多...
【Java 基础】-- 实例化

【Java 基础】-- 实例化

1、定义 创建对象的过程就叫实例化。这个过程中会在堆中开辟内存&#xff0c;将一些非静态的方法&#xff0c;变量存放在里面。在程序执行的过程中&#xff0c;可以创建多个对象&#xff0c;既多次实例化。每次实例化都会开辟一块新的内存。 2、实例化的几种方法 new 关键字创…
阅读更多...
STM32学习笔记十七：WS2812制作像素游戏屏-飞行射击游戏（7）探索动画之故事板，复杂动画

STM32学习笔记十七：WS2812制作像素游戏屏-飞行射击游戏（7）探索动画之故事板，复杂动画

要让物体沿着路径移动&#xff0c;必须同时修改X/Y两个值&#xff0c;用两个连续插值动画行不行&#xff1f; 在单片机这种单线程设备&#xff0c;两个TICK会前后脚进行修改&#xff0c;具有相同的时间跨度&#xff0c;所以似乎也是可以的。但是在支持多线程的设备&#xff0c…
阅读更多...
【CVPR2023】使用轻量 ToF 传感器的单目密集SLAM的多模态神经辐射场

【CVPR2023】使用轻量 ToF 传感器的单目密集SLAM的多模态神经辐射场

目录 导读 本文贡献 本文方法 轻量级ToF传感器的感知原理 多模态隐式场景表示 时间滤波技术 实验 实验结果 消融实验 结论 未来工作 论文标题&#xff1a;Multi-Modal Neural Radiance Field for Monocular Dense SLAM with a Light-Weight ToF Sensor 论文链接&am…
阅读更多...
Java程序设计阶段测试1

Java程序设计阶段测试1

一、单选题&#xff08;共15题&#xff1b; 共30.0分&#xff09; 2.0分 1、以下哪个是Java应用程序main方法的有效定义? A.public static void main(); B.public static void main( String args ); C.public static void main( String args[] ); D.public static boolea…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023