Sabri

Disponible uniquement sur Etudier
  • Pages : 7 (1686 mots )
  • Téléchargement(s) : 0
  • Publié le : 2 avril 2011
Lire le document complet
Aperçu du document
Démarrer avec Ajax et le php: exemple d'application
Rédacteur: Alain Messin (Alain.Messin arobas obs-azur.fr) CNRS UMS 2202 Admin06 24/09/2007

Le but de ce document est de permettre de démarrer dans le développement d'une application avec Ajax et php. Je ne parlerais pas des avantages ou inconvénients, de la théorie ou de l'historique, mon but est seulement de pouvoir mettre le pied àl'étrier à ceux qui comme moi, sont persuadés que cette technique et quelques autres sont en train de changer la vision que l'on peut avoir des applications web et qui veulent s 'y investir. Le but est donc de décrire comment, le plus rapidement et simplement possible, faire tourner quelques exemples d'application Ajax, à partir desquels on pourra se faire sa propre expérience. Pour autant, la partieconsacrée à la préparation de l'application est assez longue, car je pense qu'on ne met pas de l' Ajax à toutes les sauces et qu'il est important de bien prendre en compte l'ensemble de l'ergonomie: c'est pourquoi je décris un exemple complet. L'exemple en question consiste à partir d'une application existante et d'y ajouter des outils Ajax afin de permettre une plus grande inter activité avecl'utilisateur, sans bouleverser l'application. Je vais donc partir d'une application classique avec un menu à gauche de l'écran, qui charge différents « include » réalisant différentes fonctions. Je passe bien sûr sur toutes les problématiques de sécurité, de présentation etc.. lorsqu'elle ne sont pas directement liées à l'objet de cet article. On ajoutera progressivement à cette application lesfonctionnalités permettant d'utiliser trois petits outils Ajax, qui fonctionneront donc indépendamment de l'application principale et sans rechargement des pages, puisque je le rappelle, Ajax est une technique qui permet l'interaction entre une page déjà chargée dans un navigateur et un serveur, sans rechargement de la page. Pour cela, il faut disposer d'un navigateur (on testera avec Internet Explorer etla série Mozilla et autres), d'un serveur permettant l'exécution de php; il faudra activer le Javascript et/ou activeX. On verra que pour créer une application Ajax, il faut mettre en place: – des éléments de gestion de l'action (menus, fenêtres, boutons ...) – un ou plusieurs élément(s) déclencheur(s) – un script d'appel aux fonctions Ajax et de récupération des données du serveur – uneapplication serveur capable d'être appelée et de répondre au client – un ou plusieurs containers destinés à mettre les données reçues Je vais donc décrire l'application de départ « nue », et ajouter petit à petit les éléments permettant d'aboutir aux fonctionnement des outils Ajax voulus. J'ai essayé de décrire des outils variés qui peuvent employer différentes techniques de façon à se faire une idée déjàassez complète des possibilités. On verra que l'utilisation d' Ajax amène très vite à la manipulation du DOM (Document Object Model), mais le sujet est très vaste et quand même indépendant d' Ajax, donc je ne donnerais que quelques recettes de cuisine sur ce sujet.

Démarrer avec Ajax et le php: exemple d'application

1/23

1 L'application de départ:
On aura donc un fichier index.php, quiaffichera les pages de l'application. Ce fichier sera en XHTML strict, et chargera une feuille de style style.css. Pour les facilités de l'exemple, tous les fichiers seront placés dans le même dossier. Le fichier index.php est donc le suivant:
Exemple Ajax Ceci est le bandeau du site Action 1 Action 2 Action 3

Ce script est en fait une page xhtml, telle que lors d'un clicsur un élément du menu, on rappelle cette page en incluant un fichier « action ». fonctions d'initialisation. Sans le fichier style.css, ce script affichera:

Si on a cliqué sur l'action 2.
Démarrer avec Ajax et le php: exemple d'application 2/23

Pour avoir un exemple plus parlant, on va ajouter des styles minimalistes (mais avec des couleurs bien distinctes !!!) dans le fichier style.css,...
tracking img