AJAX + XMLHttpRequest2
HTML5 - connectivité

Formation HTML5 : AJAX + XMLHttpRequest2

  1. Retour sur AJAX et XMLHttpRequest (retour vers 2005 !)
  2. Limitation XMLHttpRequest
  3. Chargement de fichier binaires
  4. ArrayBuffer (Typed Arrays) en Javascript
  5. Téléversement de formulaire et fichiers
  6. CORS (Cross-origin resource sharing)

Ajax et XMLHTTPRequest 1

Qu'est-ce que XMLHttpRequest ?

XMLHttpRequest est un composant initialement créé par Microsoft, servant à effectuer une requête à un serveur distant.

La réponse de cette requête peut être lue sous forme :

Les états de la requête sont accessibles par la propriété readyState

La réponse HTTP est accessible par les propriétés status (le code, ex:200) et statusText (le message textuel).

La propriété onreadystatechange contiendra une référence vers la fonction ou la méthode à appeler lorsque l'état de la requête change.

Le composant rend accessible les méthodes suivantes :

XMLHTTPRequest, création de l'objet

À partir de IE7 nativement


   var xmlhttp = new XMLHttpRequest();
				

XMLHTTPRequest, création de l'appel

Deux façons d'effectuer une requête, asynchrone et synchrone

Manière synchrone, le javascript après l'appel ne sera exécuté que lorsque la requête sera terminée.


  var xmlHttp = getNewXMLHTTP();
  xmlHttp.open("GET", "/ajax/rss-a-html.xsl", false);
  xmlHttp.send(null);

La méthode open reçoit en paramètre le type de requête (GET, POST, TRACE, PUT, HEAD) et le url de celle-ci et si la requête est synchrone ou non.

La méthode send reçoit en paramètre le querystring pour une requête GET ou HEAD ou le corps de la requête (qui peut être du XML) pour POST ou PUT.

Dans notre cas, nous envoyons rien, donc null.

XMLHTTPRequest, création de l'appel

La manière asynchrone utilise le paramètre true, nous devons définir une fonction qui servira de procédure de rappel lorsque le fichier sera chargé.



  var xmlHttp = getNewXMLHTTP();
  xmlHttp.open("GET", "/blogue/rss.php", true);
  xmlHttp.onreadystatechange=rsstestversion2;
  xmlHttp.send(null);

function rsstestversion2() {
	if (xmlHttp.readyState==4) {
		transform(xmlHttp.responseXML);
	}
}

La fonction rsstestversion2 sera exécutée à chaque fois que l'état de la requête sera modifiée. Celle-ci peut avoir 5 états :

0: Non initialisé
La méthode open n'a pas encore été appelée
1: Chargement
Le premier appel HTTP est en cours
2: Chargé
Les entêtes HTTP ont été reçues
3: Interactif
Le fichier est en cours de chargement
4: Complété
Le chargement de la ressource est complétée

XMLHTTPRequest, gestion de l'appel

Nous attendons évidemment l'état 4 (Complété).

Nous pourrions vérifier lors de l'état 2 (chargé) si la réponse HTTP est bien un 200 OK, lancer une exception puis avorter la requête avec la méthode abort si ce n'est pas le cas.

Voici pour terminer quelques ressources utiles pour effectuer cette étape:

XMLHTTPRequest 2

Transfert de fichiers binaires
xhr.responseType = 'arraybuffer';
Envoi de formulaire
FormData

Chargement de fichiers binaires avec XMLHttpRequest 2

function loadSound(url) { var request = new XMLHttpRequest(); request.open('GET', url, true); request.responseType = 'arraybuffer'; request.onload = function() { context.decodeAudioData(request.response, function(buffer) { playSound(buffer, 0); }, onError); } request.send(); }

Array typés en Javascript

var buffer = new ArrayBuffer(16); var int32View = new Int32Array(buffer); var int16View = new Int16Array(buffer); [0,2,4,8] [0,0,2,0,4,0,8]
Exemple ArrayBuffer et Typed Arrays (source : https://developer.mozilla.org/en-US/docs/JavaScript_typed_arrays)

FormData

var formData = new FormData(); formData.append('name', files[0].name); formData.append('file', files[0]);

Progrès du téléchargement ou téléversement

var xh2 = new XMLHttpRequest(); xhr.upload.onprogress = function (event) { if (event.lengthComputable) { var complete = (event.loaded / event.total * 100 | 0); progress.value = progress.innerHTML = complete; } };

CORS : Utiliser Ajax Cross Site

res.writeHead(200, {"Context-Type" : "text/plain", "Access-Control-Allow-Origin" : "*", "Access-Control-Allow-Methods" : "POST, GET, PUT, DELETE, OPTIONS", "Access-Control-Allow-Credentials" : false, "Access-Control-Max-Age" : '86400', "Access-Control-Allow-Headers" : "Content-Type, Accept" });
Ajout des headers CORS en node.js