【Ajax】笔记-Axios与函数发送AJAX请求

Axios 和 Ajax 的区别

1、Axios是一个基于Promise的HTTP库,而Ajax是对原生XHR的封装;
2、Ajax技术实现了局部数据的刷新,而Axios实现了对ajax的封装。

优缺点:

ajax:
本身是针对MVC的编程,不符合现在前端MVVM的浪潮
基于原生的XHR开发,XHR本身的架构不清晰,已经有了fetch的替代方案
JQuery整个项目太大,单纯使用ajax却要引入整个JQuery非常的不合理(采取个性化打包的方案又不能享受CDN服务
axios:
从 node.js 创建 http 请求
支持 Promise API
客户端支持防止CSRF
提供了一些并发请求的接口(重要,方便了很多的操作)

GET 请求

        // https://github.com/axios/axiosconst btns = document.querySelectorAll('button');//配置 baseURLaxios.defaults.baseURL = 'http://127.0.0.1:8000';btns[0].onclick = function () {//GET 请求axios.get('/axios-server', {//url 参数params: {id: 100,vip: 7},//请求头信息headers: {name: 'atguigu',age: 20}}).then(value => {console.log(value);});}

在这里插入图片描述

POST请求

        btns[1].onclick = function () {axios.post('/axios-server', {username: 'admin',password: 'admin'}, {//url params: {id: 200,vip: 9},//请求头参数headers: {height: 180,weight: 180,}});}

在这里插入图片描述

函数通用方法

btns[2].onclick = function(){axios({//请求方法method : 'POST',//urlurl: '/axios-server',//url参数params: {vip:10,level:30},//头信息headers: {a:100,b:200},//请求体参数data: {username: 'admin',password: 'admin'}}).then(response=>{//响应状态码console.log(response.status);//响应状态字符串console.log(response.statusText);//响应头信息console.log(response.headers);//响应体console.log(response.data);})}

在这里插入图片描述

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

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

相关文章

Rust中的Iterator和IntoIterator介绍及应用

Iterator即迭代器,它可以用于对数据结构进行迭代。被迭代的数据结构是可迭代的(iterable),所谓的可迭代就是这个数据结构有返回迭代器的方法,由于Rust的所有权机制,对一个数据结构的迭代器,有三种: 拿走数…

【MySQL】之复合查询

【MySQL】之复合查询 基本查询多表查询笛卡尔积自连接子查询单行子查询多行子查询多列子查询在from子句中使用子查询 合并查询小练习 基本查询 查询工资高于500或岗位为MANAGER的雇员,同时还要满足他们的姓名首字母为大写的J按照部门号升序而雇员的工资降序排序使用…

性能测试Ⅱ(压力测试与负载测试详解)

协议 性能理论:并发编程 ,系统调度,调度算法 监控 压力测试与负载测试的区别是什么? 负载测试 在被测系统上持续不断的增加压力,直到性能指标(响应时间等)超过预定指标或者某种资源(CPU&内存)使用已达到饱和状…

全志F1C200S嵌入式驱动开发(解决spi加载过慢的问题)

【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing @163.com】 之前的几个章节当中,我们陆续解决了spi-nor驱动的问题、uboot支持spi-nor的问题。按道理来说,下面要做的应该就是用uboot的loady命令把kernel、dtb、rootfs这些文件下载到ddr,然…

Mysql中日期时间的加减

Mysql中日期时间的加减,可以使用date_add()函数和date_sub()函数 1、date_add()为日期增加一个时间间隔 语法格式为: DATE_ADD(date,INTERVAL expr type) #date 指定的时间,可以是now(),也可以是其它时间 #INTERVAL 间隔关键字 #expr 添加…

WebRTC Simulcast介绍

原文地址👇 https://blog.livekit.io/an-introduction-to-webrtc-simulcast-6c5f1f6402eb/ 你想知道的关于Simulcast的一切 Simulcast是WebRTC中最酷的功能之一,它允许WebRTC会议在参与者网络连接不可预测的情况下进行扩展。在这篇文章中,我们将深入探讨Simulcas…

element ui input 深层循环v-model绑定默认数据删除不了的情况

例子&#xff1a; 在项目开发中遇到的&#xff0c;简单记录一下 <el-input style"width: 180px"v-model"item.dataForm"input"handleChangeDataForm($event)"type"number"placeholder"请输入1-2的数值"size"smal…

欧姆龙CX系列PLC串口转以太网欧姆龙cp1hplc以太网连接电脑

你是否还在为工厂设备信息采集困难而烦恼&#xff1f;捷米特JM-ETH-CX转以太网通讯处理器为你解决这个问题&#xff01; 捷米特JM-ETH-CX转以太网通讯处理器专门为满足工厂设备信息化需求而设计&#xff0c;可以用于欧姆龙多个系列PLC的太网数据采集&#xff0c;非常方便构建生…

【育儿】幼儿学习笔记 (一)

文章目录 [TOC] 一、前言二、2~6岁 目标三、1~3年级 目标学习内容校内校外 三、学习技巧表达结构表达方法板块化学习学习进度控制古诗词推荐 四、听文史类幼儿园小学 五、看 一、前言 语文、英语属于语言类学科 二、2~6岁 目标 听 ★★★★★ \color{Orange}{★★★★★} ★…

设计模式之责任链模式

// 定义请求类 class Request {private String content;public Request(String content) {this.content content;}public String getContent() {return content;} }// 抽象处理器 abstract class Handler {protected Handler successor; // 后继处理器public void setSuccesso…

Go语言channel

通道 通道&#xff08;channel&#xff09;是Go语言提供的一种在gorountine之间进行数据创术的通信机制。通道的声明非常简单&#xff0c;只需要使用chan 关键字即可&#xff0c;关闭则需要使用close函数。 注意&#xff1a;通过close函数关闭channel不是必须的。不主动关闭的…

java中list集合根据枚举类型排序

自定义枚举类 import lombok.AllArgsConstructor; import lombok.Getter; import lombok.NoArgsConstructor; import java.util.Arrays; Getter NoArgsConstructor AllArgsConstructor public enum ProContant {QCC("QCC",1),FQCC("FQCC",2),HELIHUA(&quo…

4、非线性数据结构

上一节课我们讲了线性数据结构&#xff0c;这一节我们说下非线性数据结构。 非线性数据结构&#xff0c;从字面意思来看&#xff0c;就是指不是线性的结构。线性结构的特点是只有一个前驱和一个后继。 那么非线性结构的特点就是有多个前驱或后继了。 如果只存在一个没有前驱的…

ChatGPT是什么?ChatGPT里的G、P、T分别指什么

前言 ChatGPT是一种基于人工智能技术的聊天机器人&#xff0c;它可以模拟人们的对话方式进行自然语言交流&#xff0c;并根据用户提出的问题、需求、意愿等信息提供相关服务或回答问题。 ChatGPT的G、P、T分别指“生成式”&#xff08;Generative&#xff09;、“预训练”&…

买卖股票的最佳时机系列

//方法一 class Solution { public:int dp[100005];int maxProfit(vector<int>& prices) {//dp[i]表示前i天买入卖出的获取的最大利润//min_val表示前i-1天买入的最小值&#xff1b;dp[0]0;int min_valprices[0];for(int i1;i<prices.size();i){dp[i]max(dp[i-1],…

HikariCP连接池

HikariCP连接池 HikariCP连接池是高性能的JDBC连接池&#xff0c;官网标注的三大特点&#xff1a;快速、简单、可靠&#xff0c;性能优于其他连接池。 官网详细地说明了HikariCP所做的一些优化&#xff0c;总结如下&#xff1a; 字节码精简&#xff1a;优化代码&#xff0c;直…

Jsonp劫持

JSONP 介绍 jsonp是一种协议&#xff0c;准确的说&#xff0c;他是json的一种使用模式&#xff0c;为了解决Json受同源策略限制的问题。 基本语法 JSONP的基本语法为&#xff1a;callback({“name”:”test”, “msg”:”success”}) 常见的例子包括函数调用&#xff08;如…

mac怎么转换音频格式?

mac怎么转换音频格式&#xff1f;相信很多小伙伴都知道&#xff0c;平时我们接触到的音频格式大多是mp3格式的&#xff0c;因为mp3是电脑上最为流行的音频格式&#xff0c;不过除了mp3格式外&#xff0c;还有很多不同的音频格式&#xff0c;有时候不同网上或者不同软件上下载到…

Java开发中的分层开发和整洁架构

分层开发(横向拆分) 分层开发的概念: maven多模块开发项目管理.可以利用这种管理功能,实现一个项目的多层次模块开发–分层开发. 比如,当前项目HelloController依赖HelloService 这样做目的: 复杂开发过程.解耦(不调整依赖关系,无法解耦).分层开发(横向拆分)和纵向拆分的区别…