JavaScript - Acquérir les fondamentaux (1/2)
Chapitre 7 - JavaScript et la communication avec le serveur - Utilisation d'Ajax et des services web Restful

Présentation d'Ajax et JSON

Plan de formation

• Découvrir la technologie Ajax
• Découvrir le format JSON

Découvrir la technologie Ajax

• Ajax était à l'origine un acronyme pour Asynchronous JavaScript And XML
• Maintenant, on parle de technologie Ajax. La raison est que le format XML n'est plus le seul format utilisé pour les échanges de données entre le client et le serveur. Le format JSON est aujourd'hui largement préféré.

Le navigateur ne charge plus complètement la page web. Il récupère les données en JavaScript et modifie la page en conséquence.

Comment fonctionne Ajax ?

• Faire une requête Ajax

var xhr = new XMLHttpRequest();
xhr.open('GET', 'data.json', true);
xhr.send(null);

• La requête est de type GET.
• Vers la ressource "data.json"
• Elle est asynchrone
• Attendre la réponse du serveur

var xhr = new XMLHttpRequest();
xhr.open("GET", "lorem.txt", true);
xhr.onreadystatechange = function(){
	if(xhr.readyState == 4 && xhr.status = 200) {
		console.log(xhr.responseText);
	}
}
xhr.send();

Comme c'est une fonction asynchrone, il faut s'assurer que le chargement est terminé avant de pouvoir lire/utiliser le contenu. Les différents états de l'objet XHR sont les suivants :

Découvrir le format JSON

• Le format des données renvoyées par le serveur n'est plus XML.
• C'est le JSON : JavaScript Object Notation.
• Un format naturellement compris par le JavaScript.

var reponseDuServeur = "{'nom':'DURAND', 'prenom':'Robert'}";

Sortie console :
{'nom':'DURAND','prenom':'Robert'}

Utiliser JSON

var reponseDuServeur = "{'nom':'DURAND', 'prenom':'Robert'}";
var obj = eval('('+reponseDuServeur+')');

Sortie console :
Object
	nom: "DURAND"
	prenom: "Robert"

Soumettre un formulaire en Ajax

Plan de formation

• Utiliser Ajax pour envoyer un formulaire au serveur

Utiliser Ajax pour envoyer un formulaire au serveur

Récupérer les données et les transformer en JSON

window.onload = function () {
	document.forms.le_form.onsubmit = function () {
		var le_form = document.forms.le_form;
		var data = {};

		for (var i=0; i < le_form.length; i++){
			if (le_form[i].name) {
				data[le_form[i].name] = le_form[i].value;
			}
		}
		console.dir(data);

		return false;
	}
}

Envoyer les données au serveur

window.onload = function () {
	document.forms.le_form.onsubmit = function () {
		var le_form = document.forms.le_form;
		var data = {};
		
		for (var i=0; i < le_form.length; i++){
			if (le_form[i].name) {
				data[le_form[i].name] = le_form[i].value;
			}
		}

		var strObj = JSON.stringify(data);
		
		var xhr = new XMLHttpRequest();
		xhr.open('POST', '/gens', true);
		xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8");
		xhr.onreadystatechange = function(){
			if(xhr.readyState == 4 && xhr.status == 200){
				console.log("Données envoyées au serveur");
			} else {
				console.log("Erreur lors de l'envoi des données au serveur");
			}
		}

		xhr.send(strObj);

		return false;
	}
}

Présentation des services web Restful

Plan de formation

• Rappel de la définition d'un service web
• L'architecture REST

Rappel de la définition d'un service web

D'après Wikipedia :

• Un service web est un programme informatique de la famille des technologies web.
• Il permet la communication et l'échange de données.

Au début des années 2000, la communication entre applications web reposait principalement sur le protocole HTTP combiné au format XML pour l'échange de données. Cette approche a mené à la création de SOAP (Simple Object Access Protocol), un protocole standardisé permettant d'envoyer des messages structurés en XML via HTTP. SOAP a facilité l'interopérabilité entre différents systèmes, mais sa complexité et sa lourdeur ont poussé les développeurs à rechercher des alternatives plus simples, comme REST et l'utilisation du format JSON.

Architecture REST

• L'architecture REST (Representational State Transfer) permet d'exploiter les méthodes HTTP associées à une URL...
• Lorsqu'un navigateur récupère (GET) une page (la ressource) et l'affiche, on peut dire qu'il va récupérer la représentation courante de l'état de cette ressource.
• Exemple : considérons cette URL : www.bibliotheque.fr/livres
  • GET sur www.bibliotheque.fr/livres/1 va retourner le livre dont l'id est 1.
  • DELETE sur www.bibliotheque.fr/livres/1 va supprimer le livre dont l'id est 1.
  • POST sur www.bibliotheque.fr/livres va créer un nouveau livre.
  • PUT sur www.bibliotheque.fr/livres/1 va modifier le livre dont l'id est 1.

Consommer des services web Restful avec JavaScript : CREATE

Plan de formation

• Développer une application CRUD
• Simuler une API REST

Développer une application CRUD

Définition de l'acronyme CRUD :
CRUD est un acronyme anglais qui signifie Create, Read, Update et Delete. Il s'agit des quatre opérations de base que l'on peut effectuer sur des données dans une application. Ces opérations sont couramment utilisées dans le développement d'applications web et de bases de données pour gérer les informations.

Créer une application simple pour gérer une liste de clients :

1. Create : Un formulaire pour ajouter des clients
2. Read : Une table qui affichera les données
3. Update : Un formulaire avec les données pré-remplies accessible à partir de la table
4. Delete : Un bouton de suppression sera disponible dans la table

Simuler une API REST

Pour simuler l'API REST, le formateur utilise l'application Deployd. Cependant, elle n'est plus maintenue.
Voilà le code de la formation.

window.onload = function () {
	document.forms.le_form.onsubmit = function () {
		var le_form = document.forms.le_form;
		var data = {};
		
		for (var i=0; i < le_form.length; i++){
			if (le_form[i].name) {
				data[le_form[i].name] = le_form[i].value;
			}
		}

		var strObj = JSON.stringify(data);
		
		var xhr = new XMLHttpRequest();
		xhr.open('POST', '/customers', true);
		xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8");
		xhr.onreadystatechange = function(){
			if(xhr.readyState == 4 && xhr.status == 200){
				console.log("Données envoyées au serveur");
			} else {
				console.log("Erreur lors de l'envoi des données au serveur");
			}
		}

		xhr.send(strObj);

		return false;
	}
}

Consommer des services web Restful avec JavaScript : READ

Plan de formation

• Développer la partie d'affichage des clients

Développer la partie d'affichage des clients

Créer une application simple pour gérer une liste de clients :

1. Create : Un formulaire pour ajouter des clients
2. Read : Une table qui affichera les données
3. Update : Un formulaire avec les données pré-remplies accessible à partir de la table
4. Delete : Un bouton de suppression sera disponible dans la table

window.onload = function () {
	// l'adresse de l'url provient de la vidéo. A adapter selon votre configuration
	var url_data = 'http://localhost:2403/customers';
	var customers;

	var xhr = new XMLHttpRequest();
	xhr.open('GET', url_data, true);

	xhr.onreadystatechange = function () {
		if (xhr.readyState == 4 && xhr.status == 200) {
			customers = eval('(' + xhr.responseText + ')');
			for (customer of customers) {
				console.log(customer);
				var tbody = document.querySelector('tbody');
				var tr = document.createElement('tr');
				var td_name = document.createElement('td');
				var td_firstname = document.createElement('td');
				var td_actions = document.createElement('td');
				var a_delete = document.createElement('Delete');
				var a_update = document.createElement('Update');

				td_actions.innerHTML = a_delete + '|' + a_update;
				td_name.innerHTML = customer.td_name;
				td_firstname.innerHTML = customer.td_firstname;

				tr.appendChild(td_name);
				tr.appendChild(td_firstname);
				tr.appendChild(td_actions);

				tbody.appendChild(tr);
			}
		}
	}

	xhr.send();
}

Consommer des services web Restful avec JavaScript : UPDATE

Plan de formation

• Gérer la modification des clients

Gérer la modification des clients

Créer une application simple pour gérer une liste de clients :

1. Create : Un formulaire pour ajouter des clients
2. Read : Une table qui affichera les données
3. Update : Un formulaire avec les données pré-remplies accessible à partir de la table
4. Delete : Un bouton de suppression sera disponible dans la table

window.onload = function () {
	var cust_id = window.location.search.substr(1);
	var xhr = new XMLHttpRequest();
	xhr.open('GET', '/customers/' + cust_id, true);
	xhr.onreadystatechange = function () {
		if (xhr.readyState == 4 && xhr.status == 200) {
			var str = xhr.responseText;
			var customer = eval('(' + str + ')');
			console.log(customer);
			document.forms.le_form.name.value = customer.name;
			document.forms.le_form.firstname.value = customer.firstname;
			document.forms.le_form.id.value = customer.id;
		}
	}
	xhr.send();

	document.forms.le_form.onsubmit = function () {
		var le_form = document.forms.le_form;
		var data = {};

		for (var i = 0; i < le_form.length; i++) {
			if (le_form[i].name) {
				data[le_form[i].name] = le_form[i].value;
			}
		}

		var strObj = JSON.stringify(data);

		var xhr = new XMLHttpRequest();
		xhr.open('PUT', '/customers', true);
		xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8");
		xhr.onreadystatechange = function () {
			if (xhr.readyState == 4 && xhr.status == 200) {
				console.log("Données envoyées au serveur");
			} else {
				console.log("Erreur lors de l'envoi des données au serveur");
			}
		}

		xhr.send(strObj);

		return false;
	}
}

Consommer des services web Restful avec JavaScript : DELETE

Plan de formation

• Gérer la suppression des clients

Gérer la suppression des clients

Créer une application simple pour gérer une liste de clients :

1. Create : Un formulaire pour ajouter des clients
2. Read : Une table qui affichera les données
3. Update : Un formulaire avec les données pré-remplies accessible à partir de la table
4. Delete : Un bouton de suppression sera disponible dans la table

window.onload = function () {
	// l'adresse de l'url provient de la vidéo. A adapter selon votre configuration
	var url_data = 'http://localhost:2403/customers';
	var customers;

	var loadData = function () {
		var xhr = new XMLHttpRequest();
		xhr.open('GET', url_data, true);

		xhr.onreadystatechange = function () {
			if (xhr.readyState == 4 && xhr.status == 200) {
				customers = eval('(' + xhr.responseText + ')');
				var tbody = document.querySelector('tbody');
				tbody.innerHTML = '';
				var customer;

				for (customer of customers) {
					console.log(customer);

					var tr = document.createElement('tr');

					var td_name = document.createElement('td');
					var td_firstname = document.createElement('td');
					var td_actions = document.createElement('td');

					var a_delete = document.createElement('Delete');
					var customer_id = customer.id;
					var a_update = document.createElement('Update');

					td_actions.innerHTML = a_delete + '|' + a_update;
					td_name.innerHTML = customer.td_name;
					td_firstname.innerHTML = customer.td_firstname;

					tr.appendChild(td_name);
					tr.appendChild(td_firstname);
					tr.appendChild(td_actions);

					tbody.appendChild(tr);
				}
			}
		}

		xhr.send();
	}

	loadData();
	document.querySelector('body').addEventListener('click', function (e) { // e = event
		if (e.target.className == "btn-delete") {
			var cust_id = e.target.dataset.customerId;
			var xhr = new XMLHttpRequest();
			xhr.open('DELETE', url_data + cust_id, true);
			
			xhr.onreadystatechange = function () {
				if (xhr.readyState == 4 && xhr.status == 200) {
					loadData();
				}
			}
			xhr.send();
			e.preventDefault();
		}
	});
}