Send and request form via Ajax - (pure Javascript)

Question

I’m a beginner in Javascript and I started to see Ajax.
I made an example where I have a form that sends a name to a php file. This php receives via post and writes the information in a txt.
I am using Ajax to send the data and trying to request them to appear in a div, without refresh obviously, however, I am unable to order after sending.

Follows the codes

HTML

    <form id="form" method="post" action="">
        <label for="name">Nome:</label>
        <input type="text" name="name" id="name">
        <input type="submit" id="submit" name="submit" value="Enviar">
    </form>
    <div id="result"></div>

PHP

    <?php
        $name = "<p>" . $_POST["name"] . "</p>" . PHP_EOL;
        $file = fopen("names.txt", "a");
        fwrite($file, $name);
        fclose($file);
    ?>

Javascript

    var btn = document.getElementById("submit"),
              result = document.getElementById("result"),
              ajax = new XMLHttpRequest();

    function sendData() {
        "use strict";
        var name = document.getElementById("name").value;
        ajax.open("POST", "_names.php", true);
        ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        ajax.send("name=" + name);
    }

    function loadData() {
        "use strict";
        ajax.onreadystatechange = function () {
            if (ajax.readyState === 4 && ajax.status === 200) {
                result.innerHTML = ajax.responseText;
            }
        };
        ajax.open("POST", "names.txt", true);
        ajax.send(null);
    }

    window.onload = loadData();

    btn.onclick = function () {
        "use strict";
        sendData();
        return false;
    };

Answer 1

There are two problems:

1) At each sendData it is necessary to call loadData to check the data.

2) Each request must have a new Ajax constructor (class called)

To solve the first problem should be used onreadystatechange in function sendData, within the if we should use ajax.readyState to check if the load is complete (remember ajax is asynchronous).

To solve the second problem you must call a new XMLHttpRequest with each request.

Try this:

var btn = document.getElementById("submit"),
          result = document.getElementById("result");

function sendData() {
    "use strict";

    var ajax = new XMLHttpRequest();
    var name = document.getElementById("name").value;
    ajax.open("POST", "_names.php", true);
    ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    ajax.onreadystatechange = function () {
        if (ajax.readyState === 4 && ajax.status === 200) {
            loadData(); //Recarrega dados após o envio dos dados
        }
    };
    ajax.send("name=" + name);
}

function loadData() {
    "use strict";

    var ajax = new XMLHttpRequest();
    ajax.onreadystatechange = function () {
        if (ajax.readyState === 4 && ajax.status === 200) {
            result.innerHTML = ajax.responseText;
        }
    };
    ajax.open("POST", "names.txt", true);
    ajax.send(null);
}

window.onload = loadData;

btn.onclick = function () {
    "use strict";
    sendData();
    return false;
};

Failed to add } at the end of this function:

function sendData() {
        "use strict";
        var name = document.getElementById("name").value;
        ajax.open("POST", "_names.php", true);
        ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        ajax.send("name=" + name);

And change the <input type=submit> for <input type=button>, why if you use Ubmit the page will redirect and the ajam will be canceled