在前端开发场景里，部分后端接口要求接收XML格式的数据，这时候就需要通过JavaScript的Ajax相关能力来发送XML格式请求。下面会分别介绍原生XMLHttpRequest和Fetch API两种实现方式。
一、原生XMLHttpRequest发送XML数据
1. 构建XML数据
首先需要按照接口要求的格式构建XML字符串，注意XML需要符合规范，要有正确的标签闭合和声明。
// 构建XML格式数据
function createXMLData() {
let xmlString = '<?xml version="1.0" encoding="UTF-8"?>';
xmlString += '<user>';
xmlString += '<name>张三</name>';
xmlString += '<age>25</age>';
xmlString += '<email>test@ipipp.com</email>';
xmlString += '</user>';
return xmlString;
}
2. 发送Ajax请求
创建XMLHttpRequest实例后，需要设置正确的请求头，告诉后端当前发送的是XML格式数据，然后发送构建好的XML字符串。
// 发送XML格式Ajax请求
function sendXMLByXHR() {
const xhr = new XMLHttpRequest();
// 设置请求方法和接口地址
xhr.open('POST', 'http://192.168.0.1/api/submit-xml', true);
// 设置请求头，指定内容类型为XML
xhr.setRequestHeader('Content-Type', 'application/xml;charset=UTF-8');
// 监听请求状态变化
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
console.log('请求成功，响应内容：', xhr.responseText);
} else {
console.log('请求失败，状态码：', xhr.status);
}
}
};
// 获取XML数据并发送
const xmlData = createXMLData();
xhr.send(xmlData);
}
3. 注意事项
- XML字符串必须符合XML语法规范，标签要正确闭合，属性值要用引号包裹。
- 请求头的
Content-Type必须设置为application/xml或者text/xml，否则后端可能无法正确解析数据。 - 如果接口有跨域限制，需要后端配合设置对应的跨域响应头。
二、Fetch API发送XML数据
Fetch API是现代浏览器支持的更简洁的网络请求方式，同样可以用来发送XML格式的数据，实现逻辑和XMLHttpRequest类似。
// 使用Fetch API发送XML数据
function sendXMLByFetch() {
const xmlData = createXMLData();
fetch('http://127.0.0.1/api/submit-xml', {
method: 'POST',
headers: {
'Content-Type': 'application/xml;charset=UTF-8'
},
body: xmlData
})
.then(response => {
if (response.ok) {
return response.text();
}
throw new Error('请求失败，状态码：' + response.status);
})
.then(result => {
console.log('请求成功，响应内容：', result);
})
.catch(error => {
console.log('请求出错：', error.message);
});
}
三、两种方式的对比
下面是两种发送XML数据方式的特性对比：
| 对比项 | XMLHttpRequest | Fetch API |
|---|---|---|
| 兼容性 | 兼容所有主流浏览器，包括旧版本IE | 不支持IE浏览器，现代浏览器支持较好 |
| 语法复杂度 | 语法相对繁琐，需要监听状态变化 | 语法更简洁，基于Promise实现 |
| 取消请求 | 支持通过abort()方法取消 | 需要配合AbortController实现取消 |
开发者可以根据项目的兼容性要求和开发习惯选择合适的实现方式，两种方式的XML数据构建和请求头设置逻辑是一致的。
JavaScriptAjaxXMLXMLHttpRequest修改时间：2026-07-02 18:45:27