Native JS package ajax to transmit json, str, excel File Upload and submission form (recommended), ajaxjson

Native JS package ajax to transmit json, str, excel File Upload and submission form (recommended), ajaxjson

Because the project needs to set the header information before submitting ajax, jquery's ajax implementation cannot be achieved. We encapsulate several common ajax methods by ourselves.

JQuery ajax common Encapsulation

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, and pass json

Var ajaxHdFn = function (uri, data, cb) {var getXmlHttpRequest = function () {if (window. XMLHttpRequest) {// the XMLHttpRequest object return new XMLHttpRequest ();} else if (window. activeXObject) {// The earlier version of IE does not provide the XMLHttpRequest object // you must use the specific implementation of the IE browser ActiveXObjectreturn new ActiveXObject ("Microsoft. XMLHttpRequest ") ;}}; var xhr = getXmlHttpRequest (); xhr. onreadystatechange = function () {if (xhr. readyState === 4 & xhr. status = 200) {// after obtaining the information, perform the operation // the data is stored in 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", "72b32a1f754ba1c09b4255e0cb6cde7f"); xhr. setRequestHeader ("Content-Type", "application/json"); var dataStr = JSON. stringify (data); xhr. send (dataStr );}

Native ajax encapsulation, set header, and pass json

Var ajaxStrFn = function (uri, data, cb) {var getXmlHttpRequest = function () {if (window. XMLHttpRequest) {// the XMLHttpRequest object return new XMLHttpRequest ();} else if (window. activeXObject) {// The earlier version of IE does not provide the XMLHttpRequest object // you must use the specific implementation of the IE browser ActiveXObjectreturn new ActiveXObject ("Microsoft. XMLHttpRequest ") ;}}; var xhr = getXmlHttpRequest (); xhr. onreadystatechange = function () {if (xhr. readyState === 4 & xhr. status = 200) {// after obtaining the information, perform the operation // the data is stored in 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", "72b32a1f754ba1c09b4255e0cb6cde7f"); xhr. setRequestHeader ("Content-Type", "application/x-www-form-urlencoded; charset = UTF-8"); var dataStr = ''; (var I in data) {if (dataStr) {dataStr + = '&';} dataStr + = I + '=' + data [I];} xhr. send (dataStr );}

Native ajax encapsulation, setting headers, uploading excel files, and submitting forms

Var ajaxFormFn = function (uri, formObj, cb) {console. log ('formobj --- ', formObj); var getXmlHttpRequest = function () {if (window. XMLHttpRequest) {// the XMLHttpRequest object return new XMLHttpRequest ();} else if (window. activeXObject) {// The earlier version of IE does not provide the XMLHttpRequest object // you must use the specific implementation of the IE browser ActiveXObjectreturn new ActiveXObject ("Microsoft. XMLHttpRequest ") ;}}; var xhr = getXmlHttpRequest (); xhr. onreadystatechang E = function () {if (xhr. readyState === 4 & xhr. status = 200) {// after obtaining the information, perform the operation // the data is stored in 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", "72b32a1f754ba1c09b4255e0cb6cde7f"); xhr. onload = function () {console. log ("Upload complete! ") ;}; Xhr. send (formObj );}

The implementation of import is the back-end.

Here we need to submit an excel file using ajax.

Set the ajax header information. Therefore, we do not use encapsulated plug-ins. Use native js to encapsulate an ajaxFormFn () method.

Two objects are used here:

First object: FormData

Second object: XMLHttpRequest

Currently, new versions of Firefox and Chrome support HTML5 browsers perfectly support these two objects, but IE9 does not yet support FormData objects, and IE6 is still in use? You can only sigh in the sky ....

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

The above section describes the native JS package for ajax to transfer json, str, and excel file upload and submission forms (recommended). I hope it will be helpful to you, if you have any questions, please leave a message and the editor will reply to you in time. Thank you very much for your support for the help House website!