Rechercher dans la communauté

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 !

Salut all, Je me suis enfin motivé à faire une intro sur l'ajax et son utilisation simplifié avec JQuery. Comme le veut la tradition du manque d'humour avec l'ajax: Donc pour ceux qui ne savent pas ce qu'est l'ajax, en gros c'est à la place de faire recharger votre site pour quelques données vous faites une requêtes en arrière plan, c'est utile dans les shoutboxs ou pour faire certain effet sur les sites (par exemple). L'ajax c'est du javascript rien à foutre de ce que vous dites et NON son utilisation par JQuery ne fait pas de vous un "dev" en ajax... Comme je l'ai dis au dessus c'est l’exécution d'une requête en arrière-plan donc il faut l'initialiser > configurer la requête > l'envoyer (> récupérer réponse) Initialisation: var request; if (window.XMLHttpRequest) { request = new XMLHttpRequest(); } else if (window.ActiveXObject) { // Un petit test pour IE car ils savent pas faire comme les autres... request = new ActiveXObject("Microsoft.XMLHTTP"); } else { alert("Votre système d'exploitation internet ne semble pas supporter l'ajax.."); } Envoyer une simple requête (comme si vous alliez sur la page): request.open("GET", "fichier.php", true); request.send(null); donc vous avez dans ce cas 2 fonctions .open() et .send(): -open(): vous "ouvrez" une requête enfin de lui expliquer comment elle doit s’exécuter en 3 paramètres: -- "GET" : type d'envoie de la requête -- "fichier.php" : le fichier/page sur le quel il va être exécute -- true : mode asynchrone -send(): envoie de la requête dans ce cas présent il y a null car il n'y a aucun envoie de donnée maintenant un envoie un peut plus complexe, on va faire un système d'inscription à un newsletter par requête post ._. code html (compliqué *tousse*): <input id="mail" type="email"> <input id="send" type="button" onClick="inscription();"> El js (ajax): function inscription() { var mail = document.getElementById("mail").value; request.open("POST", "fichier.php", true); request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); request.send("?mail=" + mail); request.onreadystatechange = function() { if (request.readyState == 4 && request.status == 200) { alert(request.responseText); } } } Dans cet exemple j'ai fais une fonction du nom d'inscription, le fichier "fichier.php" dit si l'inscription a été validé ou non, -open(): cette fois-ci ce n'est pas une requête GET mais POST donc je récupére les données en php avec $_POST[]; -setRequestHeader(): fonction optionnel pour préciser des paramètres dans l'entête de la requête -send(): je mets en forme la variable que j'ai récupéré du nom de mail, les variables doivent être mit selon la norme RFC-1738 exemple : ?variable=123&var2=Bonjour&page=recherche&patati=p atata -onreadystatechange : c'est l'eventement qui est généré lors de l'envoie des différents étapes de l'envoie -readyState et status : je test le stade de la requête pour voir si elle est valide:: --readyState: --- 0 : requête non initialisé --- 1 : connexion au serveur établie --- 2 : requête envoyée --- 3 : traitement de la requête --- 4 : réponse reçu --status: --- 200: "Ok"... je sais pas comment expliquer --- 404: page non trouvée -responseText : retourne la reponse de la requête sous forme de texte brut et la version simplifiée (en JQuery): vous avez 3 possibilité qui reviennent presque au même : $.ajax, $.get et $.post, j'ai expliqué la différence au dessus (le $.ajax et similaire au $.get). La syntaxe pour un simple envoie avec $.ajax: $.ajax({url:"fichier.php"}); La syntaxe pour un simple envoie avec $.get et un petit message à la fin de l'envoie: $.get("fichier.php", function() { alert("requête envoyée"); }); La syntaxe pour envoie avec variables avec $.post et recupération des données (fonctionnel avec $.get sans les variables entre {}): $.post("fichier.php", { page : "mmotrick", methode : "ajax", version : 3 }, function(data, statut){ alert("Réponse requête: " + statut + "# " + data); }); ...