由于项目中需要在提交ajax前设置header信息，jquery的ajax实现不了，我们自己封装几个常用的ajax方法。
jQuery的ajax普通封装
rush:js;">
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封装，设置header，传json
rush:js;">
var ajaxHdFn = function(uri,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封装，设置header，传json
rush:js;">
var ajaxStrFn = function(uri,"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封装，设置header，传上传excel文件，提交表单
rush:js;">
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","72b32a1f754ba1c09b3695e0cb6cde7f");
xhr.onload = function() {
console.log("上传完成!");
};
xhr.send(formObj);
}
导入的实现部分是后端的事情。
并且需要设置ajax的头信息。所以我们不使用封装好的插件。用原生js来封装一个ajaxFormFn() 方法。
这里用到两个对象：
第一个对象：FormData
第二个对象：XMLHttpRequest
目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这两个对象，但IE9尚未支持 FormData 对象，还在用IE6 ? 只能仰天长叹....
以上所述是小编给大家介绍的原生JS封装ajax 传json，str，excel文件上传提交表单(推荐)的相关知识。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
