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

XMLHttpRequest介绍

news 文章来源：https://blog.csdn.net/qq_33697094/article/details/132980250 2024/11/7 12:45:54

目录

  • 一、介绍
    • 1.创建 XMLHttpRequest
    • 2.初始化
    • 3.发送请求
    • 4.获取响应
    • 5.响应类型
  • 二、发送GET请求示例
  • 三、发送POST请求示例
  • 四、发送POST请求下载文件示例
  • 五、发送POST请求上传文件示例

一、介绍

1.创建 XMLHttpRequest

let xhr = new XMLHttpRequest();

2.初始化

xhr.open(method, URL, [async, user, password])

使用 open 方法进行一些初始化配置，method 和 URL 是必传的，其余的是可选的。

参数说明：

method —— HTTP 方法。通常是 “GET” 或 “POST”，小写也可。
URL —— 要请求的 URL，通常是一个字符串，也可以是 URL 对象。
async —— 是否同步。如果不传默认为true，如果显式地设置为 false，那么请求将会以同步的方式处理。
user，password —— HTTP 基本身份验证（如果需要的话）的登录名和密码。

3.发送请求

xhr.send([body])

使用 send 方法就会建立连接，发送请求。

参数说明：

body 是可选的，是 POST 请求方式的请求体。
即如果你上面的 xhr.open 里 method 是 使用的是 GET 请求 ，那么 body 参数是不需要的 ；
如果你上面的 xhr.open 里 method 是 使用的是 POST 请求，那么请求体就是 body 。

4.获取响应

下面这三个事件是最常用的：

  • load —— 当请求完成（即使 HTTP 状态为 400 或 500 等），并且响应已完全下载。
  • error —— 当无法发出请求，例如网络中断或者无效的 URL。
  • progress —— 在下载响应期间定期触发，报告已经下载了多少。
xhr.onload = function() { //请求正常发出时alert(`状态码: ${xhr.status} 结果： ${xhr.response}`);
};xhr.onerror = function() { // 仅在根本无法发出请求时触发alert(`网络错误`);
};xhr.onprogress = function(event) { // 定期触发，一般用于下载文件之类的返回下载进度// event.loaded —— 已经下载了多少字节// event.lengthComputable = true，当服务器发送了 Content-Length header 时// event.total —— 总字节数（如果 lengthComputable 为 true）alert(`总字节数： ${event.total} 已下载字节数： ${event.loaded} `);
};

5.响应类型

我们可以使用 xhr.responseType 属性来设置响应格式：

  • “”（默认）—— 响应格式为字符串
  • “text” —— 响应格式为字符串
  • “arraybuffer” —— 响应格式为 ArrayBuffer（对于二进制数据，请参见 ArrayBuffer，二进制数组）
  • “blob” —— 响应格式为 Blob（对于二进制数据，请参见 Blob），即文件数据
  • “document” —— 响应格式为 XML document（可以使用 XPath 和其他 XML 方法）或 HTML document（基于接收数据的 MIME 类型）
  • “json” —— 响应格式为 JSON（自动解析）
let xhr = new XMLHttpRequest();xhr.open('GET', '/article/xmlhttprequest/example/json');xhr.responseType = 'json';xhr.send();// 响应为 {"message": "Hello, world!"}
xhr.onload = function() {let responseObj = xhr.response;alert(responseObj.message); // Hello, world!
};

注意：

在旧的脚本中，你可能会看到 xhr.responseText，甚至会看到 xhr.responseXML 属性。

它们是由于历史原因而存在的，以获取字符串或 XML 文档。如今，我们应该在 xhr.responseType 中设置格式，然后就能获取如上所示的 xhr.response 了。

二、发送GET请求示例

let xhr = new XMLHttpRequest();
xhr.open("GET", "http://localhost:8081/apiList/v1/worldAddressAnalysis?country=中国");
xhr.send();//请求正常发出时
xhr.onload = function () { alert(`状态码: ${xhr.status} 结果： ${xhr.response}`);
};// 仅在根本无法发出请求时触发
xhr.onerror = function () { alert(`网络错误`);
};

三、发送POST请求示例

let xhr = new XMLHttpRequest();
xhr.open("POST", "http://localhost:8081/apiList/v1/calculator");
xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');//post 请求体参数
let param = {calculatorStr: "8*8-4"};
xhr.send(JSON.stringify(param));//请求正常发出时
xhr.onload = function () { alert(`状态码: ${xhr.status} 结果： ${xhr.response}`);
};// 仅在根本无法发出请求时触发
xhr.onerror = function () { alert(`网络错误`);
};

