PHP Javascript form formData 70: complete using ajax (XMLHttpRequest)

    <form method="post" action="process.php" enctype="multipart/form-data" >

        Firstname: <input type="text" name="firstname" />
        <br />

        Lastname: <input type="text" name="lastname" />
        <br />

        Description: <textarea name="description" rows="10" cols="50" ></textarea>
        <br />

        Gender:
        <input type="radio" name="gender" value="male" checked /> Male
        <input type="radio" name="gender" value="female" /> Female
        <br />

        Programming Language (single):
        <select name="language" >
            <option value="c" >C</option>
            <option value="c++" >C++</option>
            <option value="java" >Java</option>
            <option value="javascript" selected >Javascript</option>
            <option value="php" >PHP</option>
        </select>
        <br />

        Programming Languages (multiple): (hold ctrl + click item)
        <select name="languages[]" multiple >
            <option value="c" >C</option>
            <option value="c++" >C++</option>
            <option value="java" >Java</option>
            <option value="javascript" selected >Javascript</option>
            <option value="php" selected >PHP</option>
        </select>
        <br />

        Hobby (single): <input type="checkbox" name="hobby" value="studying" /> Studying
        <br />

        Hobbies (multiple):
        <input type="checkbox" name="hobbies[]" value="studying" /> Studying
        <input type="checkbox" name="hobbies[]" value="reading" checked /> Reading
        <input type="checkbox" name="hobbies[]" value="writing" /> Writing
        <input type="checkbox" name="hobbies[]" value="sleeping" checked /> Sleeping
        <br />

        File Upload: <input type="file" name="upload" /><br />
        Preview: <img src="#" />
        <br />

        <hr />

        <input type="submit" value="Submit" />

    <hr />

    <div id="output"></div>

    <script>

        /* submit form */
        document.querySelector( "form" ).addEventListener( "submit", function (event) {

            event.preventDefault(); // return false


            var formHTML = event.target; // this

            console.log( formHTML ); // formHTML element


            // https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects
            var formData = new FormData( formHTML );

            console.log( formData );


            // https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
            // https://www.w3schools.com/xml/xml_http.asp
            // https://www.w3schools.com/js/js_ajax_http.asp

            /* AJAX request */
            ajax( formHTML, formData, "#output" ); // ajax( form, data destination )

        });

    </script>

    <script>

        function ajax( form, data, destination )
        {

            if (window.XMLHttpRequest)
            {
                var xhr = new XMLHttpRequest(); /* code for modern browsers */
            }
            else
            {
                var xhr = new ActiveXObject("Microsoft.XMLHTTP"); /* code for old IE browsers */
            }

            xhr.open( form.method, form.action, true ); // ( "post", "process.php", true )
            xhr.send( data );

            xhr.onreadystatechange = function () {
                if ( this.readyState == 4 && this.status == 200 )
                {
                    document.querySelector( destination ).innerHTML = this.responseText;
                }
            };

        }

    </script>

    <script>

        /* preview image */
        document.querySelector( "input[type='file']" ).addEventListener( "change", function () {

            var preview = document.querySelector( "img" );
            var file    = document.querySelector( "input[type='file']" ).files[0];
            var reader  = new FileReader();

            reader.addEventListener( "load", function () {
                preview.height = 100;
                preview.title  = file.name;
                preview.src    = reader.result;
            }, false );

            if (file)
            {
                reader.readAsDataURL(file);
            }

            console.log( reader );

        } );

    </script>

$data = array(
    "post"  => $_POST,
    "files" => $_FILES
);

echo "<pre>";

var_dump($data);

echo "</pre>";