Native JS encapsulates ajax to transfer json str excel file upload submission form of recommendation

  • 2021-06-29 09:40:52
  • OfStack

Because header information needs to be set before submitting ajax in the project, ajax of jquery cannot be implemented. We encapsulate several commonly used ajax methods by ourselves.

ajax General Packaging for jQuery


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");
});
} 

Native ajax encapsulation, set header, pass json


var ajaxHdFn = function(uri, data, cb) {
var getXmlHttpRequest = function() {
if (window.XMLHttpRequest) {
// Mainstream browsers provide XMLHttpRequest object 
return new XMLHttpRequest();
} else if (window.ActiveXObject) {
// Low version IE Browser not available XMLHttpRequest object 
// So you have to use IE Specific implementation of browsers ActiveXObject
return new ActiveXObject("Microsoft.XMLHttpRequest");
}
};
var xhr = getXmlHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// Perform operation after success 
// Data in 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);
} 

Native ajax encapsulation, set header, pass json


var ajaxStrFn = function(uri, data, cb) {
var getXmlHttpRequest = function() {
if (window.XMLHttpRequest) {
// Mainstream browsers provide XMLHttpRequest object 
return new XMLHttpRequest();
} else if (window.ActiveXObject) {
// Low version IE Browser not available XMLHttpRequest object 
// So you have to use IE Specific implementation of browsers ActiveXObject
return new ActiveXObject("Microsoft.XMLHttpRequest");
}
};
var xhr = getXmlHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// Perform operation after success 
// Data in 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);
} 

Native ajax package, set header, upload excel file, submit form


var ajaxFormFn = function(uri, formObj, cb) {
console.log('formObj---', formObj);
var getXmlHttpRequest = function() {
if (window.XMLHttpRequest) {
// Mainstream browsers provide XMLHttpRequest object 
return new XMLHttpRequest();
} else if (window.ActiveXObject) {
// Low version IE Browser not available XMLHttpRequest object 
// So you have to use IE Specific implementation of browsers ActiveXObject
return new ActiveXObject("Microsoft.XMLHttpRequest");
}
};
var xhr = getXmlHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// Perform operation after success 
// Data in 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(" Upload complete !");
};
xhr.send(formObj);
} 

Imported implementations are part of the back-end business.

We need to submit an excel file here, using ajax.

You also need to set the header information for ajax.So we don't use encapsulated plugins.Encapsulate an ajaxFormFn() method with native js.

Two objects are used here:

First object: FormData

Second object: XMLHttpRequest

Currently, the new versions of Firefox and Chrome support HTML5 browsers perfectly, but IE9 has not yet supported FormData objects, and is still using IE6 ?You can only look up to the sky and sigh...

With these two objects, we can really upload files in Ajax mode.


Related articles: