Nous allons utiliser AJAX, Ajax utilise un ensemble de technologie qui facilite le développement d’appli Web. Je te laisse parcourir le lien fourni précédemment pour voir quand utiliser (ou pas) AJAX, ce n’est pas le but de cette page.

Dans notre cas, cela va permettre d’envoyer ou de recevoir des données du serveur sans avoir à recharger la page, cela peut donner une fluidité à l’expérience utilisateur mais peut être utilisé pour la création d’un chat (pas l’animal !!).

Nous allons voir les deux méthodes (GET et POST). La méthode GET est généralement utilisée pour obtenir des informations quant à la méthode POST, on l’utilisera pour fournir des informations. Concrètement, pour un mini-chat (ce n’est toujours pas un petit félin), GET permettra d’afficher les messages, POST d’en envoyer des nouveaux.

Les fichiers pour suivre cet article sont disponibles sur mon dépôt GIT à cette adresse.

La méthode GET

Passons à la première partie (j’espère intéressante) de ce post, la méthode GET, le but est simplement d’aller récupérer une information dans un fichier présent sur le serveur sans avoir à recharger la page.

Voyons le fichier index.php pour la création du bouton :

<section id="zone"></section>
<button id="clickForGet">Récupérer les informations</button>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="main.js"></script>

La balise section sera utilisée pour afficher le retour de la commande ajax.

Nous créons un simple bouton.

La troisième ligne permet d’importer la bibliothèque JQUERY, elle permet de simplifier l’écriture du JAVASCRIPT.

Enfin, de la même manière, nous importons notre script javascript, il est plus facile d’importer ses fichiers plutôt que de les intégrer dans sa page, cela alourdi la page et ne facilite pas la lecture.

A présent, voyons le contenu de ce fichier :

$(document).ready(function(){
	function load_html_content(){
		$.ajax({
			method: 'GET',
			url: 'informations.php',
			data: {
				'action': 'getHTMLData'
			},
			success : function(retour){
				$('#zone').html(retour);
			}
		})
	};
	$('#clickForGet').click(function(e){
		load_html_content();
	});
});

Nous allons commencer par la fin, la dernière partie permet simplement d’appeler la fonction load_html_content() lorsque nous cliquons sur le bouton possèdant l’id : clickGorGet.

Maintenant la fonction load_html_content() envoie une requête GET à l’adresse informations.php (élément url) en fournissant des données (data), cette variable s’appelle action et contient la donnée getHTMLData. A la réception du retour (fonction comprise dans .done), on affiche ce que la page informations.php retourne dans la section.

Pour finir, nous allons voir le fichier informations.php :

<?php
if (isset($_GET['action']) AND $_GET['action'] == 'getHTMLData') {
	echo '<p>Ce paragraphe est présent pour vérifier que ma page est bien rechargée en AJAX</p>';
}
?>

La condition if permet de s’assurer que la variable reçue est bien celle envoyée par le script, si c’est le cas, on écrit le paragraphe.

La méthode POST

Celle-ci est principalement utilisée pour l’envoi de donnée, il sera présenté sous forme de formulaire, voyons le fichier index.php :

<section id="zone"></section>
<form method="POST" action="login.php">
	Pseudo : <input type="text" name="username" id="username" value="Nicolas" /><br />
	Mot de passe : <input type="password" id="password" name="password" />
	<input type="submit" name="submit" value="Envoyer" id="send" />
</form>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="main.js"></script>

Nous créons un simple formulaire et finissons, à l’instar de la méthode GET, par importer les scripts.

Maintenant le fichier main.js :

$(document).ready(function(){
	$('#send').click(function(e){
		e.preventDefault();
		var username = encodeURIComponent($('#username').val());
		var password = encodeURIComponent($('#password').val());
		if (username != "" && password != ""){
			$ajax({
				url : "login.php",
				type : "POST",
				data : "username=" + username + "&password=" + password
			});
			$('#zone').html("<p>" + username + " " + password</p>");
		} else {
			$('#zone').html("<p>Saisie manquante</p>");
		}
	});
});

Lorsque tu cliques sur le bouton Envoyer du formulaire, la première ligne permet d’annuler le comportement par défaut du bouton submit cela permet de laisser le script se dérouler.

Nous venons encoder les deux entrées pour sécuriser et fiabiliser l’envoi des données dans la requête.

Si une des deux entrées est manquante, nous affichons un message. Si toutes les entrées sont présentes, on envoie une requête POST à la page login.php avec les données saisies dans le formulaire.

La page login.php va contenir votre script php qui traitera les données envoyées.

Conclusion

Maintenant, entre les requêtes HTML et ajax, tu es en mesure de rendre ton site plus vivant et plus fluide.

L’article JAVASCRIPT, transmission de données en utilisant AJAX est apparu en premier sur La programmation sur le web.