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

目录

同步和异步

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

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

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

相关文章

汉诺塔:传说中的智慧游戏

文章目录 前言规则概述数学原理核心Java代码实现结语 前言 汉诺塔&#xff08;Hanoi Tower&#xff09;&#xff0c;又称汉诺塔游戏&#xff0c;是源自印度古老传说的经典智力游戏。这个谜题的起源被认为与印度的寺庙有关&#xff0c;是由僧侣们传承的智慧游戏。汉诺塔塔座包含…

点击base64编码过的图片在另一个页面显示

开始的代码是这样的&#xff0c;新开一个窗口显示经过base64编码后的图片&#xff0c;但是url太长了显示失败。 openImage(imgSrc) {window.open(imgSrc, _blank); }, 解决方法&#xff1a;这段代码接收一个Base64编码的图像数据&#xff0c;把它转换为一个Blob对象。 Blob&…

LabVIEW使用边缘检测技术实现彩色图像隐写术

LabVIEW使用边缘检测技术实现彩色图像隐写术 隐写术是隐藏信息的做法&#xff0c;以隐瞒通信的存在而闻名。该技术涉及在适当的载体&#xff08;如图像&#xff0c;音频或视频&#xff09;中插入秘密消息。在这些载体中&#xff0c;数字图像因其在互联网上的广泛使用而受到青睐…

1+X Web前端开发职业技能等级证书建设方案

一 、系统概述 1X Web前端开发技术是计算机类专业重要的核心课程&#xff0c;课程所包含的教学内容多&#xff0c;实践性强&#xff0c;并且相关技术更新快。传统的课堂讲授模式以教师为中心&#xff0c;学生被动式接收&#xff0c;难以调动学生学习的积极性和主动性。混合式教…

5.0 Spring Boot核心

1. Spring Boot注解 注解名称 注解说明 SpringBootApplication 用于标注Spring Boot应用为启动类&#xff0c;是一个组合注解&#xff0c;主要组合了SpringBootConfiguration、EnableAutoConfiguration和ComponentScan注解 SpringBootConfiguration 继承自Configuration&a…

【apifox】如何写一份合格的 API 文档?

要想弄清楚如何开始写出一份合格的 API 文档&#xff0c;我们需要首先了解什么是 API&#xff0c;它的使用场景有哪些&#xff0c;应该具备什么样的能力。 什么是 API&#xff1f; 想象一下&#xff0c;当小 A 购入了一台新的电脑后&#xff0c;希望将显示画面投射至一块色准…

【Quarkus技术系列】「云原生架构体系」在云原生时代下的Java“拯救者”是Quarkus,那云原生是什么呢?

云原生时代下的Java"拯救者" 在云原生时代&#xff0c;其实Java程序是有很大的劣势的&#xff0c;以最流行的spring boot/spring cloud微服务框架为例&#xff0c;启动一个已经优化好&#xff0c;很多bean需要lazy load的application至少需要3-4秒时间&#xff0c;内…

构建之法 - 软件工程实践教学:每天都向前推进一点点

作者&#xff1a;福州⼤学 汪璟玢⽼师 汪老师&#xff1a;每次都向前推进一点点&#xff0c;哪怕只有一点点&#xff0c;也好过什么都不做。 ​邹老师&#xff1a;对&#xff0c;几个学期下来&#xff0c;就已经超过那些“空想”的团队很远了。坚持下去&#xff01; 汪老师&…

vue或uniapp使用pdf.js预览

一、先下载稳定版的pdf.js&#xff0c;可以去官网下载 官网下载地址 或 pdf.js包下载(已配置好&#xff0c;无需修改) 二、下载好的pdf.js文件放在public下静态文件里&#xff0c; uniapp是放在 static下静态文件里 三、使用方式 1. vue项目 注意路径 :src"static/pd…

数据结构——时间复杂度和空间复杂度

1.算法效率 2.时间复杂度 3.空间复杂度 4. 常见时间复杂度以及复杂度oj练习 1.算法效率 1.1 如何衡量一个算法的好坏 如何衡量一个算法的好坏呢&#xff1f;比如对于以下斐波那契数的计算 long long Fib(int N) { if(N < 3) return 1; return Fib(N-1) Fib(N-2); }我们看到…

