Mettez en oeuvre AJAX JavaScript dans vos sites web

fermer la fenetre

Des Applications Performantes Sans Vous Prendre La Tête !

Recevez la formation "Développement Facilte" GRATUITEMENT
Avec tous les Codes Sources Commentés
 
(Les événements, la programmation orientée objets, les modèles de conception, Les éditeurs, les outils, 
l'efficacité, CSS3, HTML5, JavaScript, jQuery, Dojo...)

Renseignez votre prénom et votre adresse email ci-dessous :

Et voici le premier cours Web 2.0 !

Il s’agit de l’utilisation d’AJAX avec JavaScript ou comment modifier le contenu de vos pages web sans recharger la page 😉

Tout est dans le cours vidéo ci-dessous.

[ppmaccordion][ppmtoggle title=”Afficher le texte de la vidéo”]

Mettez en œuvre AJAX JavaScript dans vos sites web

Bonjour à tous et bienvenu sur Développement Facile.

Là, je vous fait un petit cours rapide pour commencer à découvrir l’Ajax avec JavaScript, si vous avez consulté l’ensemble des cours précédents dédiés à JavaScript, vous commencez déjà à avoir un niveau assez sympa pour des programmes avec JavaScript, vous devez commencer à vous amuser à faire des interactions utilisateurs, qui plaisent à vos internautes.

AJAX

Donc là vous allez passer au niveau supérieur avec l’utilisation de l’Ajax, vous allez utiliser l’objet XmlHttpRequest qui va vous permettre de communiquer avec un script PHP, et donc de JavaScript vous communiquez avec un script PHP, derrière le PHP va pouvoir interroger une base de données MySQL, et donc ça va rendre vos sites JavaScript HTML totalement dynamiques et interactifs avec vos utilisateurs. Les attributs et les méthodes XmlHttpRequest ça permet justement d’utiliser des scripts JavaScript pour accéder à des données présentes sur un serveur, et sans recharger la page web. C’est la puissance d’Ajax et le Web 2.0, comme vous l’entendez un peu partout.

Les attributs XmlHttpRequest il y a onReadyStateChange qui appel une fonction à chaque changement d’état, en mode asynchrone, on n’attend pas la réponse pour continuer à exécuter le code JavaScript,
readyState ça vous donne l’état de l’objet pendant le traitement de la requête quand vous envoyez une requête, quand vous envoyez un fichier PHP, vous avez 4 valeurs, l’état 0 c’est initialisé, l’état 1 ouvert, l’état 2 envoyé, l’état 3 en cours de réception et l’état 4 chargé, reçu, prêt.
ResponseText ça indique que la réponse est envoyée sous forme texte.

Alors responseXML ça indique que la réponse est envoyée sous forme XML,
Status ça correspond au code du statut du serveur, donc erreur 404, vous connaissez bien, ou erreur 200 pour dire que tout est OK,
statusText ça correspond au message qui accompagne le code du statut, ça vous permet d’avoir un peu plus d’informations, et vous avez des méthodes pour l’objet XmlHttpRequest, bien évidemment :
abort pour annuler la requête et réinitialiser l’objet XmlHttpRequest,
getAllResponseHeaders ça récupère les entêtes http de la réponse,

getResponseHeader là ça récupère la valeur de l’entrée de la réponse,
open ça permet la connexion avec le serveur et donc vous passez vos paramètres en méthodes get ou posts et en type synchrone ou asynchrone,
send ça envoie une requête, un fichier PHP en méthode get ou post suivant ce que vous avez déterminé comme option,
setRequestHeader ça définit la valeur de l’en-tête envoyée avec la requête.

Ajax

Là je vous montre un exemple très rapide pour le contrôle de saisie d’un champ, on va regarder ensemble le code source, donc vous faites un requireOnce, vous allez inclure un fichier connect.php, c’est un fichier qui se connecte automatiquement à une base de données PHP, vous vous connectez à la base de données ici, tout simplement pour vous connecter à la base de données, en faisant un select pseudo vers utilisateur, on récupère la variable en get, donc ce fichier il faut savoir que Ajax.php est appelé par le code HTML, par du code JavaScript, il a envoyé les données en get, donc on récupère le second get, on vérifie une requête, est-ce qu’on sélectionne le pseudo de la requête des utilisateurs, et on exécute notre requête, si la requête renvoie une valeur, on fait un écho false, sinon on va faire un écho true, tout simplement. Donc si il y a une réponse, si le pseudo saisit par l’utilisateur dans get existe on renvoi false, sinon on renvoi true, ensuite on va ouvrir le fichier HTML, justement, qui correspond, il est là, vous avez un champ texte, vérif pseudo à chaque fois que l’utilisateur appuie, relâche une touche, un key up, ou relâche une touche, vous appelez verifPseudo avec this.value, qu’est-ce que fait la fonction verifPseudo ?
Si l’identifiant, sa longueur est supérieure ou égale à 8, une fois que l’utilisateur a saisi son pseudo sur 8 caractères ou plus, on va se connecter à ajax, ça s’appelle ajax.php en envoyant le pseudo en valeur get, on récupère le retour, si le retour est égal à false on dit que le pseudo est déjà utilisé, que quand on renvoie false, il y a eu un élément qui est renvoyé donc le pseudo est déjà utilisé, sinon le pseudo est disponible, sinon si l’identifiant est inférieur ou égal à 8, on indique à l’utilisateur que le pseudo doit être minimum de 8 caractères, et tout ça on le modifie à chaque fois, on indique l’information dans la div réponse via le header html, donc connectUrl qu’est-ce que ça fait ?
Ca utilise l’objet window XmlHttpRequest, on récupère un objet et on fait un open on passe les valeurs, les variables, donc le pseudo en get, et on attend la réponse, en fonction de l’état, si la réponse est reçue de toute façon on a notre élément ici, on renvoie la réponse, on retourne la réponse au format texte à la fonction directement. Là vous avez eu un exemple très simple, pour mettre en œuvre l’Ajax dans votre code JavaScript, ça appel un fichier PHP qui lui-même se connecte à une base de données et interroge une table, et donc avec l’Ajax, avec l’objet XmlHttpRequest, ça va vous permettre de faire des sites vraiment très interactifs avec les internautes, bien évidemment, plusieurs cours seront dédiés pour que vous puissiez utiliser cette technologie dans vos applications, dans votre site Internet, retrouvez comme d’habitude un exemple de code source sous ce cours vidéo, si vous avez des questions, posez-les sous ce cours vidéo et je vous dis à très bientôt sur Développement Facile.

 

[/ppmtoggle][/ppmaccordion]

Téléchargez  le code source JavaScript

Voici un exemple de code JavaScript utilisant l’AJAX.

Downloads

Partagez vos scripts AJAX

Il existe plusieurs scripts JavaScript pour utiliser AJAX. Partagez, via les commentaires, vos scripts qui simplifie AJAX.

Créez des Applications Hyper-Intéractives avec la Formation Gratuite JavaScript Facile !