Tutoriel Prototype et AJAX

Introduction à AJAX

AJAX signifie Asynchrone JavaScript et XML. AJAX est une nouvelle technique pour créer des applications Web meilleures, plus rapides et plus interactives à l'aide de XML, HTML, CSS et Java Script.

Pour une compréhension complète d'AJAX, veuillez consulter notre tutoriel AJAX simple .

Prise en charge des prototypes pour AJAX

Le framework Prototype vous permet de traiter les appels Ajax d'une manière très simple et amusante, qui est également sûre (cross-browser). Prototype traite également de manière intelligente le code JavaScript renvoyé par un serveur et fournit des classes d'assistance pour l'interrogation.

La fonctionnalité Ajax est contenue dans l' objet Ajax global . Cet objet fournit toutes les méthodes nécessaires pour gérer facilement les requêtes et réponses AJAX.

Demande AJAX

Les requêtes réelles sont effectuées en créant des instances de l' objet Ajax.Request () .

new Ajax.Request('/some_url', { method:'get' });

Le premier paramètre est l'URL de la requête; le second est le hachage des options. L'option method fait référence à la méthode HTTP à utiliser; La méthode par défaut est POST.

Rappels de réponse AJAX

Les requêtes Ajax sont par défaut asynchrones, ce qui signifie que vous devez avoir des rappels qui gèrent les données d'une réponse. Les méthodes de rappel sont passées dans le hachage d'options lors d'une requête -

new Ajax.Request('/some_url', {
   method:'get',
   onSuccess: function(transport) {
      var response = transport.responseText || "no response text";
      alert("Success! \n\n" + response);
   },
   onFailure: function() { alert('Something went wrong...') }
});

Ici, deux rappels sont passés dans le hachage -

  • onSuccess
  • onFailure

L'un des deux appels ci-dessus est appelé en conséquence en fonction de l'état de la réponse. Le premier paramètre passé aux deux est l' objet natif xmlHttpRequest à partir duquel vous pouvez utiliser respectivement ses propriétés responseText et responseXML .

Vous pouvez spécifier les deux rappels, un ou aucun - c'est à vous de décider. Les autres rappels disponibles sont -

  • onUninitialized
  • onLoading
  • onLoaded
  • onInteractive
  • onComplete
  • onException

Ils correspondent tous à un certain état du transport xmlHttpRequest , à l'exception de onException, qui se déclenche en cas d'exception lors de la distribution d'autres rappels.

NOTE- Les rappels onUninitialized, onLoading, onLoaded et onInteractive ne sont pas implémentés de manière cohérente par tous les navigateurs. En général, il vaut mieux éviter de les utiliser.

Méthodes Prototype AJAX

L'objet Ajax fournit toutes les méthodes nécessaires pour gérer facilement les requêtes et réponses AJAX. Voici une liste complète de toutes les méthodes liées à AJAX.

NOTE - Assurez-vous d'avoir au moins la version 1.6 de prototype.js.

S.No. Méthode et description
1. Options Ajax

Ce n'est pas une méthode mais détaille toutes les options de base partagées par tous les demandeurs et rappels AJAX.

2. Ajax.PeriodicalUpdater ()

Exécute périodiquement une requête AJAX et met à jour le contenu d'un conteneur en fonction du texte de la réponse.

3. Ajax.Request ()

Initie et traite une requête AJAX.

4. Ajax.Responders ()

Un référentiel d'écouteurs mondiaux informés de chaque étape des requêtes AJAX basées sur Prototype.

5. Ajax.Response ()

L'objet est passé comme premier argument de toutes les demandes de rappel Ajax.

6. Ajax.Updater ()

Exécute une requête AJAX et met à jour le contenu d'un conteneur en fonction du texte de la réponse.