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

摘要

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

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>// 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

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

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

相关文章

【分享】如何将word格式文档转化为PDF格式

在日常的办公和学习中&#xff0c;我们经常需要将Word文档转换为PDF格式。PDF作为一种通用的文件格式&#xff0c;具有跨平台、易读性高等优点&#xff0c;因此在许多场合下都更为适用。那么&#xff0c;如何实现Word转PDF呢&#xff1f;本文将介绍几种常用的方法&#xff0c;帮…

光伏储能是什么意思?有什么好处?

随着全球能源需求的持续增长和对环保要求的不断提高&#xff0c;新能源技术的发展已成为全球的热门话题。光伏储能作为其中的一项重要技术&#xff0c;正在逐渐受到人们的关注。那么&#xff0c;光伏储能是什么意思&#xff1f;它又有哪些好处呢&#xff1f; 一、光伏储能的定义…

MongoDB聚合运算符:$substrCP

MongoDB聚合运算符&#xff1a;$substrCP 文章目录 MongoDB聚合运算符&#xff1a;$substrCP语法参数字段 使用举例单字节字符集单字节和多字节字符集 $substrCP聚合运算符返回字符串的子串&#xff0c;子串是从指定的UTF-8代码点索引位置开始并包含指定数量的字符&#xff0c;…

『FPGA通信接口』DDR(3)DDR3颗粒读写测试

文章目录 前言1.配套工程简介2.测试内容与策略3. 测试程序分析4.程序结果分析5.一个IP控制两颗DDR36.传送门 前言 以四颗MT41K512M16HA-125AIT颗粒为例&#xff0c;介绍如何在一块新制板卡上做关于DDR3的器件测试。前面两篇介绍了什么是DDR&#xff0c;并介绍了xilinx给出的FPG…

神经网络反向传播算法

今天我们来看一下神经网络中的反向传播算法&#xff0c;之前介绍了梯度下降与正向传播~ 神经网络的反向传播 专栏&#xff1a;&#x1f48e;实战PyTorch&#x1f48e; 反向传播算法&#xff08;Back Propagation&#xff0c;简称BP&#xff09;是一种用于训练神经网络的算…

【限流】基于springboot(拦截器) + redis(执行lua脚本)实现注解限流

实现了滑动窗口&#xff0c;固定窗口&#xff0c;令牌桶&#xff0c;漏桶四种限流算法&#xff0c;并且支持各种扩展和修改&#xff0c;源码简单易上手。 Gitee&#xff1a;https://gitee.com/sir-tree/rate-limiter-spring-boot-starter 一、令牌桶算法—入桶量限制 在客户端…

品牌百度百科词条需要什么资料?

品牌百度百科词条是一个品牌的数字化名片&#xff0c;更是品牌历史、文化、实力的全面展现。 作为一个相当拿得出手的镀金名片&#xff0c;品牌百度百科词条创建需要什么资料&#xff0c;今天伯乐网络传媒就来给大家讲解一下。 一、品牌基本信息&#xff1a;品牌身份的明确 品…

【漏洞复现】科达 MTS转码服务器 任意文件读取漏洞

0x01 产品简介 科达 MTS转码服务器是一款专业的视频转码设备&#xff0c;采用了高性能的硬件配置和先进的转码技术&#xff0c;能够实现高效、高质量的视频转码。 0x02 漏洞概述 科达 MTS转码服务器存在任意文件读取漏洞&#xff0c;攻击可以通过该漏洞读取服务器任意敏感信…

FSD自动驾驶泛谈

特斯拉的FSD&#xff08;Full-Self Driving&#xff0c;全自动驾驶&#xff09;系统是特斯拉公司研发的一套完全自动驾驶系统。旨在最终实现车辆在多种驾驶环境下无需人类干预的自动驾驶能力。以下是对FSD系统的详细探讨&#xff1a; 系统概述 FSD是特斯拉的自动驾驶技术&…

宠物领养|基于SprinBoot+vue的宠物领养管理系统(源码+数据库+文档)

宠物领养目录 基于Spring Boot的宠物领养系统的设计与实现 一、前言 二、系统设计 三、系统功能设计 1前台 1.1 宠物领养 1.2 宠物认领 1.3 教学视频 2后台 2.1宠物领养管理 2.2 宠物领养审核管理 2.3 宠物认领管理 2.4 宠物认领审核管理 2.5 教学视频管理 四、…

