原生JS封装ajax 传json，str，excel文件上传提交表单(推荐)
由于项目中需要在提交ajax前设置header信息，jquery的ajax实现不了，我们自己封装几个常用的ajax方法。
jQuery的ajax普通封装
varajaxFn=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
varajaxHdFn=function(uri,data,cb){
vargetXmlHttpRequest=function(){
if(window.XMLHttpRequest){
//主流浏览器提供了XMLHttpRequest对象
returnnewXMLHttpRequest();
}elseif(window.ActiveXObject){
//低版本的IE浏览器没有提供XMLHttpRequest对象
//所以必须使用IE浏览器的特定实现ActiveXObject
returnnewActiveXObject("Microsoft.XMLHttpRequest");
}
};
varxhr=getXmlHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState===4&&xhr.status===200){
//获取成功后执行操作
//数据在xhr.responseText
varresJson=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");
vardataStr=JSON.stringify(data);
xhr.send(dataStr);
}
原生ajax封装，设置header，传json
varajaxStrFn=function(uri,data,cb){
vargetXmlHttpRequest=function(){
if(window.XMLHttpRequest){
//主流浏览器提供了XMLHttpRequest对象
returnnewXMLHttpRequest();
}elseif(window.ActiveXObject){
//低版本的IE浏览器没有提供XMLHttpRequest对象
//所以必须使用IE浏览器的特定实现ActiveXObject
returnnewActiveXObject("Microsoft.XMLHttpRequest");
}
};
varxhr=getXmlHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState===4&&xhr.status===200){
//获取成功后执行操作
//数据在xhr.responseText
varresJson=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");
vardataStr='';
for(variindata){
if(dataStr){
dataStr+='&';
}
dataStr+=i+'='+data[i];
}
xhr.send(dataStr);
}
原生ajax封装，设置header，传上传excel文件，提交表单
varajaxFormFn=function(uri,formObj,cb){
console.log('formObj---',formObj);
vargetXmlHttpRequest=function(){
if(window.XMLHttpRequest){
//主流浏览器提供了XMLHttpRequest对象
returnnewXMLHttpRequest();
}elseif(window.ActiveXObject){
//低版本的IE浏览器没有提供XMLHttpRequest对象
//所以必须使用IE浏览器的特定实现ActiveXObject
returnnewActiveXObject("Microsoft.XMLHttpRequest");
}
};
varxhr=getXmlHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState===4&&xhr.status===200){
//获取成功后执行操作
//数据在xhr.responseText
varresJson=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);
}
导入的实现部分是后端的事情。
我们这里需要提交一个excel文件，使用ajax。
并且需要设置ajax的头信息。所以我们不使用封装好的插件。用原生js来封装一个ajaxFormFn()方法。
这里用到两个对象：
第一个对象：FormData
第二个对象：XMLHttpRequest
目前新版的Firefox与Chrome等支持HTML5的浏览器完美的支持这两个对象，但IE9尚未支持FormData对象，还在用IE6?只能仰天长叹....
有了这两个对象，我们可以真正的实现Ajax方式上传文件。
以上所述是小编给大家介绍的原生JS封装ajax传json，str，excel文件上传提交表单(推荐)的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！