当前位置： 首页 > news >正文

同步_异步请求和Ajax并利用axios框架简化

news 2026/2/10 3:32:45

目录

同步和异步

原生的Ajax

创建XMLHttpRequest对象

常用方法

常用属性

axios框架

同步和异步

同步请求：发送请求后，会做出回应，回应的内容会覆盖浏览器中的内容，这样会打断其他正常的操作，显得不太友好，并且请求时会携带所有的信息。

异步请求：前端正常输入时，可以同时与后端进行交互，后端相应的数据不会影响前端的正常操作，可以使用一个js中提供的对象,向后端发送请求, 服务器响应的内容,会被js对象接收.然后在js中,用接收到内容的,局部的更新网页,这样整个过程页面不会出现刷新,覆盖操作。

原生的Ajax

异步技术，Ajax其实质是利用浏览器提供的一个特殊的对象（XMLHttpRequest） 异步地向服务器发送请求

创建XMLHttpRequest对象

XMLHttpRequest对象：发送请求到服务器并获得返回结果。

所有现代浏览器 都内建了 XMLHttpRequest 对象，通过一行简单的 JavaScript 代码，我们就可以创建 XMLHttpRequest 对象。举例：对一个提交账号表单做简单验证，反馈给后端

<body><script>function checkAccount(account){var httpobj = new XMLHttpRequest();httpobj.open("get","http://127.0.0.1:8080/webBack/reg?account="+account,true);httpobj.send();httpobj.onreadystatechange = function(){//接收后端的数据document.getElementById("aid").innerHTML = httpobj.responseText;}}</script><form method="post">账号：<input type="text" name="account" value="" onblur="checkAccount(this.value)"><span id="aid"></span><br></form>
</body>

常用方法

方法名说明
open(method,URL,async）建立与服务器的连接 method参数指定请求的HTTP方法,典型的值是GET 或POST URL参数指定请求的地址 async参数指定是否使用异步请求，其值为true或 false
send(content)发送请求 content参数指定请求的参数
setRequestHeader(header,value)设置请求的头信息

常用属性

onreadystatechange：事件，指定回调函数

readystate: XMLHttpRequest的状态信息

responseText：获得响应的文本内容

axios框架

1.下载axios文件 https://unpkg.com/axios/dist/axios.min.js

2.导入项目

3.发送请求：和上文实现的效果是一样的，但代码更加简介

<script>function checkAccount(account){axios.get("http://127.0.0.1:8080/webBack/reg?account="+account).then(function(resp){document.getElementById("aid").innerHTML=resp.data;//默认json格式})}
</script>

相关文章：

同步_异步请求和Ajax并利用axios框架简化

目录 同步和异步 原生的Ajax 创建XMLHttpRequest对象 常用方法 常用属性 axios框架 同步和异步 同步请求&#xff1a;发送请求后&#xff0c;会做出回应&#xff0c;回应的内容会覆盖浏览器中的内容&#xff0c;这样会打断其他正常的操作&#xff0c;显得不太友好&#…...

编程日记 2023/8/16 2:08:04

取个对象值导致系统崩溃

取个对象值导致系统崩溃 前言 想必各位小伙经常在项目中遇到一些错误&#xff0c;取对象值的时候&#xff0c;经常报错,又或者某些项目突然就挂经常都是出现在一些对象取值上面&#xff0c;然后就被领导一顿训斥 报错分析 例如&#xff1a; 下面这个报错大家想必不会陌生&am…...

编程日记 2023/8/16 2:07:03

nestjs 基础、使用 passport 来进行鉴权

回顾一些定义 NestJS 部分 Module 模块结构 模块是一个图状引用关系。 模块的实例化有三种模式。默认情况是 singletones 模式&#xff0c;也就是模块可能被引用&#xff0c;但不同的引用处拿的是同一个共享实例&#xff0c;也就是说一个进程有一个唯一的实例被共享。 模块&a…...

编程日记 2023/8/16 2:06:02

1.1 : DNA 螺旋

概述 脱氧核糖核酸（DNA）是负责在所有生物体和大多数病毒中代代相传性状的遗传物质。DNA由两条相互缠绕形成双螺旋的核苷酸链组成。DNA 结构的发现是在近一个世纪的时间里逐步发现的，代表了科学史上最著名、最迷人的故事之一。 DNA 结构详细信息 每条 DNA 链均由称为核苷酸…...

编程日记 2023/8/16 2:05:01

.gitignore匹配规则

目录 1.直接一个名称2.斜杠 /3.符号 *4.问号 &#xff1f;5.感叹号 &#xff01;6.gitkeep 借鉴抖音账号&#xff1a; 渡一前端提薪课 1.直接一个名称 会忽略目录下的所有该名称文件和文件夹&#xff0c;无论嵌套多深。 2.斜杠 / 1.斜杠在开头(/dist)&#xff1a;忽略和.gitig…...

编程日记 2023/8/16 2:03:57

Python-OpenCV中的图像处理-GrabCut算法交互式前景提取

Python-OpenCV中的图像处理-GrabCut算法交互式前景提取 Python-OpenCV中的图像处理-GrabCut算法交互式前景提取 Python-OpenCV中的图像处理-GrabCut算法交互式前景提取 cv2.grabCut(img: Mat, mask: typing.Optional[Mat], rect, bgdModel, fgdModel, iterCount, mode…) img…...

编程日记 2023/8/16 2:02:56

JAVA 鼠标控制与键盘输入控制

核心类&#xff1a;java.awt.Robot 该类是JDK定义的电脑系统的抽象类,可以用来模拟实现鼠标点击与键盘输入等信息 简单实现一个自动抢票代码&#xff1a; Robot rt new Robot();//可以认为是操作间隔的停歇时间&#xff0c;比如等待页面加载&#xff0c;等弹框内容展示等 r…...

编程日记 2023/8/16 2:01:55

VB+SQL宿舍管理系统设计与实现

摘要 统是采用Visual Basic作为前台开发工具，SQL Server作为后台数据库平台的基于C/S的两层模式的管理系统。宿舍管理系统是目前各所高校后勤管理之中的重要部分，如何能科学有效的开展好宿舍管理部分的工作，是当前高校领导人和后勤管理人员关心的问题。因此，宿舍管理部分工…...

编程日记 2023/8/16 2:00:54

自律人生：戒断视频、游戏、小说、躺在床上不玩手机、睡觉前总结和冥想（提升注意力、专注度）

以下是一些方法来戒断视频、游戏、小说、躺在床上不玩手机&#xff0c;以及提高注意力和专注力。 制定计划 制定一个详细的计划&#xff0c;包括要戒断的东西、时间表以及对于成功戒断的奖励。这将帮助你保持目标&#xff0c;让你更容易达到成功。 找到替代品 尝试找到其他…...

编程日记 2023/8/16 1:59:52

学习笔记十四：K8S最小调度单元POD概述

K8S最小调度单元POD概述 k8s核心资源Pod介绍Pod是什么Pod如何管理多个容器Pod网络Pod存储代码自动发版更新收集业务日志 Pod工作方式自主式Pod控制器管理的Pod(防误删除) 如何基于Pod运行应用 k8s核心资源Pod介绍 K8s官方文档&#xff1a;https://kubernetes.io/ K8s中文官方文…...

编程日记 2023/8/16 1:58:51

ARM--day2(cpsr、spsr、数据搬移指令、移位操作指令、位运算操作指令、算数运算指令、比较指令、跳转指令)

.text .global _gcd _gcd:mov r0,#9mov r1,#15b loop loop:cmp r0,r1beq stopsubhi r0,r1bhi loopsubcc r1,r0bcc loopstop:b stop.end用for循环实现1~100之间和5050 .text .global _gcd _gcd:mov r0,#0x0mov r1,#0x1mov r2,#0x64b loop loop:cmp r1,r2bhi stopadd r0,r0,r1ad…...

编程日记 2023/8/16 1:57:50

idea报错：java: 程序包org.springframework.web.bind.annotation不存在

这个错误通常都是maven仓库的问题&#xff0c;试了网上很多方法&#xff0c;都没有解决&#xff0c;如果大家有遇到这个问题&#xff0c;且试了很多方法之后都没有解决&#xff0c;不妨可以试试我这个方法 先编译一下已经写好的代码&#xff0c;这时候会出现以上报错&#xff…...

编程日记 2023/8/16 1:56:48

Android平台GB28181设备接入端如何实现多视频通道接入？

技术背景 我们在设计Android平台GB28181设备接入模块的时候&#xff0c;有这样的场景诉求&#xff0c;一个设备可能需要多个通道&#xff0c;常见的场景&#xff0c;比如车载终端&#xff0c;一台设备&#xff0c;可能需要接入多个摄像头&#xff0c;那么这台车载终端设备可以…...

编程日记 2023/8/16 1:55:47

Evaluation Warning: The document was created with Spire.Doc for JAVA.

spire.doc-5.4.10.jar 生成PDF有广告语水印【Evaluation Warning: The document was created with Spire.Doc for JAVA.】 <!-- maven库访问不了 https://mvnrepository.com/artifact/e-iceblue/spire.doc e-iceblue库才能访问 https://repo.e-iceblue.cn/repository/maven…...

编程日记 2023/8/16 1:54:46

Java“牵手”根据关键词搜索（分类搜索）京东商品列表页面数据获取方法，京东API实现批量商品数据抓取示例

京东商城是一个网上购物平台&#xff0c;售卖各类商品&#xff0c;包括服装、鞋类、家居用品、美妆产品、电子产品等。要获取京东商品列表和商品详情页面数据&#xff0c;您可以通过开放平台的接口或者直接访问京东商城的网页来获取商品详情信息。以下是两种常用方法的介绍&…...

编程日记 2023/8/16 1:53:43

AIGC｜AGI究竟是什么？为什么大家都在争先入场？

一、AI大语言模型进入爆发阶段 2022年12月ChatGPT突然爆火&#xff0c;原因是其表现出来的智能化已经远远突破了我们的常规认知。虽然其呈现在使用者面前仅仅只是一个简单的对话问答形式&#xff0c;但是它的内容化水平非常强大&#xff0c;甚至在某些方面已经超过人类了&#…...

编程日记 2023/8/16 1:52:41

【数学建模】--主成分分析

本讲将介绍主成分分析&#xff08;Principal Component Analysis&#xff0c;PCA&#xff09;&#xff0c;主成分分析是一种降维算法&#xff0c;它能将多个指标转换为少数几个主成分&#xff0c;这些主成分是原始变量的线性组合&#xff0c;且彼此之间互不相关&#xff0c;其能…...

编程日记 2023/8/16 1:51:39

gitee(码云)如何生成并添加公钥，以及配置用户信息

一&#xff0c;简介 在使用Gitee的时候&#xff0c;公钥是必须的&#xff0c;无论是克隆还是上传。本文主要介绍如何本地生成和添加公钥到服务器&#xff0c;然后配置自己的用户信息&#xff0c;方便日后拉取与上传代码。 二&#xff0c;步骤介绍 2.1 本地生成公钥 打开git ba…...

编程日记 2023/8/16 1:50:37

wangeditor上传图片并展示在输入框内方法（vue3）

安装vue3组件 yarn add @wangeditor/editor-for-vue@next # 或者 npm install @wangeditor/editor-for-vue@next --save 页面中创建一个新的组件 <template><div style="border: 1px solid #ccc; text-align: left"><Toolbar style="border-…...

编程日记 2023/8/16 1:49:36

UGUI基础游戏对象Canvas

一.画布Canvas对象概述 画布是一种带有画布组件的游戏对象&#xff0c;所有 UI 元素都必须是此类画布的子项。 创建新的 UI 元素&#xff08;如使用菜单 GameObject > UI > Image 创建图像&#xff09;时&#xff0c;如果场景中还没有画布&#xff0c;则会自动创建画布。…...

编程日记 2023/8/16 1:48:35

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

编程新知 2025/8/23 5:46:26

JavaScript 中的 ES|QL：利用 Apache Arrow 工具

作者&#xff1a;来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗&#xff1f;了解下一期 Elasticsearch Engineer 培训的时间吧&#xff01; Elasticsearch 拥有众多新功能&#xff0c;助你为自己…...

编程新知 2026/1/23 7:23:58

NLP学习路线图（二十三）：长短期记忆网络（LSTM）

在自然语言处理（NLP）领域，我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感，还是实现语言的翻译，都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心，而循环神经网络（RNN） 曾被视为…...

编程新知 2026/2/1 7:05:28

3-11单元格区域边界定位(End属性)学习笔记

返回一个Range 对象&#xff0c;只读。该对象代表包含源区域的区域上端下端左端右端的最后一个单元格。等同于按键 End 向上键(End(xlUp))、End向下键(End(xlDown))、End向左键(End(xlToLeft)End向右键(End(xlToRight)) 注意&#xff1a;它移动的位置必须是相连的有内容的单元格…...

编程新知 2026/2/9 15:39:14

【C++特殊工具与技术】优化内存分配(一)：C++中的内存分配

目录 一、C 内存的基本概念​ 1.1 内存的物理与逻辑结构​ 1.2 C 程序的内存区域划分​ 二、栈内存分配​ 2.1 栈内存的特点​ 2.2 栈内存分配示例​ 三、堆内存分配​ 3.1 new和delete操作符​ 4.2 内存泄漏与悬空指针问题​ 4.3 new和delete的重载​ 四、智能指针…...

编程新知 2026/1/31 6:12:22

redis和redission的区别

Redis 和 Redisson 是两个密切相关但又本质不同的技术&#xff0c;它们扮演着完全不同的角色&#xff1a; Redis: 内存数据库/数据结构存储 本质&#xff1a; 它是一个开源的、高性能的、基于内存的 键值存储数据库。它也可以将数据持久化到磁盘。 核心功能&#xff1a; 提供丰…...

编程新知 2025/11/6 1:34:07

绕过 Xcode？使用 Appuploader和主流工具实现 iOS 上架自动化

iOS 应用的发布流程一直是开发链路中最“苹果味”的环节&#xff1a;强依赖 Xcode、必须使用 macOS、各种证书和描述文件配置……对很多跨平台开发者来说&#xff0c;这一套流程并不友好。 特别是当你的项目主要在 Windows 或 Linux 下开发&#xff08;例如 Flutter、React Na…...

编程新知 2026/1/10 11:35:24

__VUE_PROD_HYDRATION_MISMATCH_DETAILS__ is not explicitly defined.

这个警告表明您在使用Vue的esm-bundler构建版本时&#xff0c;未明确定义编译时特性标志。以下是详细解释和解决方案&#xff1a; ‌问题原因‌&#xff1a; 该标志是Vue 3.4引入的编译时特性标志&#xff0c;用于控制生产环境下SSR水合不匹配错误的详细报告1使用esm-bundler…...

编程新知 2025/11/2 19:29:07

可视化预警系统：如何实现生产风险的实时监控？

在生产环境中&#xff0c;风险无处不在&#xff0c;而传统的监控方式往往只能事后补救&#xff0c;难以做到提前预警。但如今&#xff0c;可视化预警系统正在改变这一切&#xff01;它能够实时收集和分析生产数据&#xff0c;通过直观的图表和警报&#xff0c;让管理者第一时间…...

编程新知 2026/2/3 0:05:17

[KCTF]CORE CrackMe v2.0

这个Reverse比较古老&#xff0c;已经有20多年了&#xff0c;但难度确实不小。 先查壳 upx压缩壳&#xff0c;0.72&#xff0c;废弃版本&#xff0c;工具无法解压。 反正不用IDA进行调试&#xff0c;直接x32dbg中&#xff0c;dump内存&#xff0c;保存后拖入IDA。 这里说一下…...

编程新知 2026/2/1 4:57:13