Présentation

La technologie AJAX est disponible nativement dans WEBDEV.

Que signifie AJAX et quel est son intérêt ?

AJAX (pour Asynchronous Javascript and XML) permet de rafraîchir uniquement les données modifiées dans une page HTML sans réafficher la totalité de la page. Par exemple, si certains éléments présents dans une page affichée (le contenu du panier, les caractéristiques d'un produit, une liste de villes, une carte géographique, …) doivent être modifiés, seuls ces éléments seront rafraîchis. Le serveur n'aura pas à envoyer la page entière sur le poste de l'internaute.

Cette technologie a de multiples avantages :

le serveur est moins sollicité. Il peut alors supporter un plus grand nombre de connexions simultanées.

les informations qui circulent sont de taille réduite.

la durée de transmission est plus courte.

l'affichage pour l'internaute est immédiat et sans effet visuel.

 

AJAX peut être utilisé à deux niveaux différents dans un site WEBDEV :

AJAX automatique et immédiat : un simple clic suffit pour accéder aux avantages AJAX. Le code reste le même.

AJAX programmé : utilisation des fonctions de gestion AJAX pour les traitements complexes.

 

Remarque : Seuls les navigateurs récents supportent la technologie AJAX (Internet Explorer 5.5 et supérieur, FireFox 1.0 et supérieur, Netscape 7 et supérieur, Opera 8 et supérieur, Safari 1.2 et supérieur, …). La fonction AJAXDisponible permet de savoir si le navigateur en cours supporte la technologie AJAX.



AJAX automatique et immédiat

Le schéma suivant présente l'utilisation automatique et immédiate de AJAX dans un site WEBDEV :

 

Par exemple, une page d'un site permet de connaître différentes caractéristiques d'un pays (capitale, devise, drapeau, situation, …). En fonction du pays sélectionné par l'internaute, les informations correspondantes sont affichées. 

 

Action de l'internaute. Dans notre exemple, sélection du pays dans la combo "Sélectionner le pays souhaité".

Envoi de la requête au serveur.

Exécution de la requête : recherche des caractéristiques du pays sélectionné.

Envoi du résultat de la requête :

sans AJAX : toute la page est envoyée.

avec AJAX : seules les caractéristiques du pays sont envoyées.

Affichage des caractéristiques du pays :

sans AJAX : toute la page est réaffichée.

avec AJAX : seuls les champs contenant les caractéristiques du pays sont rafraîchis.

 

 

Pour utiliser AJAX dans ce site, le traitement serveur "A chaque modification" du champ "Sélectionner le pays souhaité" est passé en mode AJAX. Un simple clic ! Le code reste le même.

Traitements permettant d'utiliser automatiquement AJAX

Les traitements suivants peuvent passer en mode AJAX automatique :

traitement serveur "Clic" d'un champ bouton, d'un champ lien ou d'un champ image clicable.

traitement serveur "A chaque modification" d'un champ liste, d'un champ combo, d'un champ interrupteur ou d'un champ sélecteur.

 

Pour passer un traitement en mode AJAX automatique, cliquez simplement sur le terme "AJAX" présent dans le bandeau du traitement :

Traitement n'utilisant pas la technologie AJAX

 

Traitement utilisant la technologie AJAX

 

Remarque : Si un traitement utilisant la technologie AJAX est exécuté sur un navigateur ne supportant pas cette technologie, le traitement s'exécute "comme si" il n'utilisait pas la technologie AJAX (rafraîchissement de la page entière par exemple).


éléments et caractéristiques pouvant être manipulés automatiquement par AJAX

Grâce à AJAX et sans aucune programmation spécifique, il est possible de modifier les caractéristiques des éléments suivants :

 

Valeur

Couleur de la police

Couleur de fond

Visibilité

Champ de saisie

(Texte saisi)

(Couleur du texte saisi)

(Couleur de fond du texte saisi)

Champ d'affichage formaté

(Texte affiché)

(Couleur du texte affiché)

(Couleur de fond du texte affiché)

Liste

(éléments listés et éléments sélectionnés)

(Couleur des éléments listés)

Combo

(éléments listés et éléments sélectionnés)

(Couleur des éléments listés)

Interrupteur

(Options sélectionnées)

(Couleur des options)

Sélecteur

(Option sélectionnée)

(Couleur des options)

Image

(Image)

 

 

Image clicable

(Image)

 

 

Vignette

(Image)

 

 

Graphe

(Graphe)

 

 

Libellé

Libellé HTML

Bouton

(Libellé)

(Couleur du libellé)

Lien

(Libellé)

(Couleur du libellé)

Page

 

 

 

 

Remarques :

Le nombre de caractéristiques gérées automatiquement sera amené à croître régulièrement au fil des versions.

Pour modifier d'autres caractéristiques, il est nécessaire d'utiliser "AJAX programmé".


AJAX programmé

Le schéma suivant présente l'utilisation de "AJAX programmé" dans un site WEBDEV :

 

Exécution d'un traitement navigateur (fonction AJAXExécute ou AJAXExécuteAsynchrone).

Demande d'exécution d'une procédure serveur.

Exécution de la procédure serveur.

Génération du résultat. Le résultat de la procédure sera exprimé sous forme d'une chaîne de caractères ou d'un document XML. 

Envoi du résultat de la procédure (Mot-clé RENVOYER).

Analyse du résultat de la procédure. 

Affichage des informations modifiées. Seuls les champs nécessaires sont rafraîchis.


Fonctions de gestion AJAX

Pour gérer les traitements plus complexes, WEBDEV propose plusieurs fonctions AJAX (classées ici par ordre d'intérêt) :

 

AJAXDisponible

Permet de savoir si la technologie AJAX est utilisable dans le navigateur en cours.

AJAXExécute

Exécute une procédure serveur sans rafraîchir la page. Cette fonction est bloquante. Tant que le résultat de la procédure exécutée n'est pas récupéré, aucun autre traitement n'est exécuté.

AJAXExécuteAsynchrone

Exécute une procédure serveur sans rafraîchir la page. Cette fonction n'est pas bloquante. Les autres traitements continuent de s'exécuter normalement (que le résultat de la procédure exécutée soit récupéré ou non).

AJAXAppelAsynchroneEnCours

Permet de savoir si une procédure serveur appelée par la fonction AJAXExécuteAsynchrone est en cours d'exécution

AJAXAnnuleAppelAsynchrone

Annule l'exécution d'une procédure serveur appelée par la fonction AJAXExécuteAsynchrone.

 

Grâce à ces fonctions, il est possible d'exécuter une procédure serveur à partir d'un traitement navigateur.

 

Attention : Il est nécessaire d'assurer la cohésion des informations stockées sur le serveur et celles affichées sur le poste des internautes. Par exemple, si de données sont modifiées, il est nécessaire de modifier ces données à la fois sur le serveur et à la fois sur la page affichée dans le navigateur.

Procédures pouvant être appelées par AJAX

Par défaut, pour sécuriser les sites WEBDEV, les procédures serveurs sont protégées de tout appel illégal (tentative de détournement de session par exemple). Pour exécuter une procédure serveur à partir d'un traitement navigateur (fonction AJAXExécute ou AJAXExécuteAsynchrone), il est donc nécessaire d'autoriser l'appel de cette procédure par AJAX.

Pour permettre l'appel d'une procédure serveur par AJAX, cliquez simplement sur le terme "AJAX" présent dans le bandeau de la procédure :

Procédure ne pouvant pas être appelée par AJAX

 

Procédure pouvant être appelée par AJAX

Fonctions WLangage non utiles en AJAX

Toutes les fonctions disponibles en WEBDEV serveur sont utilisables en AJAX. Cependant, les fonctions suivantes n'ont aucun intérêt en AJAX. Ces fonctions ne sont donc pas disponibles en AJAX.

 

ChaîneAffiche

Affiche une chaîne de caractères (ou un buffer) dans le navigateur

ContexteFerme

Ferme un contexte de page

ContexteOuvre

Ouvre un nouveau contexte de page sans renvoyer les informations vers le navigateur

FichierAffiche

Affiche un fichier sur le navigateur de l'internaute

FramesetActualise

Actualise un frameset affiché dans le navigateur de l'internaute à partir du contexte présent sur le serveur

FramesetAffiche

Affiche un frameset WEBDEV dans le navigateur de l'internaute

FramesetUtilise

Affiche un frameset WEBDEV dans le navigateur de l'internaute et ferme tous les contextes de pages et de frameset en cours

InitFenêtre

Remet à zéro (ou non) les champs de la page en cours et lance les traitements d'initialisation des champs

PageActualise

Actualise une page affichée dans le navigateur de l'internaute à partir du contexte présent sur le serveur

PageAffiche

Affiche une page dans le navigateur de l'internaute

PageInitialisation

Remet à zéro (ou non) les champs de la page en cours et lance les traitements d'initialisation des champs

PageUtilise

Affiche une page WEBDEV dans le navigateur de l'internaute et ferme tous les contextes de pages en cours

ScriptAffiche

Appelle un script externe (par exemple .php, .asp, .mhtml ou .mht) et renvoie la page résultat dans la fenêtre en cours du navigateur

UploadCopieFichier

Enregistre sur le serveur un fichier "uploadé" par l'internaute

UploadNomFichier

Connaître le nom d'un fichier "uploadé" par l'internaute

Utilise

Affiche une page dans le navigateur de l'internaute

 

Cette liste peut évoluer. Il est conseillé de consulter la documentation de chaque fonction. Le sigle  indique si la fonction est disponible en AJAX ou non.