前端请求XMLHttpRequest详解

2024-06-18 02:36

本文主要是介绍前端请求XMLHttpRequest详解,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章导读:AI 辅助学习前端,包含入门、进阶、高级部分前端系列内容,当前是 javascript 的部分,瑶琴会持续更新,适合零基础的朋友,已有前端工作经验的可以不看,也可以当作基础知识回顾。

这篇文章瑶琴带大家学习浏览器中非常重要的一个api:XMLHttpRequest

1.XMLHttpRequest

XMLHttpRequest 是一个浏览器API,用于在客户端和服务器之间传输数据。它是AJAX(Asynchronous JavaScript and XML,异步JavaScript和XML)的基础,允许网页在不重新加载的情况下与服务器交换数据,从而可以实现创建快速动态的网页。

使用场景:

1.数据加载:在不刷新页面的情况下,从服务器获取数据并更新页面的某些部分。

2.表单提交:异步提交表单数据,无需刷新页面。

3.文件上传:上传文件到服务器。

4.跨域请求:通过设置HTTP头部,可以进行跨域通信。

示例:

// 创建一个新的 XMLHttpRequest 对象 
var xhr = new XMLHttpRequest(); // 配置请求类型、URL 以及是否异步处理 
xhr.open('GET', 'https://api.example.com/data', true); // 设置请求成功后的回调函数 
xhr.onload = function() { 
if (xhr.status >= 200 && xhr.status < 300) { 
// 解析返回的 JSON 数据 var data = JSON.parse(xhr.responseText); console.log(data); } else { // 处理错误情况 console.error('Request failed'); } 
}; // 发送请求 
xhr.send();

再来了解下fetch,fetch 是 XMLHttpRequest 的现代替代品,它是一个更简洁、功能更强大的API。fetch 返回一个 Promise,使得异步数据获取和错误处理更加方便。

3.fetch

函数可以在不同条件下返回不同的值,但只有第一个执行的 return 语句会生效。一旦遇到 return,函数就会结束执行。

使用场景:

1.数据获取:与 XMLHttpRequest 类似,用于获取数据。

2.流式处理:可以处理服务器发送的响应流。

3.自定义请求头:允许设置自定义请求头。

4.响应处理:可以方便地处理不同类型的响应(如JSON、blob、text等)。

示例:

// 使用 fetch 获取数据
fetch('https://api.example.com/data')  .then(response => {       // 检查响应状态是否成功        
if (!response.ok) {              throw new Error('Network response was not ok');       }        
// 解析JSON响应体       return response.json();  
}).then(data => {        // 使用数据        console.log(data);  
}).catch(error => {        // 处理错误        console.error('There has been a problem with your fetch operation:', error);  
});。

你可以将 XMLHttpRequest 想象成一辆老旧的汽车,它能够完成从一个地方到另一个地方(客户端到服务器)的旅行,但是操作起来比较复杂,需要手动控制每一个步骤。

而 fetch 则像是一辆现代化的自动驾驶汽车,它也能完成同样的旅行,但是更加智能和简便,你只需要告诉它目的地(URL),它就会自动规划路线,处理行驶中的各种情况,并且能够以多种方式(比如直接在车上看电影、听音乐)享受旅途。

随着前端技术的发展,fetch 逐渐成为主流,并且也出现很多请求库,比如axios。

但是在一些老旧的项目或者需要支持较老浏览器的情况下,XMLHttpRequest 仍然有其使用场景。对于前端初学者来说,理解这两个API的基本概念和使用方法是非常重要的。

下面再简单介绍下axios,它是现代前端开发中必不可少的网络请求库。中文文档:http://www.axios-js.com/

4. axios

axios 是一个基于 Promise 的 HTTP 客户端,用于浏览器和 Node.js 环境。它被设计为能够处理所有HTTP请求,无论是简单的GET请求还是复杂的请求,如上传文件或处理JSON响应。axios 的目标是提供一种简单、统一且可扩展的API。

主要特点:

1.基于 Promise:axios 的所有请求返回Promises,这使得你可以使用.then()和.catch()来处理成功的响应或捕获错误。

2.跨平台:可以在浏览器端和Node.js环境中使用。

3.简单易用:提供了简洁的API,使得发送HTTP请求变得简单。

4.请求和响应拦截器:允许你拦截请求或响应,以便在它们到达then或catch之前进行处理。

5.转换请求和响应数据:允许你转换发送到服务器之前的数据,以及从服务器接收到的数据。

6.取消请求:支持取消请求,可以用于防止悬挂请求。

7.JSON:自动转换JSON数据。

8.CORS:支持跨源资源共享(CORS)。

对于初学者来说,需要先从原生的XMLHttp请求开始,这是前端AJAX的基础。对于后期使用到的诸如axios的库才更容易理解。

希望今天的内容对初学前端的朋友有所帮助。也希望每一个初学者都能成为一个优秀的前端开发工程师,加油。

最后啰嗦一句,好记性不如烂笔头,希望大家在学习的过程中养成做笔记的习惯,形成自己的知识体系。

这篇关于前端请求XMLHttpRequest详解的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1071068

相关文章

Vue3 的 shallowRef 和 shallowReactive:优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉,那么对 shallowRef 和 shallowReactive 是否了解呢? 在编程和数据结构中,“shallow”(浅层)通常指对数据结构的最外层进行操作,而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素,而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层(Shallow) 定义

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明(认真看哦) AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证,则会调用 #attemptAuthentica

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

【 html+css 绚丽Loading 】000046 三才归元阵

前言:哈喽,大家好,今天给大家分享html+css 绚丽Loading!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介:💡2.外观描述:💡3.使用方式:💡4.战斗方式:💡5.提升:💡6.传说: 📚三、源代码,上代码,可以直接复制使用🎥效果🗂️目录✍️

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

OpenHarmony鸿蒙开发( Beta5.0)无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息,即可快速实现设备配网,是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递,利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力,实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后,即可发送相关配网数据。同时还支持与常规Sof

6.1.数据结构-c/c++堆详解下篇(堆排序,TopK问题)

上篇:6.1.数据结构-c/c++模拟实现堆上篇(向下,上调整算法,建堆,增删数据)-CSDN博客 本章重点 1.使用堆来完成堆排序 2.使用堆解决TopK问题 目录 一.堆排序 1.1 思路 1.2 代码 1.3 简单测试 二.TopK问题 2.1 思路(求最小): 2.2 C语言代码(手写堆) 2.3 C++代码(使用优先级队列 priority_queue)

计算机毕业设计 大学志愿填报系统 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试

🍊作者:计算机编程-吉哥 🍊简介:专业从事JavaWeb程序开发,微信小程序开发,定制化项目、 源码、代码讲解、文档撰写、ppt制作。做自己喜欢的事,生活就是快乐的。 🍊心愿:点赞 👍 收藏 ⭐评论 📝 🍅 文末获取源码联系 👇🏻 精彩专栏推荐订阅 👇🏻 不然下次找不到哟~Java毕业设计项目~热门选题推荐《1000套》 目录 1.技术选型 2.开发工具 3.功能

Vue3项目开发——新闻发布管理系统(六)

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后,系统就进入了首页。接下来,也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分,左侧为系统的菜单栏,右侧

K8S(Kubernetes)开源的容器编排平台安装步骤详解

K8S(Kubernetes)是一个开源的容器编排平台,用于自动化部署、扩展和管理容器化应用程序。以下是K8S容器编排平台的安装步骤、使用方式及特点的概述: 安装步骤: 安装Docker:K8S需要基于Docker来运行容器化应用程序。首先要在所有节点上安装Docker引擎。 安装Kubernetes Master:在集群中选择一台主机作为Master节点,安装K8S的控制平面组件,如AP