Webapps d’initiation : Ajax :

Les webapps sont devenues une partie intégrante de notre vie quotidienne. Elles nous permettent de rester connectés, de partager des informations et de nous divertir. L’utilisation des webapps est devenue plus facile et plus intuitive grâce à l’utilisation d’Ajax. Ajax est une technologie qui permet aux développeurs de créer des applications web plus interactives et plus réactives. Dans cet article, nous allons examiner les avantages et les inconvénients de l’utilisation d’Ajax pour les webapps d’initiation. Nous verrons également comment les développeurs peuvent tirer parti de cette technologie pour créer des applications web plus intuitives et plus engageantes.

Webapps d’initiation : Ajax :

1. Présentation

Dans cette webapp d’initiation utilisant jQuery UI, voyons comment afficher la date sélectionnée grâce à un Datepicker dans un textarea, par réponse Ajax. Ceci pose les bases de l’utilisation de la sélection graphique de la date côté client au niveau du serveur.

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

[$[Get Code]]

4. Head : Inclusion des librairies utilisées

[$[Get Code]]

5. Head : Code Javascript de la page

$(document).ready(function(){

$( « #div » ).css({« font-size »:« 60% »}).datepicker({
inline: true,

onSelect:function(dateText, inst) {

param=dateText.replace(/\//g, ‘:’); // remplace toutes les occurences
$.get(« ajax/ »+param, manageReponseAjaxServeur); // envoi d’une requete AJAX

} // fin onSelect
});

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

[$[Get Code]]

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

[$[Get Code]]

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

function manageReponseAjaxServeur(dataIn){

//dataIn=parseInt(dataIn);
dateList=dataIn.split(‘:’);

$(« #textarea »).append(« ajax : « + dateList[1]+« / »+dateList[0]+« / »+dateList[2]+« \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