母婴即时零售行业数据可视化分析

对新晋父母来说&#xff0c;很多母婴用品如同一位贴心的助手&#xff0c;为他们的宝宝提供温暖和呵护。从婴儿床垫到可爱的拼图玩具&#xff0c;每一件用品都是为宝宝的成长和发展量身定制。对于繁忙的父母们而言&#xff0c;这些用品不仅帮助照顾孩子&#xff0c;更是为他们减…

【MySQL】数据库基础

文章目录 1. 数据库基础1.1 什么是数据库1.2 在Linux上见见数据库 2. 主流数据库3. 服务器、数据库、表三者之间的关系4. MySQL结构5. SQL语句分类6. 存储引擎 1. 数据库基础 1.1 什么是数据库 数据库是按照数据结构来组织、存储和管理数据的仓库&#xff0c;是一个长期存储在…

旧版本docker未及时更新,导致更新/etc/docker/daemon.json配置文件出现docker重启失败

一、背景 安装完docker和containerd之后&#xff0c;尝试重启docker的时候&#xff0c;报错如下&#xff1a; systemctl restart dockerJob for docker.service failed because the control process exited with error code. See “systemctl status docker.service” and “…

Django-配置邮箱功能(一):使用django自带的发送邮件功能

一、获取邮箱授权码 以QQ邮箱为例子&#xff1a; 1、进入到设置&#xff0c;找到账户 2、开启POP3等服务&#xff0c;点击管理服务 3、进入管理服务&#xff0c;生成授权码 4、按照要求发送短信就可以了 5、将授权码复制保存&#xff0c;离开界面就看不到了 二、django项目中…

【CTF-MISC】这是一张单纯的图片

题目链接&#xff1a;https://ctf.bugku.com/challenges/detail/id/2.html 下载图片&#xff0c;使用010 Editor打开&#xff1a; 在文件末尾可以看到疑似HTML实体的内容&#xff0c;将其解码即可得到答案。

day3 TCP/UDP基础模型、多点通信、TCP开发服务器模型

1.多线程中的newfd&#xff0c;能否修改成全局&#xff0c;不行&#xff0c;为什么&#xff1f; 不能。线程之间共享附属进程的所有资源&#xff0c;newfd是全局变量&#xff0c;作用域是全局&#xff0c;一经更改所有线程中的newfd都会变化。 2.多线程中分支线程的newfd能否…

Spring Boot+Redis 实现一个简单的限流器示例

Spring BootRedis 实现一个简单的限流器&#xff0c;限制 文章目录 Spring BootRedis 实现一个简单的限流器&#xff0c;限制0.前言1.基础介绍2.步骤2.1. 引入依赖2.2. 配置文件2.3. 核心源码优化后再优化一下加入布隆过滤器 4.总结5.参考文档6. Redis从入门到精通系列文章 0.前…

每天一道leetcode:1129. 颜色交替的最短路径(图论中等广度优先遍历)

今日份题目&#xff1a; 给定一个整数 n&#xff0c;即有向图中的节点数&#xff0c;其中节点标记为 0 到 n - 1。图中的每条边为红色或者蓝色&#xff0c;并且可能存在自环或平行边。 给定两个数组 redEdges 和 blueEdges&#xff0c;其中&#xff1a; redEdges[i] [ai, bi…

用python来爬取某鱼的商品信息(2/2)

目录 上一篇文章 本章内容 设置浏览器为运行结束后不关闭&#xff08;可选&#xff09; 定位到搜索框的xpath地址 执行动作 获取cookie 保存为json文件 修改cookie的sameSite值并且导入cookie 导入cookie&#xff08;出错&#xff09; 导入cookie&#xff08;修改后&…

Tik Tok娱乐+电商MCN怎么做?

在美国外的热门市场中&#xff0c;TikTok 主要做的区域市场包括中东、拉美、欧洲和东亚&#xff0c;而这里面适合做电商的其实并不多。 欧洲、东亚都属于成熟市场&#xff0c;且 TikTok 本身在欧洲面临 DSA 法案更严格的审查&#xff0c;与在英国相同&#xff0c;欧洲各市场消…