Aller au contenu | Aller au menu | Aller à la recherche

lundi 2 juin 2008

Requête Ajax Cross-domain via un proxy

Nous avons vu au cours d'un article précédent comment contourner la limitation de Same Origin Policy en utilisant la balise <script> pour effectuer des requêtes Ajax vers un serveur distant (nom de domaine différent du nom de domaine sur lequel notre application est déployée).

Cette solution nous imposait de modifier notre code côté navigateur, pour ne plus utiliser une instance d'object XMLHttpRequest, mais passer par de la génération dynamique de balises HTML <script>.

Nous allons à présent voir comment effectuer des requêtes Ajax distantes en passant par un proxy, de manière à ne pas avoir à ré-écrire tout notre code de chargement de données depuis l'application HTML+Javascript.

Nous commencerons par l'écriture d'un proxy en PHP, par lequel nous passerons pour effectuer nos appels Ajax, et, en seconde partie, nous verrons comment utiliser les fonctionnalités de proxy-ing du serveur Web Apache, pour ne pas avoir à écrire nous-même le proxy.

Lire la suite...

jeudi 15 mai 2008

Requête Ajax Cross-domain avec la balise <script>

Nous avons vu, au cours de plusieurs articles, comment effectuer des requêtes Ajax, parfois en utilisant le Framework prototype, et/ou en utilisant le format JSON pour nos échanges.

La principale limitation que nous avons tendance à rencontrer dans ce contexte est la contrainte de Same Origin Policy, qui nous est imposée par les paramètres de sécurité des navigateurs : nos requêtes Ajax ne peuvent être effectuées que vers le domaine sur lequel notre site est déployé.

Cet article va nous permettre de voir comment Effectuer des requêtes Ajax vers un autre nom de domaine, en utilisant la balise <script>

Capture d'écran de l'application d'exemple que nous utiliserons pour l'article utilisant la balise <script> pour effectuer des requêtes Ajax vers un nom de domaine distant

Lire la suite...

lundi 17 mars 2008

Utiliser XML comme format d'échange de données, en utilisant prototype.js

screenshot-xml.png Nous avons vu il y a quelques temps comment Utiliser JSON comme format d'échange de données lors de requêtes Ajax effectuées avec le Framework prototype.js.

A présent, nous allons voir comment faire la même chose en utilisant XML comme format de données échangées - ce qui correspond plus à la définition même de "AJAX" !

Lire la suite...

dimanche 4 novembre 2007

Scriptaculous Ajax.Autompleter : situation réelle : suggestions dynamiques pour la saisie d'une ville

Nous avons vu dans un article précédent comme utiliser le composant Ajax.Autocompleter du framework Javascript Script.aculo.us pour créer une liste de suggestions à partir d'une saisie utilisateur.

Nous allons maintenant voir comment utiliser ce composant dans une situation plus proche d'un cas "réel" :

  • Saisie de plusieurs informations.
  • Utilisation d'une base de données côté serveur,
  • contenant un volume important de données.
  • Affichage d'informations supplémentaires en cours de saisie.
  • Récupération et exploitation de la donnée saisie par l'utilisateur :
    • côté client, pour traitements Javascript pendant l'utilisation du formulaire,
    • et côté serveur, une fois le formulaire validé.

Ajax.Autocompleter : saisie 'lyo'

Lire la suite...

dimanche 28 octobre 2007

Scriptaculous Ajax.Autocompleter : Mettre en place un champ de saisie avec suggestions dynamiques

Il nous arrive, lorsque nous développons une application Web, de devoir afficher à l'utilisateur une liste de choix.
Dans ces cas là, nous sommes généralement tentés d'employer la balise select.

Mais une liste déroulante n'est utilisable que si elle ne contient que peu d'entrées ; pas plus d'une trentaine, au grand maximum - et force le visiteur à choisir l'une des valeurs que vous lui proposez.

Vous pouvez souhaiter

  • lui proposer une liste de choix,
  • tout en lui permettant d'effectuer une saisie libre...
  • Et ce en adaptant la liste proposée en fonction des saisies.

Script.aculo.us fournit un composant dont le rôle est de faciliter la mise en place d'une liste de suggestions : Ajax.Autocompleter.
Cet article va présenter son utilisation dans un cadre basique.

Ajax.Autocompleter : avec style CSS

Lire la suite...

vendredi 13 avril 2007

Indicateur de chargement non obstructif, avec prototype.js

Nous avons vu au sein d'un article précédent comment Afficher un message de chargement pendant l'exécution des requêtes Ajax, avec prototype.js.

Mais la méthode que j'avais proposé posait deux problèmes :

  • le bloc HTML utilisé comme indicateur de chargement devait être inclut dans toutes les pages HTML du site
  • et il était toujours présent dans le corps de la page, même si masqué via son style CSS - ce qui ne le rendait pas invisible aux navigateurs ne supportant pas les CSS, ou le JavaScript - pour qui il est inutile (pas de JS = pas d'Ajax)

Nous allons donc maintenant voir comment rendre cet indicateur de chargement non obstructif (en anglais : unobstrusive).

Lire la suite...

mardi 13 mars 2007

prototype.js : Ajax.Request : Afficher un indicateur de chargement pendant l'exécution des requêtes Ajax

Employer des techniques de type Ajax pour rafraîchir en arrière-plan les données d'une partie de la page, ou pour effectuer un traitement sans recharger celle-ci en entier contourne le fonctionnement normal du navigateur, où chaque action s'accompagne traditionnellement d'un chargement de page.

Une des conséquences est la non-indication par celui-ci qu'un traitement est en cours : aucun indicateur de chargement / d'activité n'est proposé à l'utilisateur, qui ignore donc si ses demandes d'action ont bien été prises en compte.

Cet article va nous permettre de voir comment insérer un indicateur d'activité dans nos pages, lorsque nous utilisons le framework prototype.js pour réaliser des requêtes Ajax.

Lire la suite...

vendredi 23 février 2007

prototype.js : Gestionnaires d'événements pour Ajax.Request

Nous avons vu au cours d'un article précédent comment réaliser une première requête Ajax à l'aide du framework prototype.js.
Cela nous a permis de découvrir le fonctionnement événementiel de la classe Ajax.Request fournie par prototype.js, mais nous n'avions utilisé que l'événement onComplete, toujours appelé en fin de requête.

Cet article va nous permettre d'aller plus loin, en présentant les autres événements que prototype.js nous permet d'exploiter ; par exemple :

  • Pour gérer les cas de requête se terminant avec succès
  • Pour gérer les requêtes générant une erreur
  • Pour tenir compte des exceptions que peut lever l'objet XMLHttpRequest
  • ...

Lire la suite...

- page 1 de 2