Sauter les bases, je connais PHP
La base
Le JavaScript côté navigateur
Les librairies incontournables
Pour aller plus loin
Cas Pratiques (ES2015)

Dans ce chapitre nous allons voir comment faire de l'Ajax en JavaScript. L'Ajax permet d'appeller une page en JavaScript et de récupérer les informations afin d'effectuer un traitement particulier.

L'objet XMLHttpRequest

Le point d'entré de l'Ajax est l'utilisation d'un objet spécifique : XMLHttpRequest. Malheureusement cet objet n'est pas disponible dans tous les navigateur et il est donc conseillé d'utiliser une fonction pour générer l'objet dont on va avoir besoin.

var getHttpRequest = function () {
  var httpRequest = false;

  if (window.XMLHttpRequest) { // Mozilla, Safari,...
    httpRequest = new XMLHttpRequest();
    if (httpRequest.overrideMimeType) {
      httpRequest.overrideMimeType('text/xml');
    }
  }
  else if (window.ActiveXObject) { // IE
    try {
      httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e) {
      try {
        httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
      }
      catch (e) {}
    }
  }

  if (!httpRequest) {
    alert('Abandon :( Impossible de créer une instance XMLHTTP');
    return false;
  }

  return httpRequest
}

Ensuite pour appeller une page il suffit d'utiliser les méthodes open() et send()

var xhr = getHttpRequest()
xhr.open('GET', 'http://localhost/demo', true)
// On envoit un header pour indiquer au serveur que la page est appellée en Ajax
xhr.setRequestHeader('X-Requested-With', 'xmlhttprequest')
// On lance la requête
xhr.send()

Pour suivre l'évolution de l'appel on utilisera un évènement onreadystatechange.

xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
        xhr.responseText // contient le résultat de la page
    } else {
        // Le serveur a renvoyé un status d'erreur
    }
  }
}

Poster des informations

Si vous souhaitez soumettre des informations vous pouvez utiliser l'objet FormData.

var data = new FormData() 
data.append('name', 'John Doe')
data.append('email, 'contact@local.dev')

Mais il est aussi possible de récupérer directement les données d'un formulaire.

var form = document.querySelector('#form')
var data = new FormData(form) 

Enfin lorsque vous souhaitez soumettre les informations vous pouvez passer cet objet dans la méthode send()

var xhr = getHttpRequest()
xhr.open('POST', 'http://localhost/demo', true)
xhr.setRequestHeader('X-Requested-With', 'xmlhttprequest')
xhr.send(data)

Ajax + JSON

Le problème lorsque l'on appelle la page est que l'on récupère les informations sous forme de chaine de caractères. Le problème est que parfois on souhaite transmettre des informations plus complexes. Dans ce cas là on utilisera la format JSON. Ce format à l'avantage d'être facilement compréhensible en JavaScript.

var test = 'UN TRUC EN JSON'
var items = JSON.parse(test)

Limitation et CORS

Attention, on ne peut pas appeler une page provenant d'un domaine différent. Si on souhaite appeller une page différente de la page en cours, il faudra que le serveur dispose du CORS.