Envoi de formulaires avec JavaScript

<button type="button" onclick="sendData({test:'ok'})">Cliquez ici !</button>

function sendData(data) {
  var XHR = new XMLHttpRequest();
  var urlEncodedData = "";
  var urlEncodedDataPairs = [];
  var name;

  // Transformez l'objet data en un tableau de paires clé/valeur codées URL.
  for(name in data) {
    urlEncodedDataPairs.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
  }

  // Combinez les paires en une seule chaîne de caractères et remplacez tous
  // les espaces codés en % par le caractère'+' ; cela correspond au comportement
  // des soumissions de formulaires de navigateur.
  urlEncodedData = urlEncodedDataPairs.join('&').replace(/%20/g, '+');

  // Définissez ce qui se passe en cas de succès de soumission de données
  XHR.addEventListener('load', function(event) {
    alert('Ouais ! Données envoyées et réponse chargée.');
  });

  // Définissez ce qui arrive en cas d'erreur
  XHR.addEventListener('error', function(event) {
    alert('Oups! Quelque chose s\'est mal passé.');
  });

  // Configurez la requête
  XHR.open('POST', 'https://example.com/cors.php');

  // Ajoutez l'en-tête HTTP requise pour requêtes POST de données de formulaire
  XHR.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

  // Finalement, envoyez les données.
  XHR.send(urlEncodedData);
}

<button type="button" onclick="sendData({test:'ok'})">Cliquez ici !</button>

function sendData(data) {
  var XHR = new XMLHttpRequest();
  var FD  = new FormData();

  // Mettez les données dans l'objet FormData
  for(name in data) {
    FD.append(name, data[name]);
  }

  // Définissez ce qui se passe si la soumission s'est opérée avec succès
  XHR.addEventListener('load', function(event) {
    alert('Ouais ! Données envoyées et réponse chargée.');
  });

  // Definissez ce qui se passe en cas d'erreur
  XHR.addEventListener('error', function(event) {
    alert('Oups! Quelque chose s\'est mal passé.');
  });

  // Configurez la requête
  XHR.open('POST', 'https://example.com/cors.php');

  // Expédiez l'objet FormData ; les en-têtes HTTP sont automatiquement définies
  XHR.send(FD);
}

<form id="myForm">
  <label for="myName">Dites-moi votre nom :</label>
  <input id="myName" name="name" value="John">
  <input type="submit" value="Envoyer !">
</form>

window.addEventListener("load", function () {
  function sendData() {
    var XHR = new XMLHttpRequest();

    // Liez l'objet FormData et l'élément form
    var FD = new FormData(form);

    // Définissez ce qui se passe si la soumission s'est opérée avec succès
    XHR.addEventListener("load", function(event) {
      alert(event.target.responseText);
    });

    // Definissez ce qui se passe en cas d'erreur
    XHR.addEventListener("error", function(event) {
      alert('Oups! Quelque chose s\'est mal passé.');
    });

    // Configurez la requête
    XHR.open("POST", "https://example.com/cors.php");

    // Les données envoyées sont ce que l'utilisateur a mis dans le formulaire
    XHR.send(FD);
  }

  // Accédez à l'élément form …
  var form = document.getElementById("myForm");

  // … et prenez en charge l'événement submit.
  form.addEventListener("submit", function (event) {
    event.preventDefault();

    sendData();
  });
});

<button onclick="sendData({test:'ok'})">Cliquez ici !</button>

// Créer l'iFrame servant à envoyer les données
var iframe = document.createElement("iframe");
iframe.name = "myTarget";

// Puis, attachez l'iFrame au document principal
window.addEventListener("load", function () {
  iframe.style.display = "none";
  document.body.appendChild(iframe);
});

// Voici la fonction réellement utilisée pour expédier les données
// Elle prend un paramètre, qui est un objet chargé des paires clé/valeurs.
function sendData(data) {
  var name,
      form = document.createElement("form"),
      node = document.createElement("input");

  // Définir ce qui se passe quand la réponse est chargée
  iframe.addEventListener("load", function () {
    alert("Ouais ! Données envoyés.");
  });

  form.action = "http://www.cs.tut.fi/cgi-bin/run/~jkorpela/echo.cgi";
  form.target = iframe.name;

  for(name in data) {
    node.name  = name;
    node.value = data[name].toString();
    form.appendChild(node.cloneNode());
  }

  // Pour être envoyé, le formulaire nécessite d'être attaché au document principal.
  form.style.display = "none";
  document.body.appendChild(form);

  form.submit();

  // Une fois le formulaire envoyé, le supprimer.
  document.body.removeChild(form);
}

