Ajax - JavaScript: Novice to Ninja - page 465

FormData
One of the most useful additions to the XMLHttpRequest2 specification is the FormData
interface. This is supported in all modern browsers and Internet Explorer from version 10
onwards, and makes it much easier to submit information in forms using Ajax.
A FormData instance is created using a constructor function:
data = new FormData();
If a form is passed to this constructor function as an argument, the form data instance
will serialize all the data automatically, ready to be sent using Ajax. This is what the
makeHero() function did in our last example, but it tooltook a lot of repetitive lines of
code. The FormData interface helps to reduce the amount of code needed when submitting
forms.
We can use this to cut down the size of our hero page. Edit the scripts.js file so that it con-
tains the following:
scripts.js (excerpt)
var form = document.forms.hero;
form.addEventListener("submit", submitHero, false);
function submitHero(event) {
event.preventDefault();
var form = event.target;
var data = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.open("POST", form.action, true);
xhr.setRequestHeader("Content-Type", "application/
json");
xhr.onreadystatechange = function(){
if (xhr.readyState === 4 && xhr.status === 201) {
console.log(xhr.responseText);
}
};