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

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

news 2025/9/18 9:43:34

目录

同步和异步

原生的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

DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

编程新知 2025/6/15 19:07:20

智慧工地云平台源码，基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

编程新知 2025/9/13 17:46:34

【python异步多线程】异步多线程爬虫代码示例

claude生成的python多线程、异步代码示例&#xff0c;模拟20个网页的爬取&#xff0c;每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程&#xff1a;允许程序同时执行多个任务&#xff0c;提高IO密集型任务&#xff08;如网络请求&#xff09;的效率…...

编程新知 2025/8/13 7:14:07

Android15默认授权浮窗权限

我们经常有那种需求&#xff0c;客户需要定制的apk集成在ROM中&#xff0c;并且默认授予其【显示在其他应用的上层】权限&#xff0c;也就是我们常说的浮窗权限&#xff0c;那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...

编程新知 2025/8/27 15:36:00

【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统

目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索&#xff08;基于物理空间 广播范围&#xff09;2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...

编程新知 2025/8/29 0:20:47

让回归模型不再被异常值“带跑偏“，MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中&#xff0c;损失函数的选择对模型性能具有决定性影响。均方误差&#xff08;MSE&#xff09;作为经典的损失函数&#xff0c;在处理干净数据时表现优异&#xff0c;但在面对包含异常值的噪声数据时&#xff0c;其对大误差的二次惩罚机制往往导致模型参数…...

编程新知 2025/9/17 1:23:43

JVM虚拟机：内存结构、垃圾回收、性能优化

1、JVM虚拟机的简介 Java 虚拟机（Java Virtual Machine 简称：JVM）是运行所有 Java 程序的抽象计算机，是 Java 语言的运行环境，实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息，使得 Java 程序只需生成在 JVM 上运行的目标代码（字节码），就可以…...

编程新知 2025/9/8 17:59:06

NPOI Excel用OLE对象的形式插入文件附件以及插入图片

static void Main(string[] args) {XlsWithObjData();Console.WriteLine("输出完成"); }static void XlsWithObjData() {// 创建工作簿和单元格,只有HSSFWorkbook,XSSFWorkbook不可以HSSFWorkbook workbook new HSSFWorkbook();HSSFSheet sheet (HSSFSheet)workboo…...

编程新知 2025/7/9 9:17:56

MySQL 索引底层结构揭秘：B-Tree 与 B+Tree 的区别与应用

文章目录 一、背景知识&#xff1a;什么是 B-Tree 和 BTree&#xff1f; B-Tree&#xff08;平衡多路查找树&#xff09; BTree&#xff08;B-Tree 的变种&#xff09; 二、结构对比&#xff1a;一张图看懂 三、为什么 MySQL InnoDB 选择 BTree&#xff1f; 1. 范围查询更快 2…...

编程新知 2025/9/18 0:24:45

Proxmox Mail Gateway安装指南：从零开始配置高效邮件过滤系统

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐&#xff1a;「storms…...

编程新知 2025/9/4 11:09:31