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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.