La méthode complète pour créer un site web 2.0 avec AJAX

Avec ce nouveau cours sur la technologie AJAX, vous allez créer un mini site pour charger le contenu des pages à la demande de l’internaute.

• Création d’un site internet simple.
• En fonction du clic sur le menu, le contenu du site est chargé.
• Les informations sont stockées sur le serveur dans des fichiers html.
• Le site charge uniquement le contenu nécessaire avec AJAX.

Tout est dans la formation ci-dessous.

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

La méthode complète pour créer un site web 2.0 avec AJAX

Bonjour à tous et bienvenu sur Développement Facile.

Voici encore un nouveau cours consacré à Ajax et avec une nouvelle application, là on va créer un menu de navigation ou un petit, vraiment un exemple très simple de site Ajax, de site Internet qui utilise la technologie Ajax, comme ça, ça vous donnera un exemple parfait que vous pourrez réutiliser directement dans vos sites Internet pour construire vos sites Internet. On utilise à la fois le JavaScript, l’HTML, et le CSS, l’HTML 5, le CSS3 pour la mise en forme et le JavaScript pour communiquer avec le serveur, récupérer toutes les informations.

Création d’un Menu de navigation

C’est un site Internet très simple qui utilise la technologie Ajax, il y a un menu sur le côté, l’utilisateur va cliquer sur un élément du menu, et juste à côté, ça va charger le contenu de la page. Au lieu de recharger toute la page, comme on a l’habitude, lorsque l’utilisateur clique sur un menu, soit en haut, soit sur le côté, on recharge toute la page Web en principe, là ça va recharger uniquement le cadre réservé au contenu de la page Web. Les informations sont stockées directement dans des fichiers HTML, ont charge les fichiers HTML et on affiche directement leur contenu. Le site utilise vraiment la technologie Ajax quand il charge uniquement le contenu nécessaire en arrière-plan, sans recharger la page complète.

On passe au code source ensemble donc vous voyez ici, il y a la page d’accueil, avec les différents liens du menu, c’est un site vraiment très pratique, c’est juste pour vous montrer à quoi peut vous servir Ajax, très basique, et on va changer dynamiquement, par Ajax en arrière-plan cette zone-là. Sur le code source je vais aller très vite, parce que maintenant vous connaissez avec tous les cours que je vous ai donnés sur la technologie Ajax, on a notre menu ici, on a créé un tableau, on à notre menu avec des voids pour le href pour ne pas recharger la page justement, et sur le OnClic on charge directement, on renseigne l’URL de la page getPage l’URL de la page l’URL de la page directement, il y a une page avec le contenu HTML à chaque fois. Le contenu HTML de la page, bien évidemment, le contenu HTML de cette page doit être construit à partir de fichier XML, vous pouvez créer des sites bilingues en direct, vous mettez le contenu dans des fichiers XML, et vous recréez les pages HTML à la volée via PHP, au lieu de charger ici des fichiers HTML vous pourriez très bien charger des fichiers PHP qui lisent un fichier HTML et qui reconstruisent ce contenu-là.
De simples fichiers HTML rien de bien compliqué, pourquoi il n’y a pas les balises headers et body ?
Parce qu’elles seront déjà là les balises body, headers, tout ça je ne vais pas les rajouter en doublons, ça ne sert à rien. Et donc le code à chaque fois qu’on clique sur la page, ça vous connaissez, je passe, on initialise l’objet XMLHttpRequest, ici, on récupère la réponse du serveur si la page n’existe pas, le fichier a été envoyé mais la page n’existe pas, ce sera statut 404, je ne test pas le statut puisque je renvoie, quelques soit les erreurs, je renvoie la même chose, on dit que la page n’est pas disponible. Bien évidemment, en fonction du statut, vous pouvez afficher un message complètement différent, on fait un getElementById, la div, avec un innerHTML pour remplacer, il y a un peu de CSS pour la réponse du serveur ici, le mettre en valeur, le tableau, le clic sur les liens, over, active et le body de l’Arial sur tout le site internet. Du CSS très simple, j’en conviens, et sinon on affiche sous forme texte, on récupère tout ça au format texte, tout ça au format texte, on le récupère, et on fait un innerHTML sur la div.
Alors, vos formations, chargement de vos formations, et affichage nous contacter, chargement nous contacter, affichage, erreur, la page n’existe pas, il ne l’a pas trouvée, on reçoit une erreur 404, la page n’est pas disponible. Tutoriel, affichage je réaffiche la page, on atterrit sur la page d’accueil, il n’y a pas eu, c’est tout en direct, on change uniquement cela grâce à la technologie Ajax donc c’est vraiment très puissant, et les chargements à chaque fois c’est 82 ms, 76 ms, 96 ms, 81 ms, là c’est un peu plus long forcément parce que la page n’existe pas, sinon c’est instantané, on utilise même pas la mise en cache en plus, c’est ça qui est génial. Et tout ça avec allez, pas 3 lignes de codes, j’exagère, mais très peu de lignes de code, on appel à chaque fois getPage, getPage il n’y a rien, on récupère la réponse au format texte, on l’affiche.

Votre plan d’actions !

Vous avez déjà eu plusieurs exemples de code source qui utilisent la technologie Ajax, donc moi je vous encourage à reprendre les exemples pour que ça vous inspire, que vous puissiez implémenter de la technologie Ajax dans vos sites Internet, si vous avez des questions, posez-les directement sous ce cours vidéo, et moi je vous dis à très bientôt sur Développement Facile.

[/ppmtoggle][/ppmaccordion]

Téléchargez l’exemple de site AJAX

Voici le code source commenté de cette application AJAX 2.0.

Montrez-moi vos créations sites web 2.0

Partagez, dans les commentaires, votre code source et les sites web 2.0 que vous avez créés à partir des cours AJAX.