How to in HTML5: Use the FormData object in XHR2

The other day I had posted on uploading a file using XmlHttpRequest 2 and tracking the progress of the file upload process using the progress event on XHR2 object and the progress tag. Another enhancement added to the XHR2 specification is the introduction of FormData object. Using the FormData object, one can create a set of key-value pairs and send them as form data in a XHR request. The FormData object is passed in the send() method of the XHR object:

 var formObject = new FormData();  
 formObject.append("element_1","Sagar");  
 formObject.append("element_2","Ganatra");  
   
 var xhrObject = new XMLHttpRequest();  
 xhrObject.open("POST","postform.cfm");  
 xhrObject.send(formObject);  

This means that, one need not add the form element to the document and can avoid using hidden input element (type="hidden") to send the additional key-value data to the server for processing.

It is also possible to add additional data to an already existing form in the document and send the form data to the server: 

 var docFormElement = document.getElementById('myForm');  
 var docFormData = new FormData(docFormElement);  
 docFormData.append("product_license","Enterprise");
 var xhrObject = new XMLHttpRequest();  
 xhrObject.open("POST","postform.cfm");  
 xhrObject.send(docFormData);

 <form id="myForm">  
   <input name="product_name" type="text" value="ColdFusion" />  
   <input name="product_codename" type="text" value="Zeus" />  
 </form>  

The FormData constructor takes the form element as an argument and then the append function is used to add another key-value data to the FormData object.

References

Reference: 

Submitting Form using FormData object in HTML5 using XmlHttpRequest Level 2