Native JS encapsulated Ajax: Json,str,excel File Upload form submission

Since the header information needs to be set in the project before Ajax is submitted, the AJAX implementation of jquery does not, and we encapsulate several common Ajax methods ourselves.

jquery's ajax generic package

var function (URI, data, CB) {  $.ajax ({      Url:uri,            ' POST ', ' json ',      data:data,    })    . Done (CB)    . Fail (function() {      console.log ("error");    })    . Always (function() {      Console.log ("complete");    });

Native Ajax package, set header, pass JSON

1 varAJAXHDFN =function(URI, data, CB) {2   varGetxmlhttprequest =function() {3     if(window. XMLHttpRequest) {4       //XMLHttpRequest objects are available in mainstream browsers5       return NewXMLHttpRequest ();6}Else if(window. ActiveXObject) {7       //the XMLHttpRequest object is not available in the lower version of IE browser8       //so you must use the specific implementation of IE browser ActiveXObject9       return NewActiveXObject ("Microsoft.xmlhttprequest");Ten     } One  A   }; -   varXHR =getxmlhttprequest (); -Xhr.onreadystatechange =function() { the     if(Xhr.readystate = = = 4 && xhr.status = = 200) { -       //take action after getting successful -       //data in Xhr.responsetext -       varResJson =json.parse (Xhr.responsetext) + CB (ResJson); -     } +   }; AXhr.open ("Post", Uri,true); atXhr.setrequestheader ("Devicecode", "56"); -Xhr.setrequestheader ("Source", "API"); -Xhr.setrequestheader ("Authentication", "72b32a1f754ba1c09b3695e0cb6cde7f"); -  -Xhr.setrequestheader ("Content-type", "Application/json"); -   varDatastr =json.stringify (data); in xhr.send (DATASTR); -}

Native Ajax package, set header, pass JSON

1 varAJAXSTRFN =function(URI, data, CB) {2   varGetxmlhttprequest =function() {3     if(window. XMLHttpRequest) {4       //XMLHttpRequest objects are available in mainstream browsers5       return NewXMLHttpRequest ();6}Else if(window. ActiveXObject) {7       //the XMLHttpRequest object is not available in the lower version of IE browser8       //so you must use the specific implementation of IE browser ActiveXObject9       return NewActiveXObject ("Microsoft.xmlhttprequest");Ten     } One  A   }; -   varXHR =getxmlhttprequest (); -Xhr.onreadystatechange =function() { the     if(Xhr.readystate = = = 4 && xhr.status = = 200) { -       //take action after getting successful -       //data in Xhr.responsetext -       varResJson =json.parse (Xhr.responsetext) + CB (ResJson); -     } +   }; AXhr.open ("Post", Uri,true); atXhr.setrequestheader ("Devicecode", "56"); -Xhr.setrequestheader ("Source", "API"); -Xhr.setrequestheader ("Authentication", "72b32a1f754ba1c09b3695e0cb6cde7f"); -  -Xhr.setrequestheader ("Content-type", "Application/x-www-form-urlencoded;charset=utf-8"); -   varDatastr = ' '; in    for(varIinchdata) { -     if(datastr) { toDatastr + = ' & '; +     } -Datastr + = i + ' = ' +Data[i]; the   } * xhr.send (DATASTR); $}

native Ajax package, set header, upload Excel file, submit form

1 varAJAXFORMFN =function(URI, Formobj, CB) {2Console.log (' Formobj---', formobj);3 4   varGetxmlhttprequest =function() {5     if(window. XMLHttpRequest) {6       //XMLHttpRequest objects are available in mainstream browsers7       return NewXMLHttpRequest ();8}Else if(window. ActiveXObject) {9       //the XMLHttpRequest object is not available in the lower version of IE browserTen       //so you must use the specific implementation of IE browser ActiveXObject One       return NewActiveXObject ("Microsoft.xmlhttprequest"); A     } -  -   }; the   varXHR =getxmlhttprequest (); -Xhr.onreadystatechange =function() { -     if(Xhr.readystate = = = 4 && xhr.status = = 200) { -       //take action after getting successful +       //data in Xhr.responsetext -       varResJson =json.parse (Xhr.responsetext) + CB (ResJson); A     } at   }; -Xhr.open ("Post", Uri,true); -Xhr.setrequestheader ("Devicecode", "56"); -Xhr.setrequestheader ("Source", "API"); -Xhr.setrequestheader ("Authentication", "72b32a1f754ba1c09b3695e0cb6cde7f"); -  inXhr.onload =function() { -Console.log ("Upload done!"); to   }; +  - xhr.send (formobj); the}

The implementation part of the import is the back-end thing.
We need to submit an Excel file here, using Ajax.
And you need to set the AJAX header information. So we don't use packaged plugins. Use native JS to encapsulate a AJAXFORMFN () method.

Two objects are used here:
First object: FormData
Second object: XMLHttpRequest

Currently the new version of Firefox and Chrome and other support HTML5 browser perfect support these two objects, but IE9 has not supported FormData objects, still using IE6? Can only be a deep sigh ....

With these two objects, we can actually upload the file in Ajax mode.

Native JS encapsulated Ajax: Json,str,excel File Upload form submission