Technique d'AJAX simple sans plugin

[krimpatul]

Bonjour, voici une petite méthode pour faire de l'ajax simple sans aucun plugin : le DSL

 

Dans l'idée nous allons apprendre à créer une page qui affiche un nombre et un bouton pour incrémenter ce nombre.

Afin de stocker ce nombre, nous allons le ranger bien au chaud dans une BDD.

Notre page devra donc :

• incrémenter ce nombre dans la BDD sans rechargement de la page
• mettre à jour l'affichage du nombre, toujours sans recharger la page (sinon c'est trop simple   )

L'utilisation d'une BDD juste pour un nombre peut paraitre exhaustive, mais l'idée est d'appliquer la méthode avec plusieurs nombres, possédants chacun un id... on verra ça après 

Nous allons utiliser deux pages : index.php et incrementation.php.

Voici index.php :

<?php
$bdd = new PDO('mysql:host=kpsoftware.fr;dbname= toto','jean-michel','fjhbqfkqsfhgsjkgbs');
?>      /* connexion à la BDD */

<div style="text-align: center;">

<span class="leNombre">
<?php
$nombre=$bdd->query('SELECT nombre FROM nombre');
$nombre=$nombre->fetch(); 
echo $nombre['nombre'];
?>
</span>     /* on à notre nombre ! */

<input value="Plus un !" type="button"/>
</div>

<script>   /* les choses sérieuses commencent ici  */

function addEvent(element, event, func){
 if (element.attachEvent) {
  element.attachEvent('on'+event, func);
 } else {
  element.addEventListener(event, func, true);
 }
}    /* ceci est notre fonction pour ajouter des évènement en javascript */

(function(){
 var elements = document.getElementsByTagName('input')
 for (var i=0;i<elements.length;i++){
  addEvent(elements[i],'click',function(e){     /* on ajoute un évènement sur les "input" */
   var target=e.target || e.srcElement;

   if(target.value == 'Plus un !'){     /* quand un "input" est cliqué, on teste sa "value" */

 /* si cette "value" est "plus un !", alors on créer un script, dont la source est une page php : incrementation.php. Il ne reste plus qu'à l'ajouter ! */

    var scriptElement = document.createElement('script');
    scriptElement.src ='incrementation.php';
    document.body.appendChild(scriptElement);

   }
  });
 }
})();    /* à ce stade, incrementation.php à été exécuté, je vous invite à aller voir cette page avant de lire la fin de index.php */

function refreshNombre(newNombre){
 var spanElements = document.getElementsByTagName('span');
 var newSpan = document.createTextNode(' ' + newNombre + ' ');

/* on créer notre nouveau span contenant le nouveau nombre */

 for (var i=0;i<spanElements.length;i++){
  var classSpan = spanElements[i].className;
  if (classSpan == "leNombre"){         /* on test pour trouver le bon span */
   spanElements[i].replaceChild(newSpan.cloneNode(false),spanElements[i].firstChild);

  /* et là on remplace le firstChild (le texte) de spanElements[i] ( le span contenant l'ancien nombre ) par un clone de newSpan (celui créer juste au dessus contenant le nouveau nombre */

  }
 }
}
</script>

voici maintenant incrementation.php :

<?php
	header("Content-type: text/javascript");

	$nombre=$bdd->query('SELECT nombre FROM nombre');
	$nombre=$nombre->fetch();
	$newNombre=$nombre['nombre']+1; 

        //on récupère le nombre

	$nombre->closecursor();

	$upNbr=$bdd->prepare('UPDATE nombre SET nombre = :newNombre');
	$upNbr->execute(array('newNombre'=>$newNombre));
	$upNbr->closecursor();

        // on l'incrémente
?>
refreshNombre(<?php echo $newNombre ?>);

/* on execute enfin la dernière fonction de index.php qui va se charger de rafraichir le nombre sur la page, il n'y à eu aucun reload de la part du navigateur ! */

Si les commentaires ne sont pas assez explicatifs dites-le moi ! je me ferais un plaisir de détailler tout ça ! 

 

Bien, si vous avez compris l'idée de l'appel d'une page externe via JS pour exécuter un code php sans reload de page, vous avez tout compris. Mais pour exploiter pleinement la puissance du DSL et de la BDD, il nous faudrait avoir plusieurs bouton et nombres dynamiques.

Pour cela il suffirait d'envoyer au script incrementation.php une id afin de transformer la requête SQL en :

	$upNbr=$bdd->prepare('UPDATE nombre SET nombre = :newNombre' WHERE id= :id);
	$upNbr->execute(array('newNombre'=>$newNombre, 'id'=>$_GET['id']));
	$upNbr->closecursor();

 et on change la fonction refresh pour qu'elle contienne un paramètre en plus : l'id

function refreshNombre(id,newNombre){
 var spanElements = document.getElementsByTagName('span');
 var newSpan = document.createTextNode(' ' + newNombre + ' ');
 for (var i=0;i<spanElements.length;i++){
  var classSpan = spanElements[i].className;
  var idSpan = classSpan.substring(classSpan.lastIndexOf('a')+1);
  if (idSpan == id){
   spanElements[i].replaceChild(newNombre.cloneNode(false),spanElements[i].firstChild);
  }
 }
}

avec son appel :

refreshNombre(<?php echo $_GET['id']; ?>,<?php echo $newNombre; ?>);

Avez-vous vu la subtilité du : 

