原生JS封装Ajax：支持JSON、字符串及Excel文件上传
本文介绍如何使用原生JavaScript封装Ajax方法，解决jQuery无法自定义Header的问题。通过XMLHttpRequest和FormData对象，分别实现了JSON数据提交、普通字符串表单提交以及Excel文件上传功能，并兼容主流浏览器。
背景与需求
因需在Ajax提交前配置请求头，jQuery原生方法无法满足需求，故自行封装若干常用Ajax函数。
jQuery Ajax封装示例
jQuery Ajax基础封装示例
var ajaxFn = function(uri, data, cb) {
$.ajax({
url: uri,
type: 'POST',
dataType: 'json',
data: data,
})
.done(cb)
.fail(function() {
console.log("error");
})
.always(function() {
console.log("complete");
});
} 原生Ajax封装：JSON数据传输
原生Ajax封装：配置请求头并传输JSON数据
var ajaxHdFn = function(uri, data, cb) {
var getXmlHttpRequest = function() {
if (window.XMLHttpRequest) {
//主流浏览器提供了XMLHttpRequest对象
return new XMLHttpRequest();
} else if (window.ActiveXObject) {
//低版本的IE浏览器没有提供XMLHttpRequest对象
//所以必须使用IE浏览器的特定实现ActiveXObject
return new ActiveXObject("Microsoft.XMLHttpRequest");
}
};
var xhr = getXmlHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
//获取成功后执行操作
//数据在xhr.responseText
var resJson = JSON.parse(xhr.responseText)
cb(resJson);
}
};
xhr.open("post", uri, true);
xhr.setRequestHeader("DeviceCode", "56");
xhr.setRequestHeader("Source", "API");
xhr.setRequestHeader("Authentication", "72b32a1f754ba1c09b3695e0cb6cde7f");
xhr.setRequestHeader("Content-Type", "application/json");
var dataStr = JSON.stringify(data);
xhr.send(dataStr);
} 原生Ajax封装：配置请求头并传输JSON数据
var ajaxStrFn = function(uri, data, cb) {
var getXmlHttpRequest = function() {
if (window.XMLHttpRequest) {
//主流浏览器提供了XMLHttpRequest对象
return new XMLHttpRequest();
} else if (window.ActiveXObject) {
//低版本的IE浏览器没有提供XMLHttpRequest对象
//所以必须使用IE浏览器的特定实现ActiveXObject
return new ActiveXObject("Microsoft.XMLHttpRequest");
}
};
var xhr = getXmlHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
//获取成功后执行操作
//数据在xhr.responseText
var resJson = JSON.parse(xhr.responseText)
cb(resJson);
}
};
xhr.open("post", uri, true);
xhr.setRequestHeader("DeviceCode", "56");
xhr.setRequestHeader("Source", "API");
xhr.setRequestHeader("Authentication", "72b32a1f754ba1c09b3695e0cb6cde7f");
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
var dataStr = '';
for (var i in data) {
if (dataStr) {
dataStr += '&';
}
dataStr += i + '=' + data[i];
}
xhr.send(dataStr);
} 原生Ajax封装：Excel文件上传
原生Ajax封装：配置请求头、传输Excel文件及提交表单
var ajaxFormFn = function(uri, formObj, cb) {
console.log('formObj---', formObj);
var getXmlHttpRequest = function() {
if (window.XMLHttpRequest) {
//主流浏览器提供了XMLHttpRequest对象
return new XMLHttpRequest();
} else if (window.ActiveXObject) {
//低版本的IE浏览器没有提供XMLHttpRequest对象
//所以必须使用IE浏览器的特定实现ActiveXObject
return new ActiveXObject("Microsoft.XMLHttpRequest");
}
};
var xhr = getXmlHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
//获取成功后执行操作
//数据在xhr.responseText
var resJson = JSON.parse(xhr.responseText)
cb(resJson);
}
};
xhr.open("post", uri, true);
xhr.setRequestHeader("DeviceCode", "56");
xhr.setRequestHeader("Source", "API");
xhr.setRequestHeader("Authentication", "72b32a1f754ba1c09b3695e0cb6cde7f");
xhr.onload = function() {
console.log("上传完成!");
};
xhr.send(formObj);
} 核心对象与浏览器兼容性
文件导入的后端处理逻辑由服务器端负责。
此处需通过Ajax机制提交Excel文件。
同时需自定义Ajax请求头，因此摒弃现有封装插件，改用原生JS构建ajaxFormFn()函数。
实现过程涉及以下两个核心对象：
首要对象：FormData
次要对象：XMLHttpRequest
新版Firefox与Chrome等支持HTML5的浏览器完美兼容上述对象，但IE9仍不支持FormData，若使用IE6则只能无奈放弃。
借助这两个对象，即可真正实现通过Ajax方式上传文件的功能。
上述内容介绍了原生JS封装Ajax以传输JSON、字符串及Excel文件并提交表单的推荐方案，旨在提供有益参考。如有任何疑问，欢迎留言，小编将及时回复。衷心感谢各位对本站的支持！
ES6模块化中js文件怎么用import和export交互
2026-11-05 17:00:48
JS读取本地文件时报错或无响应的常见原因
2026-11-05 16:32:31
let、const与var的区别：JavaScript变量声明最佳实践
2026-11-05 14:16:38
JS中直接定义静态二维数组的字面量写法
2026-11-05 14:16:08
JS 怎么查找字符串中所有匹配项的位置
2026-11-05 14:15:53