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

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

news 2026/2/10 10:57:48

目录

同步和异步

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

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

编程新知 2026/2/8 1:53:29

零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

编程新知 2026/1/2 23:01:24

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

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

编程新知 2026/1/30 15:16:32

可靠性+灵活性：电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

编程新知 2025/9/27 2:43:26

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

编程新知 2026/1/29 3:35:37

鱼香ros docker配置镜像报错：https://registry-1.docker.io/v2/

使用鱼香ros一件安装docker时的https://registry-1.docker.io/v2/问题 一键安装指令 wget http://fishros.com/install -O fishros && . fishros出现问题&#xff1a;docker pull 失败 网络不同&#xff0c;需要使用镜像源 按照如下步骤操作 sudo vi /etc/docker/dae…...

编程新知 2025/12/31 6:28:08

网络编程（UDP编程）

思维导图 UDP基础编程&#xff08;单播&#xff09; 1.流程图 服务器&#xff1a;短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

编程新知 2026/2/4 17:31:44

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能&#xff1a;服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

编程新知 2026/2/6 15:01:23

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件，或者在构建过程中仍然引用了旧的路…...

编程新知 2026/2/6 15:56:54

【Redis】笔记｜第8节｜大厂高并发缓存架构实战与优化

缓存架构 代码结构 代码详情 功能点&#xff1a; 多级缓存&#xff0c;先查本地缓存&#xff0c;再查Redis&#xff0c;最后才查数据库热点数据重建逻辑使用分布式锁&#xff0c;二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...

编程新知 2026/1/26 3:45:28