当前位置： 首页 > news >正文

前端发起网络请求的几种常见方式（XMLHttpRequest、FetchApi、jQueryAjax、Axios）

news 2026/5/19 13:28:34

摘要

前端发起网络请求的几种常见方式包括：

XMLHttpRequest (XHR)： 这是最传统和最常见的方式之一。它允许客户端与服务器进行异步通信。XHR API 提供了一个在后台发送 HTTP 请求和接收响应的机制，使得页面能够在不刷新的情况下更新部分内容。

Fetch API： Fetch API 是一种新的 Web API，提供了一种更强大、更灵活的方式来发起网络请求。它使用 Promise对象，简化了对网络请求的处理，并且提供了更友好的 API。

jQuery Ajax： jQuery 是一个流行的 JavaScript 库，其中包含了简化 Ajax 调用的方法。通过 jQuery 的 Ajax 方法，可以方便地发送各种类型的 HTTP 请求，并处理响应。

Axios： Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js 环境。它提供了更简单的 API，并支持在浏览器中使用XMLHttpRequest 或在 Node.js 中使用 http 模块。在一些大型框架中会被使用，例如Vue.js。

示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover"><title>前端请求服务器的几种方式</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.min.js"></script><style>h2 {text-align: center;}#app {width: 500px;margin: 30px auto;}#ret {width: 500px;height: 100px;background: #272822;color: #fff;padding: 10px;font-size: 14px;}button {padding: 10px 15px;background: #39f;border: none;color: #fff;cursor: pointer;}</style>
</head>
<body><h2>前端请求服务器的几种方式</h2><div id="app"><!--XMLHttpRequest--><button onclick="XHR()">XMLHttpRequest</button><!--FetchApi--><button onclick="FetchApi()">FetchApi</button><!--jQueryAjax--><button onclick="jQueryAjax()">jQueryAjax</button><!--Axios--><button onclick="Axios()">Axios</button><!--请求结果--><p id="ret"></p></div><script>// XMLHttpRequestfunction XHR() {document.querySelector('#ret').innerHTML = 'XMLHttpRequest请求中...';// 创建 XMLHttpRequest 对象var xhr = new XMLHttpRequest();// 指定请求的方法和 URLxhr.open('GET', './getData.php?type=XMLHttpRequest', true); // true 表示异步请求// 注册事件处理程序，以便在请求的不同阶段获取相应的响应xhr.onreadystatechange = function() {if (xhr.readyState === XMLHttpRequest.DONE) { // 请求完成if (xhr.status === 200) {// 请求成功console.log(JSON.parse(xhr.responseText)); // 输出响应数据document.querySelector('#ret').innerHTML = xhr.responseText;} else {console.error('请求失败: ' + xhr.status); // 输出错误信息document.querySelector('#ret').innerHTML = '请求失败';}}};// 发送请求xhr.send();}// FetchApifunction FetchApi() {document.querySelector('#ret').innerHTML = 'FetchApi请求中...';// 使用 fetch() 函数创建一个请求对象fetch('./getData.php?type=FetchApi').then(function(response) {// 检查响应是否成功if (!response.ok) {throw new Error('请求失败: ' + response.status);}// 解析响应数据为 JSON 格式并返回return response.json();}).then(function(data) {// 处理响应数据console.log(data);document.querySelector('#ret').innerHTML = JSON.stringify(data);}).catch(function(error) {// 处理错误console.error('发生错误: ', error);document.querySelector('#ret').innerHTML = JSON.stringify(error);});}// jQuery Ajaxfunction jQueryAjax() {$.ajax({url: './getData.php?type=jQueryAjax',method: 'GET',dataType: 'json', // 响应数据类型beforeSend: function(xhr) {// 在发送请求之前执行的操作，比如设置请求头$('#ret').html('jQueryAjax请求中...')},success: function(response) {// 输出响应数据console.log(response);$('#ret').html(JSON.stringify(response))},error: function(xhr, status, error) {// 输出错误信息console.error('请求失败: ' + status); $('#ret').html('请求失败')}});}// Axiosfunction Axios() {document.querySelector('#ret').innerHTML = 'Axios请求中...';axios.get('./getData.php?type=Axios').then(function(response) {// 输出响应数据console.log(response.data);document.querySelector('#ret').innerHTML = JSON.stringify(response.data);}).catch(function(error) {// 输出错误信息console.error('请求失败:', error);document.querySelector('#ret').innerHTML = JSON.stringify(error);});}</script>
</body>
</html>

getData.php

<?phpheader("Content-type:application/json");sleep(1);echo json_encode(array('code' => 0,'msg' => $_GET['type'] . '请求成功'), JSON_UNESCAPED_UNICODE);?>

