Axios和AJAX学习概要

最新推荐文章于 2025-12-18 21:39:35 发布
原创 最新推荐文章于 2025-12-18 21:39:35 发布 · 536 阅读 · 12 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ajax #http #axios

本文对比了axios和原生ajax，强调axios作为基于Promise的HTTP库，封装了ajax并提供更便捷的API，如拦截器和自动数据转换。介绍了ajax的基本原理和优缺点，以及axios在浏览器和node.js中的应用实例。

一、axios和ajax的区别：

 1. axios是一个基于Promise的HTTP库，而ajax是对原生XHR的封装；

 2. ajax技术实现了局部数据的刷新，而axios实现对ajax的封装；

axios和ajax的区别及优缺点：

二、关于ajax:

 1.什么是ajax

    ajax是对原生XHR的封装，为了达到我们跨域的目的，增添对JSONP的支持。

    ajax不是一门新技术，而是多种技术的组合，用于快速的创建动态页面，能够实现无刷新更新数据从而提高
    用户体验。

 2.ajax的原理？

     由客户端请求ajax引擎，再由ajax引擎请求服务器，服务器做出一系列响应后返回给ajax引擎，
     由ajax引擎决定将这个结果写入客户端的什么位置，实现页面无刷新更新数据。
 
 3.核心对象？
     XMLHttpRequest
     
 4.ajax优缺点？
 
     优点：
    1.无刷新更新数据
    2.异步与服务器通信
    3.前端和后端负载平衡
    4.基于标准被广泛支持
    5.页面与应用分离
    
     缺点：
    1.ajax不能使用Back和history功能，即时对浏览器机制的破坏。
    2.安全问题ajax暴露了与服务

