JavaScript学习教程,从入门到精通,XMLHttpRequest 与 Ajax 请求详解(25)
XMLHttpRequest 与 Ajax 请求详解
一、XMLHttpRequest 概述
XMLHttpRequest (XHR) 是一个 JavaScript API,用于在浏览器和服务器之间传输数据,而无需刷新页面。它是实现 Ajax (Asynchronous JavaScript and XML) 技术的核心。
主要特点:
- 异步通信:可以在后台发送和接收数据
- 支持多种数据格式:XML, JSON, HTML, 纯文本等
- 支持各种 HTTP 方法:GET, POST, PUT, DELETE 等
- 可以设置请求头和读取响应头
二、Ajax 请求流程
- 创建 XMLHttpRequest 对象
- 配置请求参数(方法、URL、是否异步等)
- 设置请求头(可选)
- 设置响应处理函数
- 发送请求
- 处理响应数据
三、常用 HTTP 请求方式
方法 | 描述 |
---|---|
GET | 请求指定的资源,通常用于获取数据 |
POST | 向指定资源提交数据进行处理,通常用于创建或更新资源 |
PUT | 替换指定资源的所有当前表示,通常用于完整更新 |
DELETE | 删除指定的资源 |
PATCH | 对资源进行部分修改 |
HEAD | 类似于 GET,但只返回头部信息,不返回实际内容 |
OPTIONS | 返回服务器支持的 HTTP 方法,用于跨域请求预检 |
四、接收响应数据
XHR 对象提供了多个属性和方法来处理响应:
responseText
: 获取字符串形式的响应数据responseXML
: 获取 XML 形式的响应数据(如果响应是 XML)status
: HTTP 状态码(如 200, 404 等)statusText
: HTTP 状态文本(如 “OK”, “Not Found” 等)readyState
: 请求状态(0-4)onreadystatechange
: 状态改变时触发的事件处理函数
五、HTTP 请求头
HTTP 请求头允许客户端向服务器传递附加信息。常用的请求头包括:
Content-Type
: 请求体的 MIME 类型(如application/json
)Accept
: 客户端能够接收的内容类型Authorization
: 认证信息(如 Bearer token)User-Agent
: 客户端信息Cache-Control
: 缓存控制X-Requested-With
: 标识 Ajax 请求(通常为XMLHttpRequest
)
六、代码示例
1. 基础 GET 请求示例
// 1. 创建XHR对象
const xhr = new XMLHttpRequest();// 2. 配置请求
xhr.open('GET', 'https://api.example.com/users', true); // 异步请求// 3. 设置响应处理函数
xhr.onreadystatechange = function() {if (xhr.readyState === 4) { // 请求完成if (xhr.status === 200) { // 成功响应console.log('响应数据:', xhr.responseText);const users = JSON.parse(xhr.responseText); // 解析JSON数据console.log('用户列表:', users);} else {console.error('请求失败:', xhr.status, xhr.statusText);}}
};// 4. 发送请求
xhr.send();
2. POST 请求示例(发送 JSON 数据)
const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/users', true);// 设置请求头,告诉服务器发送的是JSON数据
xhr.setRequestHeader('Content-Type', 'application/json');xhr.onreadystatechange = function() {if (xhr.readyState === 4) {if (xhr.status === 201) { // 201表示资源创建成功console.log('用户创建成功:', xhr.responseText);} else {console.error('创建用户失败:', xhr.status, xhr.statusText);}}
};const newUser = {name: 'John Doe',email: 'john@example.com',age: 30
};// 发送JSON字符串
xhr.send(JSON.stringify(newUser));
3. 带自定义请求头的请求示例
// 创建XHR对象
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/user/profile', true);// 设置标准请求头
xhr.setRequestHeader('Accept', 'application/json');// 设置自定义请求头
xhr.setRequestHeader('X-Custom-Header', 'custom-value');
xhr.setRequestHeader('X-User-Token', 'abc123xyz');xhr.onreadystatechange = function() {if (xhr.readyState === 4) {if (xhr.status === 200) {const profile = JSON.parse(xhr.responseText);console.log('用户信息:', profile);// 读取响应头const contentType = xhr.getResponseHeader('Content-Type');console.log('内容类型:', contentType);// 获取所有响应头const allHeaders = xhr.getAllResponseHeaders();console.log('所有响应头:', allHeaders);} else {console.error('获取用户信息失败:', xhr.status, xhr.statusText);}}
};xhr.send();
4. 错误处理示例
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/products', true);// 超时设置(毫秒)
xhr.timeout = 5000; // 5秒超时// 超时处理
xhr.ontimeout = function() {console.error('请求超时');
};// 网络错误处理
xhr.onerror = function() {console.error('网络错误');
};xhr.onreadystatechange = function() {if (xhr.readyState === 4) {if (xhr.status >= 200 && xhr.status < 300) {// 成功响应console.log('产品列表:', JSON.parse(xhr.responseText));} else if (xhr.status === 401) {console.error('未授权,请登录');} else if (xhr.status === 404) {console.error('资源不存在');} else if (xhr.status >= 500) {console.error('服务器错误');} else {console.error('请求失败:', xhr.status, xhr.statusText);}}
};xhr.send();
5. 文件上传示例(带进度监控)
const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/upload', true);// 进度事件处理
xhr.upload.onprogress = function(event) {if (event.lengthComputable) {const percentComplete = (event.loaded / event.total) * 100;console.log('上传进度:', percentComplete.toFixed(2) + '%');}
};xhr.onload = function() {if (xhr.status === 200) {console.log('文件上传成功:', xhr.responseText);} else {console.error('文件上传失败:', xhr.status, xhr.statusText);}
};xhr.onerror = function() {console.error('上传过程中发生网络错误');
};const formData = new FormData();
const fileInput = document.querySelector('input[type="file"]');
formData.append('file', fileInput.files[0]);
formData.append('description', '这是一个文件描述');xhr.send(formData);
七、XMLHttpRequest readyState 状态
值 | 状态 | 描述 |
---|---|---|
0 | UNSENT | 代理被创建,但尚未调用 open() 方法 |
1 | OPENED | open() 方法已经被调用 |
2 | HEADERS_RECEIVED | send() 方法已经被调用,并且头部和状态已经可获得 |
3 | LOADING | 下载中;responseText 属性已经包含部分数据 |
4 | DONE | 下载操作已完成(可能是成功,也可能是失败,需检查status状态码) |
八、注意事项
-
跨域请求:默认情况下,XHR 遵循同源策略。如需跨域,服务器需要设置 CORS 头或使用 JSONP(仅限 GET)
-
同步请求:应避免使用同步请求(open 方法的第三个参数设为 false),因为它会阻塞 UI 线程
-
安全性:
- 不要使用 XHR 发送敏感数据,除非使用 HTTPS
- 验证所有来自服务器的数据,防止 XSS 攻击
-
性能:
- 复用 XHR 对象可以减少内存消耗
- 对于大量数据,考虑使用分页或流式传输
-
现代替代方案:虽然 XHR 仍然可用,但现代开发中更推荐使用 Fetch API 或 axios 等库
相关文章:
JavaScript学习教程,从入门到精通,XMLHttpRequest 与 Ajax 请求详解(25)
XMLHttpRequest 与 Ajax 请求详解 一、XMLHttpRequest 概述 XMLHttpRequest (XHR) 是一个 JavaScript API,用于在浏览器和服务器之间传输数据,而无需刷新页面。它是实现 Ajax (Asynchronous JavaScript and XML) 技术的核心。 主要特点: …...
HTML、XHTML 和 XML区别
HTML、XHTML 和 XML 这三兄弟的区别 HTML: 老大哥,负责网页长啥样,性格比较随和,有点小错误也能容忍。XHTML: 二哥,看着像 HTML,但规矩严,是按 XML 的规矩来的 HTML,更规范。XML: 小弟…...
形象解释 HTTP 的四种常见请求方式及其中的区别联系
HTTP 的常见请求方式常见的有四种:GET、POST、PUT、DELETE,它们各自的功能不一样。 🍜 场景比喻:HTTP 请求像“去餐厅点菜” 请求方式行为餐厅比喻说明GET获取数据看菜单/问服务员:你们有什么菜?不带食材、…...
微信小程序根据图片生成背景颜色有效果图
效果图 取得是图片中间10个像素算出背景颜色 .wxml <canvas type"2d" id"imageCanvas" style"--w: {{w}}px;--h: {{h}}px;" /> <view style"background: {{backgroundColor}};"><image bind:tap"updateIndex&qu…...
实时步数统计系统 kafka + spark +redis
基于微服务架构设计并实现了一个实时步数统计系统,采用生产者-消费者模式,利用Kafka实现消息队列,Spark Streaming处理实时数据流,Redis提供高性能数据存储,实现了一个高并发、低延迟的数据处理系统,支持多…...
使用 Docker 安装 SQL Server 2022 并解决 Navicat 连接问题
在使用 Docker 安装 SQL Server 时,很多人可能遇到过无法通过 Navicat 等数据库客户端连接到容器的情况。尤其是尝试使用 mcr.microsoft.com/mssql/server:2022-latest 镜像时,可能会发现 Navicat一直转圈,无法连接到数据库。在这篇博客中&am…...
使用 Node、Express 和 MongoDB 构建一个项目工程
本文将详细介绍如何使用 Node.js Express MongoDB 构建一个完整的 RESTful API 后端项目,涵盖: 项目初始化 Express 服务器搭建 MongoDB 数据库连接 REST API 设计(CRUD 操作) 错误处理与中间件 源码结构与完整代码 部署建…...
基本元器件电阻、电容、电感的高频知识和大厂真题解析
本文首先举例分析各个方向的工程师如何定制化准备硬件岗位面试,各个击破; 然后根据实战经验总结硬件领域中电阻电容电感等的主要笔试、面试高频考题考点; 最后,列出最新最全的基本元器件笔试面试的真题和模拟题,供大家参考。 本专栏预计更新50期左右。当前第3期 一、硬件…...
Unity InputSystem触摸屏问题
最近把Unity打包后的windows软件放到windows触摸屏一体机上测试,发现部分屏幕触摸点击不了按钮,测试了其他应用程序都正常。 这个一体机是这样的,一个电脑机箱,外接一个可以触摸的显示屏,然后UGUI的按钮就间歇性点不了…...
分布式微服务架构,数据库连接池设计策略
在分布式微服务架构中,数据库连接池的设计远比单体应用复杂,涉及资源隔离、连接管理、性能调优和高可用等问题。下面是面向专业软件架构师的系统化分析与策略建议: 一、核心挑战 每个服务独立运行,连接池分散 每个微服务维护自己的…...
差分信号抗噪声原理:
差分信号抗噪声原理: 差分信号除了能很好地解决发送和接收参考点电位不同的问题外,差分信号的另一个重要优势就是在一定条件下其抗干扰能力比单端信号更强。对于单端信号传输,外界对它的干扰噪声直接叠加在信号上,接收端直接检测输…...
【数据分析】酵母实验多指标数据的 R 语言分析与可视化
禁止商业或二改转载,仅供自学使用,侵权必究,如需截取部分内容请后台联系作者! 文章目录 介绍加载必要的R包数据下载定义函数发育分析(development analysis)数据导入与预处理数据子集创建绘图模型分析两两比较生存分析(survival analysis)数据导入与预处理数据子集创建绘…...
AI | 最近比较火的几个生成式对话 AI
关注:CodingTechWork 引言 生成式对话 AI 正在迅速改变我们与机器交互的方式,从智能助手到内容创作,其应用范围广泛且深远。本文将深入探讨几款当前热门的生成式对话 AI 模型,包括 Kimi、DeepSeek、ChatGPT、文心一言、通义千问和…...
将视频生成视频二维码步骤
如何将视频链接生成二维码 生成与视频关联的二维码通常涉及以下几个方面:选择合适的库或工具、准备视频链接以及将其转换为二维码图像。以下是详细的说明: 使用JavaScript/Vue框架生成二维码 在前端开发中,可以使用 qrcode 或者 vue-qrcod…...
以安科瑞 EMS3.0 为依托,打造网荷储充一体化典范
在“双碳”目标与能源革命的浪潮中,安科瑞电气股份有限公司推出的EMS3.0微电网智慧能源平台,以“源-网-荷-储-充”全链路协同为核心,通过物联网、大数据与AI技术的深度融合,为企业提供了一套智能化、高效化、低碳化的能源管理解决…...
堆和二叉树--数据结构初阶(3)(C/C++)
文章目录 前言理论部分堆的模拟实现:(这里举的大根堆)堆的创建二叉树的遍历二叉树的一些其他功能实现 作业部分 前言 这期的话讲解的是堆和二叉树的理论部分和习题部分 理论部分 二叉树的几个性质:1.对于任意一个二叉树,度为0的节点比度为2的节点多一个 2.对于完全…...
CLIP和SimCLR集成到图像-文本检索系统技术实现步骤和部署方案(代码版)
将 CLIP(多模态对比学习)和 SimCLR(单模态对比学习)集成到 图像-文本检索系统(如搜索引擎、电子商务平台)的技术实现步骤和部署方案,结合代码示例与工程化思路: ### 一、技术实现核心步骤 1. 环境搭建与依赖安装 # 安装 PyTorch(支持 GPU 加速) pip install torch…...
R/G-B/G色温坐标系下对横纵坐标取对数的优势
有些白平衡色温坐标系会分别对横纵坐标取对数运算。 这样做有什么优势呢? 我们知道对数函数对0-1之间的因变量值具有扩展作用。即自变量x变化比较小时,经过对数函数作用后可以把因变量扩展到较大范围内,即x变化较小时,y变化较大,增加了识别数据的识别性。 由于Raw数据中的…...
Java开发工具IntelliJ IDEA v2025.1——全面支持Java 24、整合AI
IntelliJ IDEA 是由 JetBrains 开发的智能 Java IDE,提供代码自动补全、重构工具、框架集成(Spring/JPA 等)、数据库工具和调试支持,通过深度代码分析与跨语言功能优化企业级开发流程,被广泛认可为专业 Java 开发者的高…...
IDEA启动报错Failed to create JVM. JVM path的解决办法
今天修改了 IntelliJ IDEA 2023.1 的配置文件 idea64.exe.vmoptions 后启动报错: if you already hava a JDK installed, define a JAVA_HOME variable in Computer > Systen Properties > System Settings > Environment Variables.Failed to create JV…...
R语言中的常用内置函数
常用的数值函数 常用的字符函数 与概率分布相关的函数 有用的统计函数 数据来源:《数据挖掘与数据分析:基于R语言》王阳 2024年1月出版...
docker容器监控自动恢复
关于实现对docker容器监控以及自动恢复,这里介绍两种实现方案。 方案1: 实现思路: 找到(根据正则表达式)所有待监控的docker容器,此处筛选逻辑根据docker运行状态找到已停止(Exit)类…...
【记录手贱bug日常】IDEA 配置vmoptions后打不开,重新安装,删注册表均无用
今天早上来公司,闲着没事优化优化自己的"锄头"idea,然后想着看看idea用的啥垃圾回收器,后来手动改成了-XX:UseG1GC,满心欢喜觉得没什么问题,直接删除缓存重启,结果不出意料的出问题了,…...
STM32F407使用ESP8266实现阿里云OTA(中)
文章目录 前言一、程序分析二、程序讲解1. main函数2. Get_Version()函数3. esp_Init()函数4. Check_Updata()函数结语前言 从上一章STM32F407使用ESP8266实现阿里云OTA(上)中我们已经对连接阿里云和从阿里云获取升级包的流程非常的熟悉了。所以本章我们进行STM32的程序开发…...
如何利用快照与备份快速恢复服务器的数据
在服务器上利用**快照(Snapshot)**和**备份(Backup)**快速恢复数据,可显著减少停机时间并确保业务连续性。以下是具体操作步骤和最佳实践: --- ### **1. 快照(Snapshot)恢复** **适…...
【Leetcode 每日一题】2799. 统计完全子数组的数目
问题背景 给你一个由 正 整数组成的数组 n u m s nums nums。 如果数组中的某个子数组满足下述条件,则称之为 完全子数组 : 子数组中 不同 元素的数目等于整个数组不同元素的数目。 返回数组中 完全子数组 的数目。 子数组 是数组中的一个连续非空序…...
主流操作系统对比分析(macOS、Linux、Windows、Unix)
主流操作系统对比分析(macOS、Linux、Windows、Unix) 一、系统基本介绍 系统核心特点典型代表macOS苹果公司开发,基于 Unix(BSD),闭源,专为苹果硬件优化,强调用户体验和设计美学。m…...
Qt使用 SQLite 数据库的基本方法
在 Qt 中,使用 SQLite 数据库的基本方法与 MySQL 类似,但 SQLite 是一个轻量级的嵌入式数据库,通常不需要外部数据库服务器。你可以直接在本地磁盘上操作 SQLite 数据库文件。 1. 安装 SQLite 驱动 通常,Qt 默认包含了对 SQLite…...
【刷题系列】LeetCode消失的数字、轮转数组
文章目录 1、消失的数字1.1 题目描述1.2 题目分析 2、轮转数字2.1 题目描述2.2 题目分析 1、消失的数字 原题链接:消失的数字 1.1 题目描述 数组nums包含从0到n的所有整数,但其中缺了一个。请编写代码找出那个缺失的整数。你有办法在O(n)时间内完成吗…...
Unreal Niagara制作SubUV贴图翻页动画
SubUV翻页动画是游戏中的常见功能,通过对每一小块UV进行移动可以模拟动画效果,接下来对下图进行SubUV动画的制作。 (金币测试图下载地址:https://download.csdn.net/download/grayrail/90684422) 最终效果如下: 1.…...
【C++】模版初阶:函数模板、类模板
文章目录 一、为什么要使用模板二、什么是函数模板1、函数模板(1)概念(2)格式(3)原理(4)函数模板的实例化(5)模板参数的匹配原则 2、类模板(1&…...
Kotlin基础知识全面解析(下)
文章目录 第六章:集合与函数式编程6.1 集合概述6.2 集合操作6.3 序列 第七章:协程与异步编程7.1 协程基础7.2 挂起函数7.3 异步与等待7.4 协程上下文与调度器 第八章:Kotlin标准库8.1 作用域函数let函数run函数with函数apply函数also函数 8.2…...
NVIDIA高级辅助驾驶安全报告解析
近期参加了NVIDIA高级辅助驾驶开发者实验室,读了NVIDIA的高级辅助驾驶安全报告白皮书,里面涉及了不少有意思的内容,大致分享下英伟达在高级辅助驾驶领域的安全性上的工作。 最令人印象深刻的是NVIDIA提出的"四大支柱"架构&#x…...
HarmonyOS:一多能力介绍:一次开发,多端部署
概述 如果一个应用需要在多个设备上提供同样的内容,则需要适配不同的屏幕尺寸和硬件,开发成本较高。HarmonyOS 系统面向多终端提供了“一次开发,多端部署”(后文中简称为“一多”)的能力,可以基于一种设计…...
位运算题目:解码异或后的排列
文章目录 题目标题和出处难度题目描述要求示例数据范围 解法思路和算法代码复杂度分析 题目 标题和出处 标题:解码异或后的排列 出处:1734. 解码异或后的排列 难度 6 级 题目描述 要求 有一个整数数组 perm \texttt{perm} perm,是前…...
elasticsearch查询中的特殊字符影响分析
大家先看一个执行的dsl 查询sql,大致的意思是排除某些分类下的商品 GET /productinfos/_search {"from": 0,"query": {"bool": {"must": [{"exists": {"field": "minprice"}},{"bool": {&qu…...
Django创建的应用目录详细解释以及如何操作数据库自动创建表
创建好Django项目后 如果要创建 python manage.py startapp 模块名模块 使用 我创建一个system模块后是 注意:urls是我自己建的文件 1.migrations目录 存放数据库的迁移文件,当models.py中模型定义发生变化时,通过迁移操作能同步数据库结构变化 __init__ 使该目录…...
Visual Studio Code 使用tab键往左和往右缩进内容
使用VSCode写东西,经常遇到多行内容同时缩进的情况,今天写文档的时候就碰到,记录下来: 往右缩进 选中多行内容,点tab键,会整体往右缩进: 往左缩进 选中多行内容,按shifttab&am…...
数据结构算法复杂度介绍
数据结构:互相之间存在一种或者多种特定元素的集合,在逻辑上分为线性结构,散列结构,、树形结构、图形结构等。 算法:求解具体问题的步骤描述,代码上表现出来是解决特定问题的一组有限的指令序列。简单来说…...
SiamMask中的分类分支、回归分支与Mask分支,有何本质差异?
SiamMask中的分类分支、回归分支与Mask分支,有何本质差异? 一、引言二、分支定位与任务目标三、网络结构与感受野设计3.1 分类分支(Classification Head)3.2 回归分支(Regression Head)3.3 Mask分支&#x…...
使用 Typora + PicGo + Gitee/GitHub 构建 Markdown 图床技术方案
使用 Typora PicGo Gitee/GitHub 构建 Markdown 图床技术方案 AuthorDateVersionNoteTao Wang2025-04-24V1.0Release the document. 文章目录 使用 Typora PicGo Gitee/GitHub 构建 Markdown 图床技术方案前言核心概念解析图床技术原理 环境搭建基础工具清单软件安装流程 …...
问道数码兽 怀旧剧情回合手游源码搭建教程(反查重优化版)
本文将对"问道数码兽"这一经典卡通风格回合制手游的服务端部署与客户端调整流程进行详细拆解,适用于具备基础 Windows 运维和手游源码调试经验的开发者参考使用。教程以实战为导向,基于原始说明内容重构优化,具备较高的内容查重避重…...
Electron Forge【实战】百度智能云千帆大模型 —— AI聊天
1. 获取 Access Key 与 Secret Key 登录百度智能云 https://login.bce.baidu.com/ 2. 安装node.js sdk npm install baiducloud/qianfan3. src/main.ts import { setupIPC } from "./ipc";在 const mainWindow 之后 setupIPC(mainWindow);4. src/ipc.ts import { ipc…...
机器人操作中的生成式 AI:综述(下)
25年3月来自香港大学、香港理工、香港科大、浙大和清华大学的论文“Generative Artificial Intelligence in Robotic Manipulation: A Survey”。 本综述全面回顾机器人操作领域生成学习模型的最新进展,并探讨该领域的关键挑战。机器人操作面临着关键瓶颈ÿ…...
把一个 PyTorch 的图像张量转换成 NumPy 格式,并按照正确的维度顺序显示出来
示例代码: plt.imshow(np.transpose(tensor_denorm.numpy(), (1, 2, 0)))它的作用是:把一个 PyTorch 的图像张量转换成 NumPy 格式,并按照正确的维度顺序显示出来。 🚀 一步步解释: ✅ tensor_denorm 这是一个形状为…...
windows上的RagFlow+ollama知识库本地部署
一、 docker的安装与部署 1. 下载Docker Desktop 访问Docker官网并下载适用于Windows的Docker Desktop安装程序。 RagFlow对docker的要求: Docker ≥ 24.0.0 & Docker Compose ≥ v2.26. docker 下载地址: https://www.docker.com/ Get Docker | D…...
【docker】 pull FROM build
镜像拉取失败 token问题 DeadlineExceeded: failed to fetch anonymous token Get "https://auth.docker.io/token?...": dial tcp 157.240.20.8:443: i/o timeout1. 检查网络连通性 如果 curl 命令卡住或超时,说明网络到 Docker Hub 存在问题。 ping regt-1.doc…...
【数据分析实战】使用 Matplotlib 绘制玫瑰图
🌹 1、简述 玫瑰图,又称极坐标柱状图(Polar Bar Chart),是一种特殊的条形图,适用于展示方向型数据,例如: 风向频率图(Wind Rose)每月、每日不同类别统计圆形时间序列展示(如12个月销售量分布)在本篇博客中,我们将使用 matplotlib 画出玫瑰图,包括基本玫瑰图、多…...
第十四届蓝桥杯省B.砍树
第十四届蓝桥杯省B.砍树 题目 题目解析及思路 考虑一对无序数对的点 x和 y,如果我们砍掉某条边可以让这两个点不连通,那么这条边一定是从 x到 y 路径上的一点,我们可以让从 x到 y 路径的边权值都加1。这个操作我们可以使用树上差分。 对于 …...
windows安装Mysql
一、删除已安装的MySQL服务 1、查找以前是否装有mysql sc query mysql 无结果,说明未安装过mysql或者已经卸载mysql服务,接下来直接安装mysql即可,否则需要删除之前安装的mysql 2、删除mysql 以管理员模式打开命令运行行,运行下…...