演示

https://demo.likeyunba.com/web_http/

在这里插入图片描述

作者

TANKING

相关文章：

前端发起网络请求的几种常见方式（XMLHttpRequest、FetchApi、jQueryAjax、Axios）

摘要 前端发起网络请求的几种常见方式包括&#xff1a; XMLHttpRequest (XHR)&#xff1a; 这是最传统和最常见的方式之一。它允许客户端与服务器进行异步通信。XHR API 提供了一个在后台发送 HTTP 请求和接收响应的机制&#xff0c;使得页面能够在不刷新的情况下更新部分内容…...

编程日记 2024/5/8 1:50:00

通过氧气退火增强β-Ga₂O₃二极管.中国科技大学和河北半导体研究所的研究人员在这一特定领域取得了最新重大进展

上图所示&#xff1a;&#xff08;a&#xff09;增加台面有助于提高β-Ga2O3肖特基势垒二极管的阻断电压&#xff08;b&#xff09;。 氧气退火和自对准台面终端使β-Ga2O3二极管进一步走向商业化。 虽然β-Ga2O3电力电子技术已经取得了长足的进步&#xff0c;但仍然存在挑战&…...

编程日记 2024/5/8 1:48:59

C语言猜数字游戏

用C语言实现猜数字游戏&#xff0c;电脑随机给出一个范围内的数字&#xff0c;用户在终端输入数字&#xff0c;去猜大小&#xff1b;对比数字&#xff0c;电脑给出提示偏大还是偏小&#xff1b;不断循环&#xff0c;直到正确 #include <stdio.h> #include <time.h>…...

编程日记 2024/5/8 1:46:58

笔记本连接不上远程桌面，笔记本无法连接远程桌面的可能原因及解决方法

在使用远程桌面功能时&#xff0c;笔记本无法成功连接的情况可能由多种原因引起。为了有效地解决这个问题&#xff0c;我们需要逐一排查这些可能的原因&#xff0c;并采取相应的解决措施。 首先&#xff0c;网络连接稳定性是远程桌面连接成功的关键。请确保笔记本和远程计算机之…...

编程日记 2024/5/8 1:45:57

Android 音视频播放器 Demo（一）—— 视频解码与渲染

本篇作为 Android 音视频实战系列的第二篇文章&#xff0c;主要介绍视频解码与渲染过程。本系列文章目录如下&#xff1a; Android 音视频基础知识 Android 音视频播放器 Demo&#xff08;一&#xff09;—— 视频解码与渲染 Android 音视频播放器 Demo&#xff08;二&#xff…...

编程日记 2024/5/8 1:44:56

Flutter笔记：Widgets Easier组件库（3）使用按钮组件

Flutter笔记 Widgets Easier组件库&#xff08;3&#xff09;&#xff1a;使用按钮组件 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite&#xff1a;http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddre…...

编程日记 2024/5/8 1:43:55

荷香堪筑梦，鸳鸯和月寻。（变相BFS搜索）

本题链接&#xff1a;登录—专业IT笔试面试备考平台_牛客网 题目&#xff1a; 样例&#xff1a; 输入 3 4 2 .... ***. ..a. 输出 yes 思路&#xff1a; 根据题意&#xff0c;这里 1 s 可以移动多次&#xff0c;我们将每次可以移动避开雪的的位置存储起来&#xff0c;判断当…...

编程日记 2024/5/8 1:42:54

智慧公厕建设，打造智慧城市基础设施新亮点

公共厕所是城市基础设施的重要组成部分&#xff0c;而智慧公厕的建设则是现代城市管理的创新之举。为了实现公厕的精细化管理和提供更便捷的服务&#xff0c;推进智慧公厕建设必须要实现技术融合、业务融合、数据融合的目标&#xff0c;跨越层级、地域、系统、部门和业务的限制…...

编程日记 2024/5/8 1:41:53

Kubernetes 教程：在 Containerd 容器中使用 GPU

原文链接：Kubernetes 教程：在 Containerd 容器中使用 GPU 云原生实验室本文介绍了如何在使用 Containerd 作为运行时的 Kubernetes 集群中使用 GPU 资源。https://fuckcloudnative.io/posts/add-nvidia-gpu-support-to-k8s-with-containerd/ 前两天闹得沸沸扬扬的事件不知道…...

编程日记 2024/5/8 1:40:52

LNMP部署wordpress

1.环境准备 总体架构介绍 序号类型名称外网地址内网地址软件02负载均衡服务器lb0110.0.0.5192.168.88.5nginx keepalived03负载均衡服务器lb0210.0.0.6192.168.88.6nginx keepalived04web服务器web0110.0.0.7192.168.88.7nginx05web服务器web0210.0.0.8192.168.88.8nginx06we…...