最低0.47元/天 解锁文章
用 axios 实现 ajax 方案
m0_37802395的博客
03-29 834
使用 axios 实现 ajax 方案vue.js 自2.0版本已经不对 vue-resource 更新了，官方推荐使用 axios 解决方案。axios 使用了 Promise,而 jquery 自3.0 版本才支持 Promise,如果你只是想使用 jquery 的 ajax 的话，引入整个 jquery 是很大的负担，所以 axios 是一个很好的工具。 知识点： 1.webpack ...
使用 axios 实现 ajax 方案
热门推荐
fantian001的博客
04-16 4万+
使用 axios 实现 ajax 方案 vue.js 自2.0版本已经不对 vue-resource 更新了，官方推荐使用 axios 解决方案。axios 使用了 Promise,而 jquery 自3.0 版本才支持 Promise,如果你只是想使用 jquery 的 ajax 的话，引入整个 jquery 是很大的负担，所以 axios 是一个很好的工具。 知识点： 1.we...
axios基础学习——通过 Vue + axios 获取接口数据的小demo_axios获取后端数据(1)
2401_84433974的博客
06-16 1810
*背景：**以前关于get、post、put等请求，我们第一时间都想到就是jQuery。但如今随着Vue、React等优秀框架的出现，jQuery逐渐淡出了市场，同时促使了axios轻量级HTTP库的出现。Axios，是一个基于promise的网络请求库，类似于jQuery的AJAX，作用于node.js和浏览器中，它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。
axios基础学习——通过 Vue + axios 获取接口数据的小demo_axios获取后端数据
2401_84434086的博客
06-16 1572
关于这个Vue + axios 获取接口数据的小demo，实现效果很简单，就是在Vue语法中，通过axios来获取接口的数据，然后打印出来，这里我们使用的是一个笑话的接口，其中重点关注的是如何使用axios、通过axios获取接口数据，因此这里就不介绍Vue的代码了，接下来先了解学习一下axios概要和使用方法（学过的可以直接看案例）。**背景：**以前关于get、post、put等请求，我们第一时间都想到就是jQuery。
axios基础学习——通过 Vue + axios 获取接口数据的小demo_axios获取后端数据(2)
2401_84437604的博客
06-15 874
*背景：**以前关于get、post、put等请求，我们第一时间都想到就是jQuery。但如今随着Vue、React等优秀框架的出现，jQuery逐渐淡出了市场，同时促使了axios轻量级HTTP库的出现。Axios，是一个基于promise的网络请求库，类似于jQuery的AJAX，作用于node.js和浏览器中，它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。
axios基础学习——通过 Vue + axios 获取接口数据的小demo
黛琳ghz的博客，期待你的关注。
01-09 7252
关于这个Vue + axios 获取接口数据的小demo，实现效果很简单，就是在Vue语法中，通过axios来获取接口的数据，然后打印出来，这里我们使用的是一个笑话的接口，其中重点关注的是如何使用axios、通过axios获取接口数据，因此这里就不介绍Vue的代码了。
[学习笔记] 数据请求(二) --- Axios
zhaoweihao的博客
12-28 533
[学习笔记] 数据请求(二) — Axios 认识 Axios 文档 Axios中文文档 概要说明 Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 特性： 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换 JSON 数据 客户端支持防御 XSRF 简单使用 Axios 一、安装 脚手架（npm）安装：
vue（ajax：axios中文文档）
weixin_30338497的博客
08-07 209
axios 基于http客户端的promise，面向浏览器和nodejs 特色 浏览器端发起XMLHttpRequests请求 node端发起http请求 支持Promise API 监听请求和返回 转化请求和返回 取消请求 自动转化json数据 客户端支持抵御 安装 使用npm： $ npm i a...
Ajax Fetch 和 Axios(持续更新中...)
weixin_33877092的博客
02-21 240
Ajax Fetch 和 Axios(持续更新中...) 知识点梳理 AJAX 不是 JavaScript 的规范，它只是一个哥们“发明”的缩写：Asynchronous JavaScript and XML，意思就是用 JavaScript 执行异步网络请求。 JavaScript 代码都是单线程执行的，由于这个“缺陷”，导致 Jav...
AJAX技术入门学习笔记
05-31
内容概要：本文档《AJAX入门学习笔记.pdf》主要介绍了AJAX的基础概念、使用方法以及相关工具的应用。首先概述了AJAX的核心——通过XMLHttpRequest对象实现浏览器与服务器之间的异步通信，支持多种数据格式传输并在不...
精选资源
基于Promise的Axios HTTP库详解及应用实践-掌握API请求的最佳工具
02-17
内容概要：本文详尽介绍了Axios，这是一个基于Promise的HTTP客户端库，既能在浏览器中调用也能用作Node.js环境下的HTTP客户端。文章首先概述了Axios的基本概念和特性，如支持多种HTTP方法、处理并发请求等功能。紧...
精选资源
深入解析Axios及其在前后端开发中的实际应用及优化封装
03-11
内容概要：本文档全面讲解了axios的基本概念及其在现代Web应用程序开发中的重要性和具体应用。内容覆盖范围广，不仅介绍了Axios作为HTTP客户端的优势与特性——例如在浏览器中创建XMLHttpRequest请求和node.js环境中...
网页基础开发指南：HTML、CSS、JavaScript、JSON与Ajax详解
03-27
最后介绍了Ajax技术及其应用场景，展示了如何使用原生XMLHttpRequest、jQuery和Axios进行异步请求。 适合人群：适用于初学者和有一定经验的前端开发人员，帮助他们全面掌握网页开发的基础知识和技术。 使用场景及...
JavaWeb企业级开发---Ajax、
最新发布
jianglin_78的博客
12-18 230
本文主要内容包括：1）Axios实现GET/POST请求的基本写法及优化版本；2）结合Vue和Axios实现数据动态加载展示的案例；3）简要提及前端工程化环境和Vue项目相关概念；4）maven介绍
jQuery AJAX 简介
lly202406的博客
12-14 274
jQuery AJAX是一种在无需重新加载整个页面的情况下，与服务器交换数据和更新部分网页的技术。它基于JavaScript和XML，允许我们在不刷新页面的情况下，从服务器获取数据，并动态地更新页面内容。jQuery AJAX作为一种强大的Web开发技术，在提高Web应用程序交互性和用户体验方面发挥着重要作用。掌握jQuery AJAX，将有助于您更好地实现复杂的Web功能。本文对jQuery AJAX进行了简要介绍，希望对您有所帮助。
HTTP的数据报格式
2402_82938245的博客
12-16 824
根据需求确定需要传输什么信息约定好信息组织的格式行文本，冗余度高，可读性高，消耗带宽最多Xml：可读性也高，冗余度也高，消耗带宽多Json：可读性高，冗余度适中，消耗带宽中（最主流的写法）Protobuf：可读性低，冗余度低，消耗带宽低浏览器允许网页在本地硬盘存储数据的一种机制，不让网页代码直接访问文件，而是浏览器的cookie提供了键值对的存储机制。
HTTP一些问题的解答（接上篇）
2301_80163888的博客
12-14 821
HTTP/1.x在弱网环境下可能比HTTP/2表现更好的原因在于其多连接策略能规避TCP队头阻塞问题。HTTP/2的多路复用机制虽然高效，但在高丢包率环境下，单个TCP连接的数据包丢失会阻塞所有请求，而HTTP/1.x的多个独立连接可将丢包影响限制在单个请求内。此外，HTTP/2的复杂特性（如头部压缩和流优先级）在弱网中可能适得其反，而HTTP/1.x的简单结构更稳健。HTTP/2并非强制单连接，但推荐单连接以实现最佳性能，仅在特殊情况下使用多连接。其多路复用通过二进制帧、流标识和单连接共享实现请求并行处理
Nginx | HTTP 反向代理：与上游服务端建立连接处理实践
WeiyiGeek 唯一极客IT知识分享
12-13 920
至此，当前阶段已完成 Nginx 于上游服务器连接建立、请求发送，以及连接异常时处理等相关性能指令介绍，并实践了当连接上游异常时自动切换节点，和拦截上游响应错误码实现 error_page 自定义错误，从而有效处理上游故障和不良响应，增强系统的健壮性和透明性，下一节将讲解 Nginx 如何接收并处理来自上游的HTTP响应。默认情况下（off），如果客户端在读取响应之前关闭了连接，Nginx 会立即终止与上游服务器的连接并返回给客户端一个错误，特别注意: 若启用可能增加上游服务器负担，需谨慎使用。
HTTP网络巩固知识基础题（1）
m0_62171526的博客
12-15 958
CORS 是一种机制，允许浏览器向不同域的服务器发出 XMLHttpRequest 或 Fetch 请求，解决了同源策略带来的跨域限制。X-Forwarded-For 是一个事实标准头部，用于识别通过HTTP代理或负载均衡器连接到Web服务器的客户端的原始IP地址。虽然底层TCP是面向连接的，但从HTTP层面来看是无连接的。Keep-Alive 允许在同一TCP连接上发送多个HTTP请求/响应，避免了频繁建立和关闭TCP连接的开销。HTTP 是无状态协议，服务器不会保留之前请求的信息。
个人博客vue和springboot
12-30
### 使用 Vue 和 Spring Boot 构建个人博客的最佳实践 #### 技术栈的选择 对于构建个人博客项目，选择的技术栈包括前端的Vue.js和后端的Spring Boot。这二者能够很好地协同工作来创建高效的应用程序[^2]。 #### 后端开发 (Spring Boot) 1. **初始化项目** 创建一个新的Spring Boot应用程序可以通过访问[start.spring.io](https://start.spring.io/)并下载所需的依赖项来进行。确保选择了Web, JPA, MySQL等必要的起步依赖以支持RESTful服务、数据持久化等功能。 2. **定义实体类** 定义代表博客文章的数据模型，比如`PostEntity`，它应该包含字段如id、title、content、authorId等，并通过JPA注解映射到数据库表中。 3. **实现控制器接口** 编写用于处理HTTP请求的API端点，在这里可以利用@RestController注解简化操作。例如提供获取所有帖子列表的方法： ```java @RestController public class PostController { private final PostService postService; @Autowired public PostController(PostService postService){ this.postService = postService; } @GetMapping("/api/posts") List<PostDTO> getAllPosts(){ return postService.findAll(); } } ``` 4. **安全性设置** 如果计划保护某些资源，则可集成Apache Shiro或其他认证授权机制来增强应用的安全性。 #### 前端开发 (Vue.js) 1. **安装Vue CLI工具** 首先全局安装Vue命令行工具以便快速搭建单页应用(SPA)，执行npm install -g @vue/cli即可完成安装。 2. **创建Vue项目结构** 利用vue create blog-app建立新的Vue工程目录，之后进入该文件夹下继续后续的工作。 3. **编写组件逻辑** 开发多个自定义UI组件用来展示博客内容，比如ArticleList.vue负责渲染文章摘要卡片；同时也要考虑加入路由功能使得不同页面之间平滑过渡。 4. **调用远程API** 在适当的地方发起AJAX请求读取来自服务器的信息，通常借助axios库辅助完成异步通信过程。下面是一个简单的例子说明如何从后台拉取最新的几篇博文概要： ```javascript import axios from 'axios'; export default { name: "Home", data() { return { posts: [] }; }, mounted() { axios.get('/api/posts') .then(response => this.posts = response.data); } } ``` 5. **样式美化** 可选用Element UI这样的预设主题框架加速界面设计流程，让整体外观更加美观大方。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值