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