由于项目中需要在提交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
1 var ajaxHdFn = function(uri, data, cb) { 2 var getXmlHttpRequest = function() { 3 if (window.XMLHttpRequest) { 4 //主流浏览器提供了XMLHttpRequest对象 5 return new XMLHttpRequest(); 6 } else if (window.ActiveXObject) { 7 //低版本的IE浏览器没有提供XMLHttpRequest对象 8 //所以必须使用IE浏览器的特定实现ActiveXObject 9 return new ActiveXObject("Microsoft.XMLHttpRequest");10 }11 12 };13 var xhr = getXmlHttpRequest();14 xhr.onreadystatechange = function() {15 if (xhr.readyState === 4 && xhr.status === 200) {16 //获取成功后执行操作17 //数据在xhr.responseText18 var resJson = JSON.parse(xhr.responseText)19 cb(resJson);20 }21 };22 xhr.open("post", uri, true);23 xhr.setRequestHeader("DeviceCode", "56");24 xhr.setRequestHeader("Source", "API");25 xhr.setRequestHeader("Authentication", "72b32a1f754ba1c09b3695e0cb6cde7f");26 27 xhr.setRequestHeader("Content-Type", "application/json");28 var dataStr = JSON.stringify(data);29 xhr.send(dataStr);30 }
原生ajax封装，设置header，传json
1 var ajaxStrFn = function(uri, data, cb) { 2 var getXmlHttpRequest = function() { 3 if (window.XMLHttpRequest) { 4 //主流浏览器提供了XMLHttpRequest对象 5 return new XMLHttpRequest(); 6 } else if (window.ActiveXObject) { 7 //低版本的IE浏览器没有提供XMLHttpRequest对象 8 //所以必须使用IE浏览器的特定实现ActiveXObject 9 return new ActiveXObject("Microsoft.XMLHttpRequest");10 }11 12 };13 var xhr = getXmlHttpRequest();14 xhr.onreadystatechange = function() {15 if (xhr.readyState === 4 && xhr.status === 200) {16 //获取成功后执行操作17 //数据在xhr.responseText18 var resJson = JSON.parse(xhr.responseText)19 cb(resJson);20 }21 };22 xhr.open("post", uri, true);23 xhr.setRequestHeader("DeviceCode", "56");24 xhr.setRequestHeader("Source", "API");25 xhr.setRequestHeader("Authentication", "72b32a1f754ba1c09b3695e0cb6cde7f");26 27 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");28 var dataStr = '';29 for (var i in data) {30 if (dataStr) {31 dataStr += '&';32 }33 dataStr += i + '=' + data[i];34 }35 xhr.send(dataStr);36 }
原生ajax封装，设置header，传上传excel文件，提交表单
1 var ajaxFormFn = function(uri, formObj, cb) { 2 console.log('formObj---', formObj); 3 4 var getXmlHttpRequest = function() { 5 if (window.XMLHttpRequest) { 6 //主流浏览器提供了XMLHttpRequest对象 7 return new XMLHttpRequest(); 8 } else if (window.ActiveXObject) { 9 //低版本的IE浏览器没有提供XMLHttpRequest对象10 //所以必须使用IE浏览器的特定实现ActiveXObject11 return new ActiveXObject("Microsoft.XMLHttpRequest");12 }13 14 };15 var xhr = getXmlHttpRequest();16 xhr.onreadystatechange = function() {17 if (xhr.readyState === 4 && xhr.status === 200) {18 //获取成功后执行操作19 //数据在xhr.responseText20 var resJson = JSON.parse(xhr.responseText)21 cb(resJson);22 }23 };24 xhr.open("post", uri, true);25 xhr.setRequestHeader("DeviceCode", "56");26 xhr.setRequestHeader("Source", "API");27 xhr.setRequestHeader("Authentication", "72b32a1f754ba1c09b3695e0cb6cde7f");28 29 xhr.onload = function() {30 console.log("上传完成!");31 };32 33 xhr.send(formObj);34 }
导入的实现部分是后端的事情。
我们这里需要提交一个excel文件，使用ajax。并且需要设置ajax的头信息。所以我们不使用封装好的插件。用原生js来封装一个ajaxFormFn() 方法。提交时候的代码：
if (document.getElementById("J_ImportFile").files.length > 0) { var fileObj = document.getElementById("J_ImportFile").files[0]; // 获取文件对象 // FormData 对象 var form = new FormData(); form.append("file", fileObj); // 文件对象 util.ajaxFormFn(uri, form, self.importFile); Elems.importLoad = layer.msg('正在导入...', { icon: 16 }); } else { layer.msg('请先选择要导入的excel文件'); }
这里用到两个对象：
第一个对象：FormData第二个对象：XMLHttpRequest目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这两个对象，但IE9尚未支持 FormData 对象，还在用IE6 ? 只能仰天长叹....
有了这两个对象，我们可以真正的实现Ajax方式上传文件。
jQuery的ajax提交formData：（两个false设置是重点）
/** 传formData **/ajaxFormFn: function(uri, formData, cb) { var self = this; $.ajax({ url: uri, type: 'POST', dataType: 'json', data: formData, /** * 必须false才会避开jQuery对 formdata 的默认处理 * XMLHttpRequest会对 formdata 进行正确的处理 */ processData: false, /** *必须false才会自动加上正确的Content-Type */ contentType: false, beforeSend: function(xhr) { xhr.setRequestHeader('Source', self.headers.Source); xhr.setRequestHeader('Authentication', self.headers.Authentication); } }) .done(cb)},