编程日记 2024/5/8 1:39:51

本地部署大模型ollama+docker+open WebUI/Lobe Chat

文章目录 大模型工具Ollama下载安装运行Spring Ai 代码测试加依赖配置写代码 ollama的web&Desktop搭建部署Open WebUI有两种方式Docker DesktopDocker部署Open WebUIDocker部署Lobe Chat可以配置OpenAI的key也可以配置ollama 大模型的选择 本篇基于windows环境下配置 大模型…...

编程日记 2024/5/8 1:38:50

qt学习篇---界面按键关联（信号和槽）

目录 1.qt基础 2.做一个界面 创建project UI界面设计 信号和槽 1.控件改名字 2.什么是信号和槽 3.怎么关联信号和槽 自动关联 手动关联 1.qt基础 qt可移植性强&#xff0c;不久会用到MCU。很有意义学习 2.做一个界面 创建project 不要中文路径 选择QWidget .pro文件…...

编程日记 2024/5/8 1:37:49

python Django 的内置权限系统或自定义模型来存储更复杂的角色和权限关系

在 Django 中，管理用户权限和角色通常涉及到使用 Django 的内置权限系统或自定义模型来存储更复杂的角色和权限关系。下面是一个基本的指南，说明如何在 Django 中为后台管理系统分配权限并将其保存在数据库中，同时结合 Vue.js 和 Element UI 作为前端框架。 后端（Django）…...

编程日记 2024/5/8 1:36:48

不上班，我靠这5份赚钱副业养活了自己

在这个快节奏的社会里&#xff0c;很多人都在为生活奔波忙碌。今天&#xff0c;就让我来跟大家分享一下我的“躺平”秘籍吧&#xff01; 这一个月来&#xff0c;我没有上班&#xff0c;但好在有副业养活自己。有时候&#xff0c;我真的觉得有一份自己喜欢的自媒体副业挺好的。…...

编程日记 2024/5/8 1:35:47

强一致性的皇冠：分布式事务模型的至高法则揭秘

关注微信公众号 “程序员小胖” 每日技术干货&#xff0c;第一时间送达&#xff01; 引言 分布式事务模型是分布式系统设计的核心&#xff0c;关键在于保证数据一致性和事务完整性&#xff0c;尤其强调强一致性。诸如2PC、3PC、Saga、TCC等模型与协议&#xff0c;应运而生以解…...

编程日记 2024/5/8 1:34:46

mac/windows下安装docker，minikube

1、安装docker Get Started | Docker 下载安装docker 就行 启动后&#xff0c;就可以正常操作docker了 使用docker -v 验证是否成功就行 2、安装minikube&#xff0c;是基于docker-desktop的 2.1、点击设置 2.2、选中安装&#xff0c;这个可能需要一点时间 这样安装后&…...

编程日记 2024/5/8 1:31:43

【爬虫】fake_useragent的使用、BeautifulSoup(find()和find_all())

1 fake_useragent 2 BeautifulSoup 3 Beautiful Soup库的find()和find_all() 1 fake_useragent fake_useragent是一个Python库&#xff0c;用于生成随机的用户代理字符串。 用户代理是在HTTP请求中发送给服务器的一种标识&#xff0c;它告诉服务器发送请求的客户端的类型、版本…...

编程日记 2024/5/8 1:30:42

ComfyUI中图像亮度/对比度/饱和度处理

用上面这个节点可以同时设置图片的亮度、对比度和饱和度。 【保姆级教程】一口气分享在ComfyUI中常用的30多种基本图像处理方式 更多好玩且实用AIGC工作流和节点 星球号&#xff1a;32767063 本期资料链接 往期学习资料 整理AI学习资料库...

编程日记 2024/5/8 1:29:41

基于FPGA的DDS波形发生器VHDL代码Quartus仿真

名称&#xff1a;基于FPGA的DDS波形发生器VHDL代码Quartus仿真&#xff08;文末获取&#xff09; 软件&#xff1a;Quartus 语言&#xff1a;VHDL 代码功能&#xff1a; DDS波形发生器VHDL 1、可以输出正弦波、方波、三角波 2、可以控制输出波形的频率 DDS波形发生器原理…...

编程日记 2024/5/8 1:27:39

C++语法｜可调用对象与function类型

文章目录 引入function的使用function类型的典型应用function类型的原理实现代码优化可变参的函数对象 引入 还记得C语言中的函数指针数组吗&#xff1f; 我们通过函数指针数组实现一个&#xff0c;图书管理系统的界面&#xff1a; #include <stdio.h> void doShowAllB…...