四、发送POST请求下载文件示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title>
</head><body><button id="btn">下载文件</button><script>let btn = document.querySelector("#btn");btn.addEventListener("click", () => {let xhr = new XMLHttpRequest();xhr.open("POST", "http://localhost:8081/apiList/v1/downloadExcel");//设置请求头和响应类型xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8"); xhr.responseType = 'blob';//设置请求体参数let param = { "fileName": "测试", "tableHeader": ["年级", "班级", "班主任", "男生人数", "女生人数", "语文平均分"] };xhr.send(JSON.stringify(param));//请求正常发出时xhr.onload = function () { if (xhr.status === 200) {// 获取文件blob数据并保存saveAs(xhr.response, "download.xlsx");}};// 仅在根本无法发出请求时触发xhr.onerror = function () { alert(`网络错误`);};// 定期触发 查看下载进度xhr.onprogress = function (event) { alert(`总字节数： ${event.total} 已下载字节数： ${event.loaded} `);};});function saveAs(data, name) {var urlObject = window.URL || window.webkitURL || window;var export_blob = new Blob([data]);var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a')save_link.href = urlObject.createObjectURL(export_blob);save_link.download = name;save_link.click();}</script>
</body></html>

五、发送POST请求上传文件示例

假设我 springboot 上传文件的接口如下:

    @ApiOperation("文件上传到jar包所在服务器")@PostMapping(value = "/v1/fileSelfUpload1", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)public JSONObject fileSelfUpload1(@RequestParam String filePath, @RequestParam(value = "file", required = true) MultipartFile file) {return userConsumer.fileSelfUpload(filePath, file);}

使用 XMLHttpRequest 上传文件示例如下：

<!DOCTYPE html>
<html lang="en-us"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Shopping list example</title><style>li {margin-bottom: 10px;}li button {font-size: 8px;margin-left: 20px;color: #666;}</style>
</head><body><div class="container"><input type="file" name="doc" id="doc"><button type="submit" id="submit">提交</button></div><script>var doc = document.querySelector('#doc')var subbtn = document.querySelector('#submit')subbtn.addEventListener('click', function (e) {// 获取上传的文件,数组let filedata = doc.files//先判断是否已经上传文件if (filedata.length <= 0) {return alert('请上传文件')}//通过FormData可以获取表单数据，也可以通过append添加数据，最后把FormData实例对象直接  上传发送请求let fd = new FormData()fd.append('file', filedata[0])fd.append('filePath', '/user/save/')const xhr = new XMLHttpRequest()xhr.open('POST', 'http://localhost:8081/apiList/v1/fileSelfUpload1')xhr.send(fd)xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {console.log('上传成功');}}})</script>
</body></html>

参考：

XMLHttpRequest

XMLHttpRequest api

相关文章：

XMLHttpRequest介绍

目录 一、介绍1.创建 XMLHttpRequest2.初始化3.发送请求4.获取响应5.响应类型 二、发送GET请求示例三、发送POST请求示例四、发送POST请求下载文件示例五、发送POST请求上传文件示例 一、介绍 1.创建 XMLHttpRequest let xhr new XMLHttpRequest();2.初始化 xhr.open(metho…...

编程日记 2023/9/19 10:21:14

阿里云无影云电脑和传统PC有什么区别？

阿里云无影云电脑和传统电脑PC有什么区别&#xff1f;区别大了&#xff0c;无影云电脑是云端的桌面服务&#xff0c;传统PC是本地的硬件计算机&#xff0c;无影云电脑的数据是保存在云端&#xff0c;本地传统PC的数据是保存在本地客户端&#xff0c;阿里云百科分享阿里云无影云…...

编程日记 2023/9/19 10:19:12

基于matlab实现的船舶横摇运动仿真程序

完整程序&#xff1a; clc clear syms w we; w0.4:0.05:1.6;mu90;v6;%kb1;kt1;%航速6m/s&#xff0c;航向90度&#xff0c;即横浪&#xff0c;cos(90)0 T3;B10;Sw0.785;%船宽10米&#xff0c;吃水3米,水线面系数假设为0.785 weww.^2.*v/9.8; for i1:24 delta_we(i)we(i1)-…...

编程日记 2023/9/19 10:14:07

Java手写二叉索引树和二叉索引树应用拓展案例

Java手写二叉索引树和二叉索引树应用拓展案例 1. 算法思维导图 以下为二叉索引树的实现原理的思维导图&#xff0c;使用Mermanid代码表示&#xff1a; #mermaid-svg-raMRIu7t3H33MKh1 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#…...

编程日记 2023/9/19 10:12:05

大数据知识点之大数据5V特征

大数据的特征可以浓缩为五个英文单词&#xff0c;Volume(大量&#xff09;、Variety(多样性&#xff09;、Velocity(速度&#xff09;、Value(价值&#xff09;、Veracity(准确性&#xff09;。因为是5个特征都是以“V”开头的英文单词&#xff0c;又叫大数据5V特征。 概述&…...

编程日记 2023/9/19 10:11:04

Java的Socket通信的断网重连的正确写法

Java的Socket通信的断网重连的正确写法 Socket通信的断网重连介绍客户端与服务端源码演示截图本地演示服务器演示演示截图 总结 Socket通信的断网重连介绍 针对于已经建立通信的客户端与服务器&#xff0c;当客户端与服务器因为网络问题导致网络不通而断开连接了或者由于服务器…...

编程日记 2023/9/19 10:10:03

Rocketmq--消息发送和接收演示

使用Java代码来演示消息的发送和接收 <dependency><groupId>org.apache.rocketmq</groupId><artifactId>rocketmq-spring-boot-starter</artifactId><version>2.0.2</version> </dependency> 1 发送消息 消息发送步骤: 创建…...

编程日记 2023/9/19 10:09:02

ArcGIS Pro将SHP文件转CAD并保留图层名称

相信大家应该都使用过ArcGIS将SHP文件转CAD格式&#xff0c;转换过后所有的要素都在一个图层内&#xff0c;那么有没有办法将SHP文件某个字段的值作为CAD的图层名字呢&#xff0c;答案是肯定的&#xff0c;这里就为大家介绍一下ArcGIS Pro转CAD文件并且保留图层名称的方法&…...

编程日记 2023/9/19 10:05:59

GEE：使用for循环合成时间序列影像

作者：CSDN @ _养乐多_ 在本博客中，我们将介绍如何使用Google Earth Engine创建一个时间序列图像集合，以便进行时间序列分析或生成动态图像。 文章目录 一、核心代码二、代码解释三、示例代码链接一、核心代码 // 创建一个空的 image 图像集合 var imagelist = ee.List([])…...

编程日记 2023/9/19 10:04:59

flink1.13.2版本的对应的hive的Hcatalog的使用记录

依赖版本要求<hive.version>3.1.2</hive.version><flink.version>1.13.2</flink.version><hadoop.version>3.3.2</hadoop.version><scala.binary.version...

编程日记 2023/9/19 10:02:57

STM32 ADC介绍和应用

目录 1.ADC是什么&#xff1f; 2.ADC的性能指标 3.ADC特性 4.ADC通道 5.ADC转换顺序 6.ADC触发方式 7.ADC转化时间 8.ADC转化模式 扫描模式 单次转换/连续转换 9.ADC实验 使用ADC读取烟雾传感器的值 代码实现思路&#xff1a; 1.ADC是什么&#xff1f; 全称&#…...

编程日记 2023/9/19 9:59:54

vue项目打包_以生产环境prod模式打包_vue-cli-service 不是内部或外部命令,也不是可运行的程序---vue工作笔记0025

打开命令行: 首先执行npm install 不执行会报错: npm run build:prod --scripts-prepend-node-pathauto 然后再这样执行就是以生产环境模式打包了....

编程日记 2023/9/19 9:57:50

FreeSWITCH的liberal dtmf

sip profile配置liberal-dtmf为true&#xff0c;或者通道变量rtp_liberal_dtmf为true&#xff0c;其含义就是不挑剔协商的DTMF&#xff0c;offer rfc2833并接受远端的rfc2833 和SIP INFO。 sofia.c的部分内容&#xff1a; // 收到sip info的处理 void sofia_handle_sip_i_inf…...

编程日记 2023/9/19 9:54:47

透明度模糊Android实现

最近有个需求&#xff0c;需要透明度加模糊&#xff0c;并且无法通过Glide的方式实现。研究后发现有一个第三方库可以实现这个效果 implementation com.github.Dimezis:BlurView:version-2.0.3在activity的onCreate&#xff08;&#xff09;方法中 实现效果 可以看到上边的bar…...

编程日记 2023/9/19 9:53:46

JavaScript学习笔记04

JavaScript笔记04 方法 定义方法 当一个函数是一个对象的属性时&#xff0c;称之为方法。例&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><script>let p…...

编程日记 2023/9/19 9:52:45

18 Python的sys模块

概述 在上一节&#xff0c;我们介绍了Python的os模块&#xff0c;包括&#xff1a;os模块中一些常用的属性和函数。在这一节&#xff0c;我们将介绍Python的sys模块。sys模块提供了访问解释器使用或维护的变量&#xff0c;以及与解释器进行交互的函数。 通俗来讲&#xff0c;sy…...

编程日记 2023/9/19 9:50:42

Spring Boot 各版本的支持时间

1. Spring Boot 各版本的支持时间 Spring Boot 2.7 的版本&#xff0c;支持到2023-11-18&#xff0c;之后就要停止支持了。 按照官网的数据&#xff0c;3.0 的版本也是到2023年11月就停止支持了。如果要转到SpringBoot3&#xff0c;直接从3.1开始吧。到写这篇文章时&#xff…...

编程日记 2023/9/19 9:49:41

华为云云耀云服务器L实例评测｜Git 私服搭建指南

前言 本文为华为云云耀云服务器L实例测评文章&#xff0c;测评内容是 云耀云服务器L实例 Git 私有服务器搭建指南 系统配置&#xff1a;2核2G 3M Ubuntu 20.04 我们平时在使用代码托管服务的时候&#xff0c;可能某些代码托管平台对成员有限制&#xff0c;或是由于内容原因会对…...

编程日记 2023/9/19 9:45:38

Linux下的Swap内存

目录 一、Swap简介二、Swap内存查看三、Swap内存释放1、关闭swap2、查看关闭进度2、开启swap 一、Swap简介 swap space 是磁盘上的一块区域&#xff0c;可以是一个分区&#xff0c;也可以是一个文件。所以具体的实现可以是 swap分区 也可以是 swap文件。 当系统物理内存吃紧时…...

编程日记 2023/9/19 9:44:37

Unity中程序集dll

一&#xff1a;前言 一个程序集由一个或多个文件组成&#xff0c;通常为扩展名.exe和.dll的文件称为程序集&#xff0c;.exe是静态的程序集&#xff0c;可以在.net下直接运行加载&#xff0c;因为exe中有一个main函数(入口函数&#xff09;&#xff0c;.dll是动态链接库&#…...

编程日记 2023/9/19 9:43:36

识典百科取代快懂百科，如何在识典百科创建词条？

我们一个营销项目里面有四个百科词条的创建&#xff0c;在执行过程中遇见了快懂百科升级&#xff0c;创建词条请前往识典百科&#xff0c;看这个意思字节跳动是要把快懂百科升级整合到识典百科了。 快懂百科升级整合进入识典百科 近年来&#xff0c;字节跳动动作不断&#xff0…...

编程日记 2023/9/19 9:39:31

入门python

[NOIP2006 普及组] 明明的随机数 题目描述 明明想在学校中请一些同学一起做一项问卷调查&#xff0c;为了实验的客观性&#xff0c;他先用计算机生成了 N N N 个 1 1 1 到 1000 1000 1000 之间的随机整数 ( N ≤ 100 ) (N\leq100) (N≤100)&#xff0c;对于其中重复的数字…...

编程日记 2023/9/19 9:38:30

基于vue的黑马前端项目小兔鲜

目录 项目学习 初始化项目 建立项目 引入elementplus elementPlus主题设置 配置axios 路由 引入静态资源 自动导入scss变量 Layout页 组件结构快速搭建 字体图标渲染 一级导航渲染 吸顶导航交互实现 Pinia优化重复请求 Home页 分类实现 banner轮播图 …...

编程日记 2023/9/19 9:37:29

细节决定成败！jdbc的List＜?＞ qryList4Sql(String sql)报错-标志符过长

问题产生背景&#xff1a; 在写sql时&#xff0c;想着简单直接就偷懒了&#xff0c;没有看清细节 操作步骤跟发现问题&#xff1a; 1. sql语句的执行选用的是jdbc提供的List<?> qryList4Sql(String sql) 方法 2&#xff0c;这是我的sql语句(简化处理) String sql "…...

编程日记 2023/9/19 9:34:26

ChatGLM Pytorch从0编写Transformer算法

预备工作 # !pip install http://download.pytorch.org/whl/cu80/torch-0.3.0.post4-cp36-cp36m-linux_x86_64.whl numpy matplotlib spacy torchtext seaborn import numpy as np import torch import torch.nn as nn import torch.nn.functional as F import math, copy, tim…...

编程日记 2023/9/19 9:29:19

9.18算法

机器人重物1126 注意编号是方块的&#xff0c;而不是格点的 及如果为n*m的矩阵&#xff0c;需要开(n1)*(m1)的矩阵 //如果没有转向&#xff0c;就是走迷宫&#xff0c;结合记忆化&#xff0c;如果这个点之前走过就不走了 //又转向的话&#xff0c;就用一个变量记录当前转向&…...

编程日记 2023/9/19 9:28:18

【Spring Bean的生命周期】

文章目录 Spring Bean的生命周期实例化构造器实例化工厂方法实例化 属性赋值XML方式注解方式 初始化postProcessBeforeInitialization()和postProcessAfterInitialization()InitializingBean接口的afterPropertiesSet()方法通过Bean注解定义的初始化方法使用PostConstruct注解标…...

编程日记 2023/9/19 9:26:16

信息化发展49

软件设计 1 、软件设计是需求分析的延伸与拓展。需求分析阶段解决“做什么” 的问题&#xff0c;而软件设计阶段解决“怎么做” 的问题。同时&#xff0c; 它也是系统实施的基础&#xff0c; 为系统实施工作做好铺垫。合理的软件设计方案既可以保证系统的质量&#xff0c; 也可…...

编程日记 2023/9/19 9:25:15

linux常用命令(4)：mkdir命令(创建目录)

文章目录 一、命令简介二、命令格式三、常用示例 一、命令简介 mkdir&#xff08;make directories&#xff09;创建目录。 若指定目录不存在则创建目录。若指定目录已存在&#xff0c;则会提示已存在而不继续创建。 touch与mkdir的区别? 很多人可能会把这个搞混淆&#xff…...

编程日记 2023/9/19 9:23:12

企业架构LNMP学习笔记58

开始学习Tomcat&#xff1a; 学习目标和内容&#xff1a; 1&#xff09;能够描述Tomcat的使用场景&#xff1b; 2&#xff09;能够简单描述Tomcat的工作原理&#xff1b; 3&#xff09;能够实现部署安装Tomcat&#xff1b; 4&#xff09;能够实现和配置Tomcat的Server服务…...

编程日记 2023/9/19 9:21:10

企业免费网站/怎么简单制作一个网页

1、靠&#xff01;不服&#xff01;2、不搞了不搞了&#xff01;3、……我跟你说&#xff01;4、我打死你&#xff01;5、鸟人&#xff01;6、无聊&#xff01;7、干嘛&#xff01;8、不可能&#xff01;9、我拍死你&#xff01;10、你滚啊&#xff01;11、谁稀罕啊&#xff01…...

编程日记 2024/11/7 12:01:12

移动电商网站开发/如何在网上推广自己

引 言 数字生活方式是现代文明的一个重要标志。在与人们工作生活密切相关的电脑、手机和电视三大信息平台中&#xff0c;电脑和手机已实现了数字化和网络化&#xff0c;为人们带来了多姿多彩的资讯和娱乐服务&#xff0c;也为相关企业带来了巨额利润。数字电视将带来数字生活方…...

编程日记 2024/11/7 11:27:32

婚纱摄影网站图片/网站自然排名怎么优化

A. 阿里巴巴 数据中台 — 概述 概述 云上数据中台业务模式 — 6大独特价值 业务体感OneTeam协同作战特色大数据人云上数据中台大数据技术云上数据中台建设方法论云上数据中台产品化服务 底层基础设施 业务前台 — 业务数据化 VS 数据业务化云上数据中台 — 智能数据能力 既&q…...

编程日记 2024/11/7 11:07:31

网站建设一般报价/企业关键词优化最新报价

作者&#xff1a;闲鱼技术-君爱 1. 前言 闲鱼技术团队在2018年引入Flutter后&#xff0c;越来越多的业务场景在Flutter上使用。Flutter的亚秒级热重载一直是开发者的神兵利器&#xff0c;提供给开发者快速修改UI&#xff0c;增加功能&#xff0c;修复bug&#xff0c;不需要重新…...

编程日记 2024/11/7 7:50:07

网站开发合同中的知识产权条款/seo黑帽技术

用Python的wx模块创建文本编辑器的方法&#xff1a; 1、设置按钮的位置 import wx app wx.App() win wx.Frame(None,title "编辑器", size(410,335)) win.Show() loadButton wx.Button(win, label 打开,pos (225,5),size (80,25)) saveButton wx.Button(win,…...

编程日记 2024/11/7 7:09:00

白城学做网站/深圳网络优化推广公司

C语言与OO思想介绍 C的特点与OO思想 C语言有一个优点&#xff0c;即它的速度可以很快。写出来的程序可以很精练、简单、小巧&#xff0c;不用为了解决某个问题环绕太平洋一大圈。 但如果将C和C相比较&#xff0c;C就经常会为了解决某个问题绕一个大圈&#xff0c;所以代码量相对…...

编程日记 2024/11/7 5:58:21