View  Edit  Attributes  History  Attach  Print  Search

ACCUEIL | ARDUINO > S'INSTALLER > DEBUTER > APPROFONDIR | PROCESSING | MECATRONIQUE | MATERIEL | OUTILS | TESTS | Plus...|
Python > Shell > ATELIERS Python + Qt > PyQt apps > PyQt+Arduino | Mes Robots | RepRap | Mes lib'Arduino | Mes shields Arduino | Mes distros | Les Mini-PC |
ATELIERS ARDUINO| VIDEOS | COMPRENDRE | REFERENCES | CODER | TECHNIQUE | GNU/LINUX | LIENS | Rien à voir |

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

Mini-webapps avec Pyduino
Par X. HINAULT - Créé le 05/09/2014

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 setInterval() qui permet d'appeler une fonction à intervalle régulier à répétition.

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;

$(document).ready(function(){

        window.setInterval(function(){envoiRequete()},100); // appel fonction a intervalle regulier de facon repetee

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

function envoiRequete(){

        compt=compt+1; // increment compteur
        $.get("ajax/"+compt, manageReponseAjaxServeur); // envoi d'une requete AJAX

} // 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).selectionEnd-1,$("#textarea").get(0).selectionEnd-1); // 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.