编程日记 2024/5/8 1:25:38

如何永久保存微信聊天记录？3分钟学会数据导出与智能分析终极指南

如何永久保存微信聊天记录&#xff1f;3分钟学会数据导出与智能分析终极指南 【免费下载链接】WeChatMsg 提取微信聊天记录&#xff0c;将其导出成HTML、Word、CSV文档永久保存&#xff0c;对聊天记录进行分析生成年度聊天报告 项目地址: https://gitcode.com/GitHub_Trendin…...

编程新知 2026/5/19 13:00:29

3分钟掌握ncmdump：网易云音乐NCM文件终极解密方案

3分钟掌握ncmdump&#xff1a;网易云音乐NCM文件终极解密方案 【免费下载链接】ncmdump 项目地址: https://gitcode.com/gh_mirrors/ncmd/ncmdump 还在为网易云音乐下载的NCM格式音乐无法在其他播放器使用而烦恼吗&#xff1f;ncmdump这款免费开源工具正是你的完美解决…...

编程新知 2026/5/19 12:19:02

Windows热键冲突终结者：3步精准定位占用进程的智能方案

Windows热键冲突终结者&#xff1a;3步精准定位占用进程的智能方案 【免费下载链接】hotkey-detective A small program for investigating stolen key combinations under Windows 7 and later. 项目地址: https://gitcode.com/gh_mirrors/ho/hotkey-detective 你是否曾…...

编程新知 2026/5/19 11:38:29

如何轻松备份微信聊天记录：WeChatMsg完全免费的数据守护方案

如何轻松备份微信聊天记录&#xff1a;WeChatMsg完全免费的数据守护方案 【免费下载链接】WeChatMsg 提取微信聊天记录&#xff0c;将其导出成HTML、Word、CSV文档永久保存&#xff0c;对聊天记录进行分析生成年度聊天报告 项目地址: https://gitcode.com/GitHub_Trending/we…...

编程新知 2026/5/19 11:15:55

对比直接使用厂商API体验Taotoken在路由与容灾上的差异

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 对比直接使用厂商API体验Taotoken在路由与容灾上的差异 1. 引言&#xff1a;一次意料之外的服务波动 在日常开发与业务运营中&…...

编程新知 2026/5/19 9:45:58

Windows Cleaner：免费开源的系统优化神器，彻底告别C盘爆红烦恼

Windows Cleaner&#xff1a;免费开源的系统优化神器&#xff0c;彻底告别C盘爆红烦恼 【免费下载链接】WindowsCleaner Windows Cleaner——专治C盘爆红及各种不服&#xff01; 项目地址: https://gitcode.com/gh_mirrors/wi/WindowsCleaner 你是否经常被Windows系统C盘…...

编程新知 2026/5/19 8:12:18

英雄联盟个性化改造神器：3分钟打造专属游戏身份

英雄联盟个性化改造神器&#xff1a;3分钟打造专属游戏身份 【免费下载链接】LeaguePrank 项目地址: https://gitcode.com/gh_mirrors/le/LeaguePrank 还在为千篇一律的英雄联盟个人资料感到乏味吗&#xff1f;想要在好友面前展示与众不同的游戏身份却苦于官方限制&…...

编程新知 2026/5/19 7:26:43

Arm Compiler 6.19嵌入式开发工具链解析

1. Arm Compiler for Embedded 6.19版本深度解析Arm Compiler for Embedded 6.19是Arm公司于2022年10月12日发布的嵌入式C/C编译工具链。作为一款专为裸机软件、固件和实时操作系统(RTOS)应用开发设计的工具链&#xff0c;它提供了对Arm架构最新特性的支持。需要注意的是&#…...

编程新知 2026/5/19 6:45:49

Godot实战（一）—— 用C#构建2D躲避游戏的核心机制

1. 环境准备与项目初始化 第一次打开Godot引擎时&#xff0c;那个简洁的界面可能会让你有点不知所措。别担心&#xff0c;我们一步步来。点击"New Project"按钮&#xff0c;给你的游戏项目起个名字&#xff0c;比如"DodgeTheCreeps"。建议专门创建一个空文…...

编程新知 2026/5/19 6:41:47

从零到一：FOFA搜索引擎实战语法精解与场景化应用

1. FOFA搜索引擎&#xff1a;网络空间测绘的"瑞士军刀" 第一次接触FOFA时&#xff0c;我正为一个企业客户做资产梳理。客户自己都说不清有多少对外暴露的服务器&#xff0c;传统扫描工具又慢又容易被防火墙拦截。同事扔给我一个FOFA搜索语句&#xff1a;"domain…...

编程新知 2026/5/19 6:20:28