Ajax requisition

Question

Hello, I have an Ajax code that I don’t understand what’s going on if anyone can help ... I’m not getting xhr.open(method, url); what URL does it set? I have this code and it’s working but I copied want to change some things is my impression or is null? Because it’s working so it can’t be null right? And if it’s not null which URL he’s setting pq wasn’t so for example xhr.open(method, 'whatever.php') or something like that?

window.addEventListener("DOMContentLoaded", function() {

    // get the form elements defined in your form HTML above

    var form = document.getElementById("form");
    var button = document.getElementById("rodar");

    // Success and Error functions for after the form is submitted

function success() { }

function error() { }

    // handle the form submission event

    form.addEventListener("submit", function(ev) {
      ev.preventDefault();
      var data = new FormData(form);
      ajax(form.method, form.action, data, success, error);
    });
  });

  // helper function for sending an AJAX request

  function ajax(method, url, data, success, error) {
    var xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.setRequestHeader("Accept", "application/json");
    xhr.onreadystatechange = function() {
      if (xhr.readyState !== XMLHttpRequest.DONE) return;
      if (xhr.status === 200) {
        success(xhr.response, xhr.responseType);
      } else {
        error(xhr.status, xhr.response, xhr.responseType);
      }
    };
    xhr.send(data);
  }

Answer 1

first, welcome to Stackoverflow :)

The code is simple to notice ...

within an anonymous function of the addEventListener you have 3 functions:

• success
• error
• ajax

the first two do nothing, are just "placeholders", but are called by the function ajax() correctly...

there is a second EventListener that binds the Submit of a form and that’s what he calls the ajax, with

ajax(form.method, form.action, data, success, error);

form.method is what represents usually the method of a <form> form.action is what represents usually the action of a <form>

I mean, augures on the ground there is something like:

var form = document.getElementById("o-meu-formulario");

and HTML has something like:

<form action="/pagina.php" method="get" class="form-example">
    ...
    <button type="submit">Submeter o formulário</button>
</form>

so the code is just fetching form values in HTML...

to see better, you can open the console, and go to "NETWORK", submit the dealer and the call ajax will appear there, if you just want to see by code, change for example

function success() {
    console.log('SUCESSO!');
}

function error(err) { 
    console.log('ERRO!', err);
}

so in the console (F12 in browser) you can see the output of the function...

---

image in the comment: