《AJAX：前端异步交互的魔法指南》

 

什么是AJAX

AJAX（Asynchronous JavaScript and XML，异步 JavaScript 和 XML） 是一种用于创建异步网页应用的技术，允许网页在不重新加载整个页面的情况下，与服务器交换数据并局部更新页面内容。尽管名称中包含 XML，但现代 AJAX 主要使用 JSON（JavaScript Object Notation）作为数据格式。

核心原理

  1. 异步通信

    • 浏览器通过 JavaScript 异步发送请求到服务器，同时用户可继续操作页面。

    • 服务器返回数据后，JavaScript 动态更新页面指定部分，无需刷新整个页面。

  2. 基于 XMLHttpRequest 或 Fetch API

    • 传统 AJAX 使用 XMLHttpRequest 对象发起请求。

    • 现代开发中更常用 Fetch API（基于 Promise，语法更简洁）。

工作流程

sequenceDiagramparticipant 用户participant 浏览器participant 服务器用户->>浏览器: 触发事件（点击、滚动等）浏览器->>服务器: 发送异步请求（XHR/Fetch）服务器->>浏览器: 返回数据（JSON/XML/HTML）浏览器->>用户: 局部更新页面内容

关键特点

特性说明
异步性不阻塞用户操作，后台完成数据交互。
无刷新更新仅更新页面局部内容，避免整页重载。
数据格式灵活支持 JSON、XML、HTML 或纯文本。
依赖 JavaScript需浏览器启用 JavaScript。
跨域限制默认受同源策略限制，需通过 CORS（跨域资源共享）或代理解决跨域问题。

  • 使用浏览器的 XMLHttpRequest 对象 与服务器通信

  • 浏览器网页中，使用 AJAX技术（XHR对象）发起获取省份列表数据的请求，服务器代码响应准备好的省份列表数据给前端，前端拿到数据数组以后，展示到网页。

什么是axios

 

Axios 是一个基于 Promise 的现代化 HTTP 客户端库，专为浏览器和 Node.js 设计，用于简化前端与后端的数据交互。它封装了底层 HTTP 请求细节，提供了更简洁、易用的 API，并支持拦截器、自动 JSON 转换、请求取消等高级功能，是替代原生 XMLHttpRequest 和 Fetch API 的流行选择。

核心特性

特性说明
基于 Promise天然支持异步编程，避免回调地狱，可使用 async/await 简化代码。
浏览器 & Node.js 支持同一套代码兼容浏览器（XHR）和 Node.js（HTTP 模块）。
自动 JSON 转换自动将请求/响应数据与 JSON 格式互相转换。
拦截器机制可全局拦截请求和响应，用于添加身份验证、日志、错误处理等统一逻辑。
取消请求支持主动取消未完成的请求（如用户离开页面时终止无用请求）。
并发请求通过 axios.all() 和 axios.spread() 处理多个并行请求。
客户端防御 XSRF支持自动添加 XSRF Token 到请求头，增强安全性。
超时控制可设置请求超时时间，避免长时间等待无响应。

基础用法示例

1. 发起 GET 请求

 