英语学习笔记--发音-元音和辅音

以下所有内容来自“AI豆包”。 需要注意的是&#xff0c;以下发音类似仅为帮助你理解的中文发音示例&#xff0c;与英语元音的实际发音可能存在一定差异。如果你想更准确地学习英语元音的发音&#xff0c;建议你多听、多读、多模仿英语原声材料&#xff0c;并寻求专业英语教师…

零基础自学前端到达到什么水平才能找工作?

零基础自学前端到达到什么水平才能找工作&#xff1f; 零基础自学前端到达到什么水平才能找工作&#xff1f;从这个字眼的表面上来回答这个问题&#xff0c;但是是前端水平越高越好咯。前端技术人才只有不断通过学习、项目的事件来不断充实提高自己的技术&#xff0c;随之而来&…

【Jenkins】持续集成与交付 (四):修改Jenkins插件下载地址、汉化

🟣【Jenkins】持续集成与交付 (四):修改Jenkins插件下载地址、汉化 一、修改Jenkins插件下载地址二、汉化Jenkins三、关于Jenkins💖The Begin💖点点关注,收藏不迷路💖 一、修改Jenkins插件下载地址 由于Jenkins官方插件地址下载速度较慢,我们可以通过修改下载地址…

Jupyter 容器环境: Debian 11离线部署SSH Server总结

在基于continuumio/anaconda3镜像搭建的jupyter环境中,想在pycharm中进行远程debug代码,但容器中没有部署ssh server导致无法进行。 本文讲述如何在anaconda3容器中安装ssh server 安装步骤 修改云源 echo "deb https://mirrors.tuna.tsinghua.edu.cn/debian/ bulls…

Unity中WWWForm与 JsonUtility.ToJson区别

在Unity中&#xff0c;WWWForm 和 JsonUtility.ToJson 是两个用于处理网络请求中数据的工具&#xff0c;但它们的功能和用途有着显著的区别。 WWWForm WWWForm 是Unity早期版本中用于构建HTTP表单数据的类。它主要用于WWW类的POST请求&#xff0c;允许你添加表单字段&#xf…

6、FreeCAD的设计

一、FreeCAD的模块化设计&#xff08;插件系统&#xff09; 模块化设计是成功的软件架构的关键设计原则。FreeCAD采用了与Salome平台相似的模块化结构&#xff0c;后者是一个开源的CAE平台&#xff0c;包含几何建模、网格划分、FEM和CFD求解器模块。FreeCAD拥有生成新模块的基…

vue2迁移到vue3,v-model的调整

项目从vue2迁移到vue3&#xff0c;v-model不能再使用了&#xff0c;需要如何调整&#xff1f; 下面只提示变化最小的迁移&#xff0c;不赘述vue2和vue3中的常规写法。 vue2迁移到vue3&#xff0c;往往不想去调整之前的代码&#xff0c;以下就使用改动较小的方案进行调整。 I…

Vue3 中setup模式下component标签 is属性动态绑定组件空白显示问题

先看官网说明&#xff1a; <!-- 组件会在 currentTabComponent 改变时改变 --> <component v-bind:is"currentTabComponent"></component>在上述示例中&#xff0c;currentTabComponent 可以包括 已注册组件的名字&#xff0c;或 一个组件的选项…

美国洛杉矶服务器托管需要了解什么?

美国洛杉矶拥有多个数据中心提供服务器托管服务&#xff0c;这些服务通常包括弹性云服务器、裸金属服务器等。以下是一些关于美国洛杉矶服务器托管的详细信息&#xff0c;rak部落小编为您整理发布。 1. **数据中心分布**&#xff1a;在洛杉矶有多处数据中心&#xff0c;它们提供…

CVPR 小样本土地覆盖制图 张洪艳教授团队获挑战赛冠军

提出了一个广义的基于少镜头分割的框架&#xff0c;以更新高分辨率土地覆盖制图中的新类&#xff0c;分为三个部分:(a)数据预处理:对基础训练集和新类的少镜头支持集进行分析和扩充;(b)混合分割结构:将多基学习器和改进的投影到正交原型(POP)网络相结合&#xff0c;增强基类识别…