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

news2025/1/10 23:27:15

摘要

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

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

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

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

Axios: Axios 是一个基于 PromiseHTTP 客户端,用于浏览器和 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>
        
        // XMLHttpRequest
        function XHR() {
            
            document.querySelector('#ret').innerHTML = 'XMLHttpRequest请求中...';
            
            // 创建 XMLHttpRequest 对象
            var xhr = new XMLHttpRequest();
            
            // 指定请求的方法和 URL
            xhr.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();
        }
        
        // FetchApi
        function 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 Ajax
        function 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('请求失败')
                }
            });
        }
        
        // Axios
        function 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

<?php
    
    header("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

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

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

相关文章

【YOLOv9改进[Conv]】使用基于Haar的小波变换Down_wt处理替换模型结构中的Conv和ADown 实践

目录 一 基于Haar的小波变换 二 使用基于Haar的小波变换Down_wt处理替换模型结构中的Conv和ADown 实践 1 整体修改 2 配置文件 3 训练 三 报错处理 一 基于Haar的小波变换 Haar小波是最简单的小波形式之一&#xff0c;具有易于计算和实现的优点。使用二维离散小波变换&a…

TCP重传,滑动窗口,流量控制,拥塞控制

TCP重传&#xff0c;滑动窗口&#xff0c;流量控制&#xff0c;拥塞控制 TCP重传机制&#xff1a; 超时重传快速重传SACKD-SACK 通过序列号与确认应答判断是否要重传 超时重传&#xff1a; 超过指定时间没有收到确认应答报文&#xff0c;就会重发该数据 触发超时重传的情况…

k8s 资源组版本支持列表

1 kubernetes的资源注册表 kube-apiserver组件启动后的第一件事情是将Kubernetes所支持的资源注册到Scheme资源注册表中,这样后面启动的逻辑才能够从Scheme资源注册表中拿到资源信息并启动和运行API服务。 kube-apiserver资源注册分为两步:第1步,初始化Scheme资源注册表;…

【论文笔记】Training language models to follow instructions with human feedback A部分

Training language models to follow instructions with human feedback A 部分 回顾一下第一代 GPT-1 &#xff1a; 设计思路是 “海量无标记文本进行无监督预训练少量有标签文本有监督微调” 范式&#xff1b;模型架构是基于 Transformer 的叠加解码器&#xff08;掩码自注意…

【百度Apollo】探索自动驾驶:百度Apollo视觉感知模块的实践与创新

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《linux深造日志》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 文章目录 引入一、百度Apollo视觉感知模块概述二、启动感知模块步骤一&#xff1a;进入 Docker 环境并启动 Dreamview步骤二…

请编写函数fun,该函数的功能是:统计各年龄段的人数。N个年龄通过调用随机函数获得,并放在主函数的age数组中;

本文收录于专栏:算法之翼 https://blog.csdn.net/weixin_52908342/category_10943144.html 订阅后本专栏全部文章可见。 本文含有题目的题干、解题思路、解题思路、解题代码、代码解析。本文分别包含C语言、C++、Java、Python四种语言的解法完整代码和详细的解析。 题干 请编…

我开始接单/兼职/搞副业/建设个人社区,为自己谋后路了。

我开始接单/兼职/搞副业/建设个人社区&#xff0c;为自己谋后路了。 简述 大家好&#xff0c;我是小荣&#xff0c;一个前端开发程序员。我最近开始在业余时间接私单了&#xff0c;也在想一些能够带来成长&#xff0c;收入的副业&#xff0c;主要也是为了自己谋后路&#xff…

ctfshow——SQL注入

文章目录 SQL注入基本流程普通SQL注入布尔盲注时间盲注报错注入——extractvalue()报错注入——updataxml()Sqlmap的用法 web 171——正常联合查询web 172——查看源代码、联合查询web 173——查看源代码、联合查询web 174——布尔盲注web 176web 177——过滤空格web 178——过…

【算法刷题 | 贪心算法09】4.30(单调递增的数字)

文章目录 16.单调递增的数字16.1题目16.2解法&#xff1a;贪心16.2.1贪心思路16.2.2代码实现 16.单调递增的数字 16.1题目 当且仅当每个相邻位数上的数字 x 和 y 满足 x < y 时&#xff0c;我们称这个整数是单调递增的。 给定一个整数 n &#xff0c;返回 小于或等于 n 的…

jenkins转载文本

基于Docker容器DevOps应用方案 企业业务代码发布系统 一、企业业务代码发布方式 1.1 传统方式 以物理机或虚拟机为颗粒度部署部署环境比较复杂&#xff0c;需要有先进的自动化运维手段出现问题后重新部署成本大&#xff0c;一般采用集群方式部署部署后以静态方式展现 1.2 容…

ubuntu部署sonar与windows下使用sonar-scanner

ubuntu部署sonar与windows下使用sonar-scanner sonar部署java安装mysql安装配置sonarqube 插件安装sonar-scanner使用简单使用 sonar部署 使用的是sonarqube-7.5&#xff0c;支持的java环境是jdk8&#xff0c;且MySQL版本 >5.6 && <8.0 java安装 打开终端&…

【初识Redis】

初识Redis Redis&#xff08;Remote Dictionary Server&#xff09;是一个开源的内存数据库&#xff0c;它提供了一个高性能的键值存储系统&#xff0c;并且支持多种数据结构&#xff0c;包括字符串、哈希、列表、集合和有序集合等。Redis的特点包括&#xff1a; 内存存储&…

Apache DolphinScheduler支持Flink吗?

随着大数据技术的快速发展&#xff0c;很多企业开始将Flink引入到生产环境中&#xff0c;以满足日益复杂的数据处理需求。而作为一款企业级的数据调度平台&#xff0c;Apache DolphinScheduler也跟上了时代步伐&#xff0c;推出了对Flink任务类型的支持。 Flink是一个开源的分…

2023年蓝桥杯C++A组第三题:更小的数(双指针解法)

题目描述 小蓝有一个长度均为 n 且仅由数字字符 0 ∼ 9 组成的字符串&#xff0c;下标从 0 到 n − 1&#xff0c;你可以将其视作是一个具有 n 位的十进制数字 num&#xff0c;小蓝可以从 num 中选出一段连续的子串并将子串进行反转&#xff0c;最多反转一次。小蓝想要将选出的…

罗宾斯《管理学》第13版/教材讲解/考研真题视频课程/网课

本课程是罗宾斯《管理学》&#xff08;第13版&#xff09;精讲班&#xff0c;为了帮助参加研究生招生考试指定考研参考书目为罗宾斯《管理学》&#xff08;第13版&#xff09;的考生复习专业课&#xff0c;我们根据教材和名校考研真题的命题规律精心讲解教材章节内容。 序号名…

神经网络基础(Neural net foundations)

Today we’ll be learning about the mathematical foundations of deep learning: Stochastic gradient descent (SGD), and the flexibility of linear functions layered with non-linear activation functions. We’ll be focussing particularly on a popular combination…

掌握JavaScript面向对象编程核心密码:深入解析JavaScript面向对象机制对象基础、原型模式与继承策略全面指南,高效创建高质量、可维护代码

ECMAScript&#xff08;简称ES&#xff0c;是JavaScript的标准规范&#xff09;支持面向对象编程&#xff0c;通过构造函数模拟类&#xff0c;原型链实现继承&#xff0c;以及ES6引入的class语法糖简化面向对象开发。对象可通过构造函数创建&#xff0c;使用原型链共享方法和属…

Outlook邮箱如何撤回一封已发送邮件?~网页版上

点【已发送邮件】 双击要撤回的已发送的那个邮件 点【…】 点击【撤回消息】 点【确定】 结束&#xff01;

Scott Brinker:16年后,当前的(而非未来的)Martech已经出现,但分布不均。

杜克大学、德勤和美国营销协会共同开展的名为「CMO调查」 的两年一度的项目&#xff0c;是营销行业内的一项重要研究项目&#xff0c;已经持续了十多年。该调查的组织工作做得非常好&#xff0c;每次发布我都迫不及待地想要阅读。 我特别兴奋地阅读了刚刚发布的2024年春季版&a…

Now in Android 4月份更新速览

Now in Android 4月份更新速览 1. 引言 Android 15 Beta的发布标志着Android生态系统的新一轮更新。这次更新旨在提升用户体验和开发效率&#xff0c;让我们一起来了解其中的重要内容。 2. Android 15 Beta介绍 Android 15 Beta带来了一系列新功能&#xff0c;其中包括默认边…