<form id="myForm">
  <p>
    <label for="i1">Données textuelles :</label>
    <input id="i1" name="myText" value="Quelques données textuelles">
  </p>
  <p>
    <label for="i2">Fichier de données :</label>
    <input id="i2" name="myFile" type="file">
  </p>
  <button>Envoyer !</button>
</form>

// Comme nous voulons avoir accès à un nœud DOM,
// nous initialisons le script au chargement de la page.
window.addEventListener('load', function () {

  // Ces variables s'utilisent pour stocker les données du formulaire
  var text = document.getElementById("i1");
  var file = {
        dom    : document.getElementById("i2"),
        binary : null
      };

  // Nous utilisons l'API de FileReader pour accéder au contenu du fichier
  var reader = new FileReader();

  // Comme FileReader est asynchrone, stockons son résulata
  // quand il a fini de lire le fichier
  reader.addEventListener("load", function () {
    file.binary = reader.result;
  });

  // Au chargement de la page, si un fichier est déjà choisi, lisons‑le
  if(file.dom.files[0]) {
    reader.readAsBinaryString(file.dom.files[0]);
  }

  // Sinon, lisons le fichier une fois que l'utilisateur l'a sélectionné
  file.dom.addEventListener("change", function () {
    if(reader.readyState === FileReader.LOADING) {
      reader.abort();
    }

    reader.readAsBinaryString(file.dom.files[0]);
  });

  // sendData est notre fonction principale
  function sendData() {
    // S'il y a un fichier sélectionné, attendre sa lecture
    // Sinon, retarder l'exécution de la fonction
    if(!file.binary && file.dom.files.length > 0) {
      setTimeout(sendData, 10);
      return;
    }

    // Pour construire notre requête de données de formulaire en plusieurs parties
    // nous avons besoin d'une instance de XMLHttpRequest
    var XHR = new XMLHttpRequest();

    // Nous avons besoin d'un séparateur pour définir chaque partie de la requête
    var boundary = "blob";

    // Stockons le corps de la requête dans une chaîne littérale
    var data = "";

    // Ainsi, si l'utilisateur a sélectionné un fichier
    if (file.dom.files[0]) {
      // Lancer une nouvelle partie de la requête du corps
      data += "--" + boundary + "\r\n";

      // Décrivons là comme étant des données du formulaire
      data += 'content-disposition: form-data; '
      // Définissons le nom des données du formulaire
            + 'name="'         + file.dom.name          + '"; '
      // Fournissons le vrai nom du fichier
            + 'filename="'     + file.dom.files[0].name + '"\r\n';
      // et le type MIME du fichier
      data += 'Content-Type: ' + file.dom.files[0].type + '\r\n';

      // Il y a une ligne vide entre les métadonnées et les données
      data += '\r\n';

      // Ajoutons les données binaires à la requête du corps
      data += file.binary + '\r\n';
    }

    // C'est plus simple pour les données textuelles
    // Démarrons une nouvelle partie dans notre requête du corps
    data += "--" + boundary + "\r\n";

    // Disons que ce sont des données de formulaire et nommons les
    data += 'content-disposition: form-data; name="' + text.name + '"\r\n';
    // Il y a une ligne vide entre les métadonnées et les données
    data += '\r\n';

    // Ajoutons les données textuelles à la requête du corps
    data += text.value + "\r\n";

    // Ceci fait, "fermons" la requête du corps
    data += "--" + boundary + "--";

    // Définissons ce qui arrive en cas de succès pour la soumission des données
    XHR.addEventListener('load', function(event) {
      alert('Ouais ! Données expédiées et réponse chargée.');
    });

    // Définissons ce qui se passe en cas d'eerreur
    XHR.addEventListener('error', function(event) {
      alert('Oups! Quelque chose s\'est mal passé.');
    });

    // Configurons la requête
    XHR.open('POST', 'https://example.com/cors.php');

    // Ajoutons l'en-tête requise pour gèrer la requête POST des données
    // de formulaire en plusieurs parties
    XHR.setRequestHeader('Content-Type','multipart/form-data; boundary=' + boundary);

    // et finalement, expédions les données.
    XHR.send(data);
  }

  // Accéder au formulaire …
  var form = document.getElementById("myForm");

  // … pour prendre en charge l'événement soumission
  form.addEventListener('submit', function (event) {
    event.preventDefault();
    sendData();
  });
});