快速入门了解Ajax

  • 博客主页:音符犹如代码
  • 系列专栏:JavaWeb
  • 关注博主,后期持续更新系列文章
  • 如果有错误感谢请大家批评指出,及时修改
  • 感谢大家点赞👍收藏⭐评论✍ 

Ajax的初识

意义:AJAX(Asynchronous JavaScript and XML)即异步 JavaScript 和 XML

作用:

  • 数据交换:允许网页在不重新加载整个页面的情况下,从服务器获取最新的数据。
  • 异步交互:当发送 AJAX 请求获取数据时,页面的其他操作和功能不会被阻塞,由于异步操作不需要等待数据返回就可以继续执行其他任务,能够更有效地利用系统资源,特别是在处理耗时的网络请求时。

原生Ajax:
官网文档:AJAX - XMLHttpRequest 对象

//1. 创建新的 XMLHttpRequest 对象
var xmlHttpRequest  = new XMLHttpRequest();
//2. 发送异步请求
xmlHttpRequest.open('GET','http://~');
xmlHttpRequest.send();//发送请求
//3. 获取服务响应数据
xmlHttpRequest.onreadystatechange = function(){//此处判断 4表示浏览器请求已完成就绪的响应数量,200表示请求的状态好是对的,没有错误if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){document.getElementById('div1').innerHTML = xmlHttpRequest.responseText;}
}

上面是一个原生的Ajax的一个写法,但是原生的Ajax太繁琐甚至还有浏览器不兼容的问题,所以现在都是基于原生的Ajax的Axios

Axios

介绍:Axios是简化的Ajax,对传统的Ajax操作的简化和改进,也是一个更强大和便捷的http请求处理的工具

官网:Axios中文文档 | Axios中文网

下边是两个来自官网的post的请求和get请求的代码

axios.post('/user', {firstName: 'Fred',lastName: 'Flintstone'}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});
const axios = require('axios');// 向给定ID的用户发起请求
axios.get('/user?ID=12345').then(function (response) {// 处理成功情况console.log(response);}).catch(function (error) {// 处理错误情况console.log(error);}).finally(function () {// 总是会执行});// 上述请求也可以按以下方式完成(可选)
axios.get('/user', {params: {ID: 12345}}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);}).finally(function () {// 总是会执行});  // 支持async/await用法
async function getUser() {try {const response = await axios.get('/user?ID=12345');console.log(response);} catch (error) {console.error(error);}
}
//请求方式的别名(来自官网)
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
axios.postForm(url[, data[, config]])
axios.putForm(url[, data[, config]])
axios.patchForm(url[, data[, config]])

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

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

相关文章

深入理解二叉搜索树:定义、操作及平衡二叉树

引言 二叉搜索树(Binary Search Tree,BST)是一种特殊的二叉树结构,每个节点的左子树节点值小于根节点值,而右子树节点值大于根节点值。二叉搜索树在计算机科学中有着广泛的应用,尤其在动态查找表和优先队列…

Halcon 3D检测平面度,断差,凹坑,凸点

Halcon可以利用深度图做相关检测,也可以直接利用点云数据做检测。但是如果是利用点云数据进行检测,PCL更合适。本文写的是利用深度图检测的方法。 dev_close_window () dev_open_window (0, 0, 512, 512, black, WindowHandle) dev_set_draw (margin) *…

yum换源出现的问题及解决方案

yum 源相关的问题及解决方法 常用替换源的方法 mv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos.d/CentOS-Base.repo.backup wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo yum clean all yum makecache有时不小心下多了源…

leetcode-79. 单词搜索

题目描述 给定一个 m x n 二维字符网格 board 和一个字符串单词 word 。如果 word 存在于网格中,返回 true ;否则,返回 false 。 单词必须按照字母顺序,通过相邻的单元格内的字母构成,其中“相邻”单元格是那些水平相…

Linux安装TrueNAS(网络附加存储)教程 –第1部分

TrueNAS CORE(原名FreeNAS)是一款流行的存储系统,可帮助您构建自己的高质量存储设置,而无需支付软件费用。您可以将其安装在计算机硬件或虚拟机 (VM) 上,以获得开源存储的好处。 您可以在家中、办公室或数据中心使用T…

个性化音频生成GPT-SoVits部署使用和API调用

一、训练自己的音色模型步骤 1、准备好要训练的数据,放在Data文件夹中,按照文件模板中的结构进行存放数据 2、双击打开go-webui.bat文件,等待页面跳转 3、页面打开后,开始训练自己的模型 (1)、人声伴奏分…

RV1126 Linux 系统,接外设,时好时坏(一)应该从哪些方面排查问题

在 Linux 系统中接外设时,遇到“时好时坏”的问题,可能是由多种因素引起的。以下是一些排查问题的建议。 1. 硬件方面的排查 1.1 连接检查 物理连接: 确保外设与主板之间的连接良好,检查插头、插座及线缆是否牢固。引脚配置: 确认设备树中引脚的配置是否正确,尤其是引脚…

shopee虾皮 java后端 一面面经 整体感觉不难

面试总结:总体不难,算法题脑抽了只过了一半,面试官点出了问题说时间到了,反问一点点,感觉五五开,许愿一个二面 1.Java中的锁机制,什么是可重入锁 Java中的机制主要包括 synchronized关键字 Loc…

本地新建项目上传gitee

本地新建项目上传gitee 1、初始化一个新的Git仓库 git init2、添加所有文件到新的Git仓库 git add .3、提交这些更改 git commit -m init4、在Gitee上创建一个新的仓库 登录到您的Gitee帐户,然后点击“新建仓库”。填写仓库名称、描述等信息,然后点击…

Profinet 转 EtherCAT 主站网关

一、功能概述 1.1 设备简介 本产品是 PN(Profinet)和 ECAT(EtherCAT)网关,通过数据映射方式工作。 本产品在 PN 侧作为 PN IO 从站,接西门子 PLC 的 Profinet 口;在 ECAT 侧 做为 ECAT 主站,接 ECAT 从站,如伺服驱…

使用Nacos统一管理Logback日志配置

在项目开发过程,之前日志配置是日志模块单独配置,其他微服务通过引入日志模块依赖来统一日志配置。但是这样结构有一个痛点就是,如果需要修改日志配置,就需要重新打包,然后构建所有依赖了日志模块的微服务,无法实时修改日志配置。为了实时更新日志配置无需重新构建服务,…

CTF-Web习题:[GXYCTF2019]Ping Ping Ping

题目链接:[GXYCTF2019]Ping Ping Ping 解题思路 访问靶机,得到如下页面,类似于URL参数 尝试用HackBar构造url传输过去看看 发现返回了ping命令的执行结果,可以猜测php脚本命令是ping -c 4 $ip,暂时不知道执行的函数…

IMU用于肌骨相关职业病风险评估

肌肉骨骼疾病(WMSDs)是职场中常见的健康问题,会导致员工疼痛和工作效率降低。为了更好地评估和管理这些风险,科研人员开发了一种基于惯性测量单元(IMU)的新型系统。 这个创新系统通过监测员工在工作时的身体…

数据库之运算符

目录 一、算数运算符 二、比较运算符 1.常用比较运算符 2.实现特殊功能的比较运算符 三、逻辑运算符 1.逻辑与运算符(&&或者AND) 2.逻辑或运算符(||或者OR) 3.逻辑非运算符(!或者NOT&#…

软件测试中的压力测试和性能测试区别

压力测试和性能测试是软件测试中两种重要的测试类型,它们都旨在评估软件在不同条件下的表现,但侧重点和目的有所不同。 压力测试(Stress Testing)定义: 压力测试是一种测试方法,用于确定软件在极端条件下…

BP神经网络及其Python和MATLAB实现预测

## 一、背景 BP(Back Propagation)神经网络是多层前馈神经网络的一种,广泛应用于模式识别、数据挖掘、机器学习等领域。随着人工智能与机器学习技术的快速发展,BP神经网络作为一种基础的神经网络模型,已经成为研究和应…

安卓开机启动性能优化之-bootchart相关工具使用及查看

背景: 开机启动相关的详细信息,一般都是可以通过logcat中查看boot_progress相关查看,这种方式查看相对不那么方便,毕竟开机过程中涉及的进程较多,要查看也较多,而且还经常需要查看代码才可以对应起来&…

前端系列-8 集中式状态管理工具pinia

集中式状态管理工具—pinia vue3中使用pinia作为集中式状态管理工具,替代vue2中的vuex。 pinia文档可参考: https://pinia.web3doc.top/introduction.html 1.项目集成pinia 安装pinia依赖: npm install pinia在main.ts中引入pinia import { createApp } from vu…

Facebook和Instagram运营中的注意事项和QA

Facebook注意事项 1.Facebook的几种违规行为:加好友过快或者过多;加群过快或者过多;转 发信息到群过快或者过多;创建主页过快或者过多;创建群过快或者过多; 主动给人发信息过多;IP、浏览器更换&…

spring框架实现滑动验证码功能

spring框架实现滑动验证码功能 1. 整体描述2. 具体实现2.1 滑动验证码实体类2.2 滑动验证码登录VO2.3 滑动验证码接口返回类2.4 滑动验证码工具类2.5 滑动验证码Service2.6 滑动验证码Controller 3 工程源码4 总结 1. 整体描述 之前项目需要在验证码模块,增加滑动验…