0

0

如何使用JavaScript解析和操作XML,XMLHttpRequest扮演什么角色?

星降

星降

发布时间:2025-12-04 18:32:03

|

1002人浏览过

|

来源于php中文网

原创

JavaScript不直接解析XML,而是通过DOMParser将XML字符串解析为XMLDocument对象;XMLHttpRequest仅负责加载数据,fetch+DOMParser是更推荐的现代组合。

如何使用javascript解析和操作xml,xmlhttprequest扮演什么角色?

JavaScript 本身不直接“解析”XML 文件,而是通过浏览器提供的 DOM 接口将 XML 字符串或响应内容转换为可遍历的 XMLDocument 对象;XMLHttpRequest(XHR)只是负责获取 XML 数据的传输工具,不是解析器本身。真正完成解析的是浏览器内置的 XML 解析器(如 DOMParser),而 XHR 的作用是把远程或本地的 XML 内容加载进来,供后续解析使用。

用 XMLHttpRequest 获取 XML 数据

XHR 可以发起 HTTP 请求,从服务器加载 XML 文件或接口返回的 XML 响应。关键点是设置 responseType 或利用默认行为,并确保服务器返回正确的 Content-Type: application/xml(或 text/xml)。

  • 如果未设置 responseType,XHR 默认将响应作为字符串处理,需手动用 DOMParser 解析
  • 若设为 responseType = 'document',现代浏览器会自动解析为 XMLDocument(但兼容性有限,IE 不支持)
  • 请求成功后,通过 xhr.responseXML 获取已解析的文档对象(仅当响应是合法 XML 且 MIME 类型匹配时有效)

用 DOMParser 手动解析 XML 字符串

当你拿到的是 XML 字符串(比如从 xhr.responseTextfetch()text() 结果,或本地字符串变量),必须用 DOMParser 显式解析:

  • const parser = new DOMParser();
  • const xmlDoc = parser.parseFromString(xmlString, 'application/xml');
  • 解析失败时,xmlDoc 中会出现 <parsererror> 节点,可通过检查 xmlDoc.querySelector('parsererror') 判断
  • 注意 MIME 类型写 'application/xml''text/xml' 均可,但不能省略

操作解析后的 XMLDocument 对象

得到 XMLDocument 后,就能像操作 HTML DOM 一样查询和修改节点:

吐槽大师
吐槽大师

吐槽大师(Roast Master) - 终极 AI 吐槽生成器,适用于 Instagram,Facebook,Twitter,Threads 和 Linkedin

下载

立即学习Java免费学习笔记(深入)”;

  • getElementsByTagName()querySelector()querySelectorAll() 查找元素
  • getAttribute() 获取属性值,textContentchildNodes 读取文本内容
  • 可调用 createElement()appendChild() 等方法动态构建新节点(但注意命名空间敏感)
  • 若需导出为字符串,可用 (new XMLSerializer()).serializeToString(xmlDoc)

替代方案:用 fetch + async/await 更简洁

相比传统 XHR,fetch 更现代、更易读,配合 response.text()DOMParser 组合更自然:

  • const res = await fetch('data.xml');
  • const xmlStr = await res.text();
  • const xmlDoc = new DOMParser().parseFromString(xmlStr, 'application/xml');
  • 错误处理更清晰:检查 res.okxmlDoc.querySelector('parsererror')

基本上就这些。XMLHttpRequest 是老但可靠的运输车,真正干活的是 DOMParser 和 XMLDocument;现代开发中,fetch + DOMParser 是更推荐的组合,逻辑清晰、错误可控、代码简洁。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
pdf怎么转换成xml格式
pdf怎么转换成xml格式

将 pdf 转换为 xml 的方法:1. 使用在线转换器;2. 使用桌面软件(如 adobe acrobat、itext);3. 使用命令行工具(如 pdftoxml)。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

1949

2024.04.01

xml怎么变成word
xml怎么变成word

步骤:1. 导入 xml 文件;2. 选择 xml 结构;3. 映射 xml 元素到 word 元素;4. 生成 word 文档。提示:确保 xml 文件结构良好,并预览 word 文档以验证转换是否成功。想了解更多xml的相关内容,可以阅读本专题下面的文章。

2119

2024.08.01

xml是什么格式的文件
xml是什么格式的文件

xml是一种纯文本格式的文件。xml指的是可扩展标记语言,标准通用标记语言的子集,是一种用于标记电子文件使其具有结构性的标记语言。想了解更多相关的内容,可阅读本专题下面的相关文章。

1171

2024.11.28

c语言const用法
c语言const用法

const是关键字,可以用于声明常量、函数参数中的const修饰符、const修饰函数返回值、const修饰指针。详细介绍:1、声明常量,const关键字可用于声明常量,常量的值在程序运行期间不可修改,常量可以是基本数据类型,如整数、浮点数、字符等,也可是自定义的数据类型;2、函数参数中的const修饰符,const关键字可用于函数的参数中,表示该参数在函数内部不可修改等等。

562

2023.09.20

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

760

2023.08.03

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

221

2023.09.04

java基础知识汇总
java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友,请阅读本专题下面的的有关文章,欢迎大家来php中文网学习。

1567

2023.10.24

字符串介绍
字符串介绍

字符串是一种数据类型,它可以是任何文本,包括字母、数字、符号等。字符串可以由不同的字符组成,例如空格、标点符号、数字等。在编程中,字符串通常用引号括起来,如单引号、双引号或反引号。想了解更多字符串的相关内容,可以阅读本专题下面的文章。

651

2023.11.24

TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

26

2026.03.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 6万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3.4万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号