Logo Mon Club Elec

Webapps d’initiation : Ajax : Afficher un message dans une zone texte en réponse à une requête Ajax à intervalles réguliers.

Les webapps sont devenues une partie intégrante de notre vie quotidienne. Elles nous permettent de rester connectés et de partager des informations avec le monde entier. L’utilisation d’Ajax est un moyen très pratique de créer des webapps interactives et dynamiques. Dans cet article, nous allons examiner comment utiliser Ajax pour afficher un message dans une zone texte en réponse à une requête Ajax à intervalles réguliers. Nous verrons comment configurer le code pour que le message s’affiche à chaque fois que la requête est envoyée et comment le modifier pour qu’il s’affiche à des intervalles réguliers.

Webapps d’initiation : Ajax : Afficher un message dans une zone texte en réponse à une requête Ajax à intervalles réguliers.

1.  Présentation

Dans cette webapp d’initiation utilisant jQuery UI, voyons comment afficher un message dans une zone texte en réponse à une requête Ajax à intervalles réguliers. Nous utilisons ici la fonction de l’objet window du DOM setTimeout() qui permet d’appeler une fonction 1 fois après un intervalle de temps : nous appellerons ici cette fonction à 2 endroits du code.

L’intérêt est d’attendre la fin de la gestion de la requête Ajax précédente avant d’en envoyer une nouvelle.

2.  Structure type de la webapp

Comme cela est présenté dans les tutos dédiés, je rappelle que la structure type de la webapp est la suivante :

  • un seul répertoire incluant :
    • librairies utilisées
    • la page html de la webapp
    • le code serveur Pyduino opérationnel incluant la fonction d’envoi de réponse Ajax
  • la page HTML de la webapp incluant :
    • la définition des éléments graphique au niveau du body
    • l’inclusion des librairies utilisées
    • le code Javascript actif de la page incluant la fonction de gestion de la réponse Ajax

3.  Body HTML : définition des éléments graphiques de la page

Reception reponse Ajax :<br>
<textarea rows=« 4 » cols=« 50 » id=« textarea »></textarea>

4.  Head : Inclusion des librairies utilisées

<script src=« static/jquery.min.js » type=« text/javascript »></script>

5.  Head : Code Javascript de la page

var compt=0;
var delai=100;

$(document).ready(function(){

        window.setTimeout(function(){envoiRequete()},delai); // appel fonction apres intervalle – 1er appel

}); // fin function + fin ready + fin $

function envoiRequete(){

        compt=compt+1; // incremente compteur
        $.get(« ajax/ »+compt, manageReponseAjaxServeur); // envoi d’une requete AJAX

        window.setTimeout(function(){envoiRequete()},delai); // appel fonction apres intervalle – appel apres chaque reponse

} // fin function

6.  Ajax : Code Python « côté serveur » : Envoi de la réponse Ajax

def reponseAJAX(paramIn):

        print « paramIn= »+paramIn # debug
        # la reponse
        reponseAjax=( # debutreponse AJAX
paramIn
)  # fin reponse AJAX

        return reponseAjax

7.  Ajax : Code Javascript « côté client » : Gestion de la réponse Ajax

function manageReponseAjaxServeur(dataIn){

        //dataIn=parseInt(dataIn);
        $(« #textarea »).append(dataIn+« \n« );
        $(« #textarea »).get(0).setSelectionRange($(« #textarea »).get(0).selectionEnd1,$(« #textarea »).get(0).selectionEnd1); // se place en derniere ligne -1 pour avant saut de ligne

} // fin fonction de gestion de la reponse AJAX
 

8.  La webapp complète :

L’archive complète de la webapp est disponible ici, incluant :

  • La page HTML complète
  • Le serveur Pyduino opérationnel
  • Les librairies utilisées

Remarque : le serveur pyduino suppose que la librairie Pyduino et ses dépendances soient installées.

Articles similaires:

Noter cet article

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Archive Mon Club Elec

Articles populaires

Newsletter

Inscrivez-vous maintenant et bénéficiez d'un soutien continu pour réaliser vos travaux électriques en toute sécurité.