var idSpan = classSpan.substring(classSpan.lastIndexOf('a')+1); 

?

En fait, en HTML il est impossible de mettre un nom de class commençant par un chiffre...   du coup, on met un "a" devant et on utilise "substring" pour découper ce "a"

on prend la dernière apparition de "a" et on ajoute 1 au rang, il ne nous reste plus que l'id !

celui-ci est donc afficher sur index.php comme ceci :

<span class="a<?php echo $nombre['id'];?>"> <?php echo $nombre['nombre']; ?> </span>

bien sûr la requere SQL change légèrement :

SELECT * FROM nombre

Voilà voilà ! DSL dans toute sa grandeur !   Si vous avez des questions n'hésitez pas !

Modifié August 26, 2014 par krimpatul

[Pirkoa]

Ha l'ami, merci !

Ca fait zizir !

[mars073]

    var scriptElement = document.createElement('script');
    scriptElement.src ='incrementation.php;
    document.body.appendChild(scriptElement)

manque un guillemet

mon site fonctionne avec presque la même logique le js ce génére selon les besoins de l'utilisateurs mais ce n'est pas vraiment de l'ajax^^'

+1Rep pour le partage

[krimpatul]

Bien vu pour le guillemet 

Sinon, oui, ce n'est pas de l'AJAX dans le sens pur du terme mais c'est une technique que je trouve simple et efficace et que je voulais partager !

[Anaeria]

Bien vu pour le guillemet 

Sinon, oui, ce n'est pas de l'AJAX dans le sens pur du terme mais c'est une technique que je trouve simple et efficace et que je voulais partager !

 

C'est une technique simple et efficace.

Mais ce n'est pas de l'AJAX. Simplement une manière d'utiliser le JavaScript et le PHP pour dynamiser un contenu.

L'AJAX est une technologie propre qui se base sur l'utilisation de XMLHttpRequest, c'est l'ouverture dédiée d'une connexion HTTP avec une requête qui peut être traité comme telle côté serveur.

Ici, on modifie le DOM ce qui génère artificiellement une requête GET.

Rien de mauvais la-dedans, beaucoup de bibliothèques asynchrones s'initialisent pas ce procédé, mais il faut juste faire attention à ce que l'on va faire.

Et ce pour une raison bien simple : côté serveur, rien ne pourra a priori pas différencier un appel GET simple vers incrementation.php d'un appel GET généré via la page. Alors qu'un appel AJAX à une signature propre au niveau du protocole qui permet de contrôler ses appels et ce sans compté qu'on est maître des headers de la requête en AJAX.

 

Voilà pour mon avis, c'est pratique pour faire des petites choses, mais à évité dès qu'on touche à de la sécurité ou du contrôle des données.

[mars073]

on peut aussi faire du POST, j'aime pas trop use du GET

[krimpatul]

Merci pour les precisions Anaeria, et effectivement, à éviter pour tout ce qui à besoin d'être sécurisé.

 

Sinon pour le POST à la place du GET... cela revient presque au même, un simple clique-droit->obtenir le code source de la page permet de récupérer le formulaire même si celui-ci est en hidden et donc d'appeler incrementation.php depuis une fausse page; mais ça réduit quand même légèrement les risques... ici le GET à l'avantage de rendre le tout plus clair et simple, simple question d'habitude   .

[mars073]

As-tu déjà vu un site avec une inscription en GET?

[krimpatul]

Oulala, je vais me faire taper sur les doigts... 

Moi je disais ça juste comme ça hein, c'était pour l'exemple, après dans mes projets je n'utilise (presque) jamais de GET...

[Azad]

Le GET peut-être très utile et très puissant, même pour des données concernant l'utilisateur si la réception du fameux GET inclut des mesures de protections / vérifications poussées côté serveur.
Merci de ton tutoriel, et bienvenue sur le forum au passage, continue comme ça.

+1 point de réputation.

[Soulalex]

Intéressant C'est vraiment dommage que ce forum manque d'activité.

[Azad]

On va dépasser les 11 000 messages et on a un taux d'activités record, ça viendra.

[Soulalex]

Je parlais de ce forum nommé "Javascript" et non du forum en général

[Azad]

Ah ! My bad, dude.
S'il faut des tutos sur le Javascript, on en fera ! Après tout, on est pas n'importe qui.

[sugatasei]

Je vois que l'on confond souvent la différence entre une ressource GET et POST.

Les requêtes GET peuvent être mise en cache. Les données sont passées dans l'URL et ont une longueur réduite (env 2kb selon le navigateur).

Une donnée sensible ne doit jamais être transmise dans un GET même en HTTPS car l'URL n'est pas cryptée.

Une requête GET peut être ajouté à l'historique et être mise en favoris. En Ajax et HTML5 l'historique du navigateur est pas automatique mais peut être manipulé. Exemple du chargement partiel des pages de Github.

Les requêtes POST ne peuvent pas être mise en cache, dans l'historique, ou en favoris. Les données sont dans l'entête de la requête HTTP et peuvent être cryptées donc totalement sécurisées. Vous pouvez également posté la concaténation de la Bible, du Coran et des écrits du Dalai lama dans la même requête POST si le serveur en face ne rend pas son dernier soupir :-)

Si vous hésitez, pour faire simple :

Récupération de données : GET

Envoi et traitements de données : POST

Dans les 2 cas n'oubliez pas de vous protéger contre les failles de sécurités :

Tuto complet de Mars (et ça repart) :

Simple guide line :