JavaScript怎么发送XML数据 Ajax提交XML格式请求方法_技术教程

JavaScript发送XML数据需用XMLHttpRequest或fetch设置Content-Type为application/xml，并传入格式良好的XML字符串；推荐fetch，注意实体转义与服务端解析配置。

JavaScript 发送 XML 数据，核心是使用 XMLHttpRequest（或 fetch）设置正确的请求头，并将 XML 字符串作为请求体发送。关键点在于：内容类型必须设为 application/xml 或 text/xml，且数据需是格式良好的 XML 字符串。

用 XMLHttpRequest 发送 XML

这是最传统、兼容性最好的方式，适合需要精细控制请求头和状态的场景：

创建 XMLHttpRequest 实例
调用 open() 指定请求方法（如 POST）、URL 和是否异步
用 setRequestHeader() 设置 Content-Type: application/xml
调用 send()，传入已构造好的 XML 字符串（不是 DOM 对象，也不是 JSON）

示例：

const xmlStr = `

  张三
  28
`;

const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/submit');
xhr.setRequestHeader('Content-Type', 'application/xml');
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log('响应:', xhr.responseText);
  }
};
xhr.send(xmlStr);

用 fetch 发送 XML（推荐现代项目）

fetch 更简洁，但要注意它不会自动处理 XML 响应；发送时仍需显式设置 Content-Type：

把 XML 字符串直接作为 body 传入
在 headers 中指定 'Content-Type': 'application/xml'
响应若含 XML，可用 response.text() 获取字符串，或 response.xml（部分浏览器支持）解析为 Document

示例：

const xmlStr = 'Book';

fetch('/api/process', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/xml'
  },
  body: xmlStr
})
.then(res => res.text())
.then(xmlText => {
  console.log('服务器返回的 XML：', xmlText);
});

构造 XML 字符串的注意事项

手拼 XML 容易出错，尤其含特殊字符（如 、&、中文）时：

确保所有标签闭合，根元素唯一
对用户输入的内容做 XML 实体转义（例如 & → &），或使用 DOM API 构造后序列化（见下条）
如需动态生成较复杂 XML，可用 DOMParser + XMLSerializer 组合（安全可靠）

简单构造示例（避免手动拼接）：

const doc = document.implementation.createDocument('', '', null);
const root = doc.createElement('data');
const nameEl = doc.createElement('name');
nameEl.textContent = '李四&王五'; // 自动转义
root.appendChild(nameEl);
doc.appendChild(root);

const serializer = new XMLSerializer();
const xmlStr = serializer.serializeToString(doc); // 得到标准 XML 字符串

服务端接收与常见问题

后端需能解析 application/xml 类型的请求体（如 Node.js 的 express-xml-bodyparser，Java Spring 的 @RequestBody 配合 MappingJackson2XmlHttpMessageConverter）：

前端发的是纯文本 XML，不是 FormData 或 URL 编码
检查浏览器开发者工具 Network 面板中请求的 Content-Type 和 Payload 是否正确
CORS 问题：若跨域，服务端需允许 application/xml 类型的 Content-Type（在 Access-Control-Allow-Headers 中声明）