• Continuer sur Javascript
• Consolider les acquis

• D'habitude, sur une page web, le fonctionnement est asynchrone : l'utilisateur clique, les infos sont envoyées par le navigateur puis traitées par le serveur web. Des infos sont renvoyées par le serveur web et affichées par le navigateur.
• Avec Ajax, des infos sont envoyées et traitées "en direct".
• Un exemple? Sur un formulaire classique, vous remplissez les champs, cliquez sur le bouton et recevez des infos en retour (pour savoir si vous avez bien rempli le formulaire, par exemple). Avec Ajax, les infos sont envoyées au fur et à mesure que vous remplissez les champs, sans autre intervention de l'utilisateur.
• Pour cela, il vous faudra donc du HTML (et du CSS pour que ce soit joli), du javascript (et l'objet XMLHttpRequest), maîtriser le DOM et connaître XML.

• XML reprend le même objectif que celui qu'on a vu pour JSON : stocker des données dans un fichier. Sauf qu'il utilise pour cela une syntaxe bien précise, avec notamment des balises (comme HTML). Ca donne quelque chose comme ça (en l'indentant, ce sera tout de suite plus lisible... comme HTML) :

  `<?xml version="1.0"?>`
   `<contact-info>`
   `<name>Tanmay Patil</name>`
   `<company>TutorialsPoint</company>`
   `<phone>(011) 123-4567</phone>`
  `</contact-info>`
  

• Avec jQuery, bien sûr!
• L'API qui va bien

• La page wikipedia
• Soudain, tout devient plus clair
• XML sur Openclassroom
• XML en détail
• Présentation avec des bouts de PHP à ignorer poliment
• Une autre présentation avec du PHP
• Une petite présentation d'Ajax

Vous voyez la petite présentation d'Ajax juste au-dessus? Tentez le challenge à la fin de celle-ci.

• Avant de commencer : ExpressJs
• Avant de commencer : ExpressJS sur OC
• Pour récupérer les sources de l'exercice

• Sources de l'exercice

Développez la fonction getMiddle(input_text) :

• Si input_text contient un nombre impair d'éléments, la fonction renvoie le caractère du milieu.
• Sinon, elle renvoie les deux caractères du milieu.

Exemples:

• getMiddle("test") renvoie "es"
• getMiddle("testing") renvoie "t"
• getMiddle("middle") renvoie "dd"
• getMiddle("A") renvoie "A"

function traiteResultat(){
	console.log("resultat", this.responseText);
	var data = JSON.parse(this.responseText);
	console.log('Nom 0', data.participants[0].nom);
}

var requete = new XMLHttpRequest();
requete.onload = traiteResultat;

requete.open("get", "users.txt", true);
requete.send();


{
	"participants":[
		{
			"id":1,
			"nom":"Durant",
			"prenom":"Lea"
		},
		{
			"id":2,
			"nom":"Dupond",
			"prenom":"Joe"
		},
		{
			"id":3,
			"nom":"Martin",
			"prenom":"Jean"
		}
	]
}

⚠️ Une étrangeté est à noter dans ce 1er exemple très basique : la référence à this.responseText`` dans la fonction traiteResultat()`.

En fait, écrit de cette manière, traiteResultat s'éxecute dans le contexte ( aussi appelé scope )ππ de l'objet requete et non pas dans le contexte "global" du script.

En effet, si on essaye de logger this dans la fonction, on s'aperçoit que this renvoie en fait à l'objet XMLHttpRequest...

function traiteResultat(){
	console.log("scope", this);
	// ...
}

C'est une des particularités du javascript 5 : le scope d'une fonction n'est pas forcèment celui dans lequel on déclare la fonction.

Ici le scope dans lequel s'éxecute la fonction après réception des données, et celui de l'objet requete.

Oui et alors ? me direz vous... Et bien le problème, est que, dans l'état, on ne pourra pas appeler les méthodes déclarées dans le contexte globale depuis la fonction traiteResultat()...

La solution ?

1. Il existe une "obscure" fonction bind() en javascript, qui permet de choisir le contexte dans lequel s'éxecutera une fonction.

2. on récuperera la valeur de responseText à partir de l'event, ou plutôt le target de l'event.

/* la déclaration du paramètre event est facultative, mais son utilisation nous permet de récupérer
la référence de l'objet XMLHttpRequest, dans la mesure où c'est lui qui émet l'event,
et que par conséquent, c'est lui le target.
*/

function traiteResultat(event){
	console.log("resultat", event.target.responseText);
	var data = JSON.parse(event.target.responseText);
	console.log('Nom 0', data.participants[0].nom);
}

var requete = new XMLHttpRequest();

/* l'ajout de bind(this) permet de définir que l'on veut que
la fonction traiteResultat soit
 executée dans le contexte courant*/
requete.onload = traiteResultat.bind(this);

requete.open("get", "users.txt", true);
requete.send();

Ancienne méthode IE9& -

cf Ajax - OpenClassRoom

function onLoadingState(event){
	console.log('data');
	if (requete.readyState === requete.DONE && requete.status === 200) {
		console.log('resultat', requete.responseText);
		var data = JSON.parse(requete.responseText);
		console.log('Nom 0', data.participants[0].nom);
	}
}

var requete = new XMLHttpRequest();
requete.addEventListener('readystatechange', onLoadingState );

requete.open("get", "users.txt", true);
requete.send();

• Rédigez une fonction isPrime(num) qui renvoie un booléen (true si le nombre est premier, false sinon).

• Thibault : Cloud Computing
• Raphaël : React
• Jef : cycle en V
• Cyril : modèle MVC.