import axios from 'axios';// 基本 GET 请求
axios.get('https://api.example.com/data').then(response => {console.log(response.data); // 响应数据}).catch(error => {console.error('请求失败:', error);});// 带参数的 GET 请求
axios.get('https://api.example.com/user', {params: {id: 123,type: 'vip'}
});

2. 发起 POST 请求

 

axios.post('https://api.example.com/login', {username: 'admin',password: '123456'
})
.then(response => {console.log('登录成功:', response.data.token);
});

3. 并发请求

 

const getUser = axios.get('/user/123');
const getPosts = axios.get('/posts');axios.all([getUser, getPosts]).then(axios.spread((userRes, postsRes) => {console.log('用户数据:', userRes.data);console.log('帖子数据:', postsRes.data);}));

4. 全局配置

 

// 设置全局默认值（如 API 基础路径）
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = 'Bearer token123';
axios.defaults.timeout = 5000; // 5秒超时

高级功能

1. 拦截器（Interceptors）

 

// 添加请求拦截器（如添加 Token）
axios.interceptors.request.use(config => {config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;return config;
}, error => {return Promise.reject(error);
});// 添加响应拦截器（如统一处理错误）
axios.interceptors.response.use(response => {return response.data; // 直接返回数据部分
}, error => {if (error.response.status === 401) {alert('登录已过期，请重新登录！');window.location.href = '/login';}return Promise.reject(error);
});

2. 取消请求

 

const source = axios.CancelToken.source();axios.get('/data', {cancelToken: source.token
}).catch(error => {if (axios.isCancel(error)) {console.log('请求被取消:', error.message);}
});// 取消请求（参数为可选提示信息）
source.cancel('用户主动取消操作');

Axios vs Fetch API

对比项AxiosFetch API
语法简洁性封装度高，API 更简洁原生 API，需手动处理更多细节
JSON 转换自动转换请求/响应数据需手动调用 response.json()
拦截器支持全局请求/响应拦截无内置拦截器，需自行封装
取消请求内置支持通过 AbortController 实现
浏览器兼容性兼容 IE11+（需 polyfill）兼容现代浏览器，IE 不支持
超时控制直接通过 timeout 配置需结合 setTimeout 和 AbortController

常见问题解决

  1. 跨域请求（CORS）

    • 需后端配置 Access-Control-Allow-Origin 等响应头。

    • 开发环境可通过代理（如 Webpack DevServer 代理）绕过。

  2. 文件上传

    const formData = new FormData();
formData.append('file', fileInput.files[0]);axios.post('/upload', formData, {headers: { 'Content-Type': 'multipart/form-data' }
});

     

  3. 错误处理统一封装
    建议通过拦截器集中处理 HTTP 状态码和业务错误码。

什么是URL

URL（Uniform Resource Locator，统一资源定位符） 是用于标识和定位互联网上资源（如网页、图片、视频等）的字符串。它是 Web 的核心组成部分，用户通过 URL 访问特定资源，浏览器通过 URL 向服务器请求数据。

URL 的结构

一个完整的 URL 通常由以下部分组成：

 

协议://主机名:端口号/路径?查询参数#片段标识符

示例

 

https://www.example.com:443/path/to/resource?name=value#section1

 

    URL 的组成部分详解

    部分说明
    协议（Scheme）指定访问资源使用的协议，常见的有：
    - http：超文本传输协议
    - https：加密的 HTTP
    - ftp：文件传输协议
    - mailto：电子邮件地址
    主机名（Host）资源所在服务器的域名或 IP 地址，如 www.example.com。
    端口号（Port）服务器监听的端口号，默认端口可省略（如 HTTP 默认 80，HTTPS 默认 443）。
    路径（Path）资源在服务器上的具体位置，如 /path/to/resource。
    查询参数（Query）以 ? 开头，包含键值对，用于传递额外信息，如 ?name=value&age=25。
    片段标识符（Fragment）以 # 开头，指向资源内部的特定部分（如 HTML 页面的锚点）。

     URL里的查询参数

    什么是查询参数 ?

    • 携带给服务器额外信息，让服务器返回我想要的某一部分数据而不是全部数据

    • 举例：查询河北省下属的城市列表，需要先把河北省传递给服务器

     

    1. 查询参数的语法 ？

      • 在 url 网址后面用?拼接格式：XXXX参数名1=值1&参数名2=值2

      • 参数名一般是后端规定的，值前端看情况传递即可

    2. axios 如何携带查询参数?

      使用 params 选项即可
    axios({url: '目标资源地址',params: {参数名: 值}
}).then(result => {// 对服务器返回的数据做后续处理
})

     常用请求和数据提交

    想要提交数据，先来了解什么是请求方法

    • 请求方法是一些固定单词的英文，例如：GET，POST，PUT，DELETE，PATCH（这些都是http协议规定的），每个单词对应一种对服务器资源要执行的操作。

    什么时候进行数据提交呢？

    • 例如：多端要查看同一份订单数据，或者使用同一个账号进行登录，那订单/用户名+密码，就需要保存在服务器上，随时随地进行访问

     axios 如何提交数据到服务器呢？

    axios({url: '目标资源地址',method: '请求方法',data: {参数名: 值}
}).then(result => {// 对服务器返回的数据做后续处理
})

    AXIOS的错误处理

    Axios 的错误处理 是开发中非常重要的一部分，能够有效应对网络请求中的各种异常情况（如网络错误、服务器错误、超时等）。Axios 提供了多种方式来处理错误，包括 catch 方法、try/catch 语法（结合 async/await）以及拦截器机制。

     

    Axios 的错误对象包含以下关键属性：

    • message：错误描述。

    • response：服务器返回的响应对象（如果有）。

      • status：HTTP 状态码（如 404、500）。

      • data：服务器返回的错误数据。

    • request：请求对象（如果请求已发出但未收到响应）。

    • config：请求的配置信息。

    示例：使用 catch 处理错误

    axios.get('https://api.example.com/data').then(response => {console.log('请求成功:', response.data);}).catch(error => {if (error.response) {// 服务器返回了错误状态码（4xx/5xx）console.error('服务器错误:', error.response.status, error.response.data);} else if (error.request) {// 请求已发出但未收到响应console.error('网络错误:', error.message);} else {// 其他错误（如配置错误）console.error('请求配置错误:', error.message);}});
     

    示例：使用 async/await 处理错误

    async function fetchData() {try {const response = await axios.get('https://api.example.com/data');console.log('请求成功:', response.data);} catch (error) {if (error.response) {console.error('服务器错误:', error.response.status, error.response.data);} else if (error.request) {console.error('网络错误:', error.message);} else {console.error('请求配置错误:', error.message);}}
}
     



    表白是表明心意，不是索取关系。

     

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

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

    相关文章

    Python 性能优化：从入门到精通的实用指南

    Python 性能优化：从入门到精通的实用指南

    Langchain系列文章目录 01-玩转LangChain：从模型调用到Prompt模板与输出解析的完整指南 02-玩转 LangChain Memory 模块：四种记忆类型详解及应用场景全覆盖 03-全面掌握 LangChain：从核心链条构建到动态任务分配的实战指南 04-玩转 LangChai…
    阅读更多...
    利用 requestrepo 工具验证 XML外部实体注入漏洞

    利用 requestrepo 工具验证 XML外部实体注入漏洞

    1. 前言 在数字化浪潮席卷的当下，网络安全的重要性愈发凸显。应用程序在便捷生活与工作的同时，也可能暗藏安全风险。XXE（XML外部实体）漏洞作为其中的典型代表，攻击者一旦利用它，便能窃取敏感信息、掌控服务…
    阅读更多...
    FreeRTOS第17篇：FreeRTOS链表实现细节05_MiniListItem_t：FreeRTOS内存优化

    FreeRTOS第17篇：FreeRTOS链表实现细节05_MiniListItem_t：FreeRTOS内存优化

    文/指尖动听知识库-星愿 文章为付费内容，商业行为，禁止私自转载及抄袭，违者必究！！！ 文章专栏：深入FreeRTOS内核：从原理到实战的嵌入式开发指南 1 为什么需要迷你列表项？ 在嵌入式系统中，内存资源极其宝贵。FreeRTOS为满足不同场景需求，设计了标准列表项（ListItem_…
    阅读更多...
    Spring 无法解决循环依赖的 5 种场景

    Spring 无法解决循环依赖的 5 种场景

    一、构造器注入引发的循环依赖 1. 问题复现 Component public class ServiceA {private final ServiceB serviceB;Autowiredpublic ServiceA(ServiceB serviceB) { // 构造器注入this.serviceB serviceB;} }Component public class ServiceB {private final ServiceA servic…
    阅读更多...
    Core Vision Kit（基础视觉服务）

    Core Vision Kit（基础视觉服务）

    文章目录 一、Core Vision Kit简介场景介绍约束与限制二、通用文字识别三、人脸检测一、Core Vision Kit简介 Core Vision Kit（基础视觉服务）是机器视觉相关的基础能力，例如通用文字识别（即OCR，Optical Character Recognition，也称为光学字符识别）、人脸检测、人脸比对…
    阅读更多...
    第TR3周：Pytorch复现Transformer

    第TR3周：Pytorch复现Transformer

    🍨 本文为🔗365天深度学习训练营中的学习记录博客 🍖 原作者：K同学啊 Transformer通过自注意力机制，改变了序列建模的方式，成为AI领域的基础架构 编码器：理解输入，提取上下文特征…
    阅读更多...
    FreeRTOS 任务间通信机制：队列、信号量、事件标志组详解与实验

    FreeRTOS 任务间通信机制：队列、信号量、事件标志组详解与实验

    1. FreeRTOS 消息队列 1.1 简介 ​ 队列是 任务间通信的主要形式，可用于在任务之间以及中断与任务之间传递消息。队列在 FreeRTOS 中具有以下关键特点： 队列默认采用 先进先出 FIFO 方式，也可以使用 xQueueSendToFront()实现 LIFO。FreeRT…
    阅读更多...
    【虚拟化】Docker Desktop 架构简介

    【虚拟化】Docker Desktop 架构简介

    在阅读前您需要了解 docker 架构：Docker architecture WSL 技术：什么是 WSL 2 1.Hyper-V backend 我们知道，Docker Desktop 最开始的架构的后端是采用的 Hyper-V。 Docker daemon (dockerd) 运行在一个 Linux distro (LinuxKit build) 中&…
    阅读更多...
    Unity光照之Halo组件

    Unity光照之Halo组件

    简介 Halo 组件 是一种用于在游戏中创建光晕效果的工具，主要用于模拟光源周围的发光区域（如太阳、灯泡等）或物体表面的光线反射扩散效果。 核心功能 1.光晕生成 Halo 组件会在光源或物体的周围生成一个圆形光晕，模拟光线在空气…
    阅读更多...
    Flink深入浅出之01：应用场景、基本架构、部署模式

    Flink深入浅出之01：应用场景、基本架构、部署模式

    Flink 1️⃣ 一 、知识要点 📖 1. Flink简介 Apache Flink — Stateful Computations over Data StreamsApache Flink 是一个分布式大数据处理引擎，可对有界数据流和无界数据流进行有状态的计算。Flink 能在所有常见集群环境中运行，并能以…
    阅读更多...
    2025年【高压电工】报名考试及高压电工考试总结

    2025年【高压电工】报名考试及高压电工考试总结

    随着电力行业的快速发展，高压电工成为确保电力系统安全稳定运行的重要一环。为了提高高压电工的专业技能和安全意识，“安全生产模拟考试一点通”平台特别整理了2025年高压电工报名考试的相关信息及考试总结，并提供了一套完整的题库&#xff0…
    阅读更多...
    网络HTTP

    网络HTTP

    HTTP Network Request Library A Retrofit-based HTTP network request encapsulation library that provides simple and easy-to-use API interfaces with complete network request functionality. 基于Retrofit的HTTP网络请求封装库，提供简单易用的API接口和完…
    阅读更多...
    os-copilot安装和使用体验测评

    os-copilot安装和使用体验测评

    简介： OS Copilot是阿里云基于大模型构建的Linux系统智能助手，支持自然语言问答、命令执行和系统运维调优。本文介绍其产品优势、功能及使用方法，并分享个人开发者在云服务器资源管理中的实际应用体验。通过-t/-f/管道功能，OS Cop…
    阅读更多...
    Python Flask框架学习汇编

    Python Flask框架学习汇编

    1、入门级： 《Python Flask Web 框架入门》 这篇博文条理清晰，由简入繁，案例丰富，分十五节详细讲解了Flask框架，强烈推荐！ 《python的简单web框架flask【附例子】》 讲解的特别清楚，每一步都…
    阅读更多...
    【HarmonyOS Next之旅】DevEco Studio使用指南(一)

    【HarmonyOS Next之旅】DevEco Studio使用指南(一)

    目录 1 -> 工具简介 1.1 -> 概述 1.2 -> HarmonyOS应用/服务开发流程 1.2.1 -> 开发准备 1.2.2 -> 开发应用/服务 1.2.3 -> 运行、调试和测试应用/服务 1.2.4 -> 发布应用/服务 2 -> 工程介绍 2.1 -> APP包结构 2.2 -> 切换工程视图 …
    阅读更多...
    Manus开源平替-开源通用智能体

    Manus开源平替-开源通用智能体

    原文链接:https://i68.ltd/notes/posts/250306-opensource-agi-agent/ OWL-比Manus还强的全能开源Agent OWL: Optimized Workforce Learning for General Multi-Agent Assistance in Real-World Task Automation，现实世界中执行自动化任务的通用多代理辅助优化学习…
    阅读更多...
    【3.2-3.8学习周报】

    【3.2-3.8学习周报】

    提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 摘要Abstract一、方法介绍1.任务适应性持续预训练（TACP）2.领域自适应连续预训练（DACP）3.ETS-DACP和ETA-DACP 二、实验…
    阅读更多...
    【Linux】用户和组

    【Linux】用户和组

    思考 使用useradd在Linux下面创建一个用户，默认情况下，会自动创建一个同名组，并且加入其中，那么是先创建用户呢？还是先创建组呢？ 很简单，我们实践一下不就知道了，如下所示&#xff…
    阅读更多...
    新编大学应用英语综合教程2 U校园全套参考答案

    新编大学应用英语综合教程2 U校园全套参考答案

    全套答案获取： 链接：https://pan.quark.cn/s/389618f53143
    阅读更多...
    SAP 顾问的五年职业规划

    SAP 顾问的五年职业规划

    SAP 顾问的职业发展受到技术进步、企业需求变化和全球经济环境的影响，因此制定长远规划充满挑战。面对 SAP 产品路线图的不确定性，如向 S/4HANA 和 Business Technology Platform (BTP) 的转变，顾问必须具备灵活性，以保持竞争力和…
    阅读更多...
    最新文章

    Copyright @ 2022~2023