Ruby on Rails - AJAX

Ajax signifie Asynchrone JavaScript et XML. Ajax n'est pas une technologie unique; c'est une suite de plusieurs technologies. Ajax intègre les éléments suivants -

  • XHTML pour le balisage des pages Web
  • CSS pour le style
  • Affichage dynamique et interaction à l'aide du DOM
  • Manipulation et échange de données à l'aide de XML
  • Récupération de données à l'aide de XMLHttpRequest
  • JavaScript comme colle qui relie tout cela ensemble

Ajax vous permet de récupérer des données pour une page Web sans avoir à actualiser le contenu de la page entière. Dans l'architecture Web de base, l'utilisateur clique sur un lien ou soumet un formulaire. Le formulaire est soumis au serveur, qui renvoie ensuite une réponse. La réponse est alors affichée pour l'utilisateur sur une nouvelle page.

Lorsque vous interagissez avec une page Web optimisée par Ajax, elle charge un moteur Ajax en arrière-plan. Le moteur est écrit en JavaScript et sa responsabilité est à la fois de communiquer avec le serveur Web et d'afficher les résultats à l'utilisateur. Lorsque vous soumettez des données à l'aide d'un formulaire optimisé par Ajax, le serveur renvoie un fragment HTML qui contient la réponse du serveur et affiche uniquement les données nouvelles ou modifiées au lieu d'actualiser la page entière.

Pour un détail complet sur AJAX, vous pouvez consulter notre Tutoriel AJAX

Comment Rails implémente Ajax

Rails a un modèle simple et cohérent pour la façon dont il implémente les opérations Ajax. Une fois que le navigateur a rendu et affiché la page Web initiale, différentes actions de l'utilisateur le font afficher une nouvelle page Web (comme toute application Web traditionnelle) ou déclenchent une opération Ajax -

  • Some trigger fires - Ce déclencheur peut être l'utilisateur cliquant sur un bouton ou un lien, l'utilisateur apportant des modifications aux données sur un formulaire ou dans un champ, ou simplement un déclencheur périodique (basé sur un minuteur).

  • The web client calls the server- Une méthode JavaScript, XMLHttpRequest , envoie les données associées au déclencheur à un gestionnaire d'actions sur le serveur. Les données peuvent être l'ID d'une case à cocher, le texte d'un champ de saisie ou un formulaire entier.

  • The server does processing - Le gestionnaire d'actions côté serveur (action du contrôleur Rails) - fait quelque chose avec les données et renvoie un fragment HTML au client Web.

  • The client receives the response - Le JavaScript côté client, que Rails crée automatiquement, reçoit le fragment HTML et l'utilise pour mettre à jour une partie spécifiée du code HTML de la page actuelle, souvent le contenu d'une balise <div>.

Ces étapes sont le moyen le plus simple d'utiliser Ajax dans une application Rails, mais avec un peu de travail supplémentaire, vous pouvez demander au serveur de renvoyer tout type de données en réponse à une requête Ajax, et vous pouvez créer un JavaScript personnalisé dans le navigateur pour en faire plus. interactions impliquées.

Exemple AJAX

Cet exemple fonctionne basé sur l'échafaudage, le concept Destroy fonctionne basé sur ajax.

Dans cet exemple, nous allons fournir, lister, afficher et créer des opérations sur la table des poneys. Si vous ne comprenez pas la technologie d'échafaudage, nous vous suggérons de parcourir d'abord les chapitres précédents, puis de continuer avec AJAX on Rails.

Créer une application

Commençons par la création d'une application Cela se fera comme suit -

rails new ponies

La commande ci-dessus crée une application, nous devons maintenant appeler le répertoire de l'application en utilisant la commande with cd. Il entrera dans un répertoire d'application, puis nous devons appeler une commande d'échafaudage. Cela se fera comme suit -

rails generate scaffold Pony name:string profession:string

La commande ci-dessus génère l'échafaudage avec le nom et la colonne de profession. Nous devons migrer la base de données comme suit la commande

rake db:migrate

Maintenant, exécutez l'application Rails comme suit la commande

rails s

Ouvrez maintenant le navigateur Web et appelez une URL comme http: // localhost: 3000 / ponies / new, la sortie sera la suivante

Créer un Ajax

Ouvrez maintenant app / views / ponies / index.html.erb avec les éditeurs de texte appropriés. Mettez à jour votre ligne de destruction avec: remote => true,: class => 'delete_pony'. Enfin, cela ressemble à ceci.

Créez un fichier, destroy.js.erb, placez-le à côté de vos autres fichiers .erb (sous app / views / ponies). Cela devrait ressembler à ceci -

Entrez maintenant le code comme indiqué ci-dessous dans destroy.js.erb

$('.delete_pony').bind('ajax:success', function() {
   $(this).closest('tr').fadeOut();
});

Maintenant, ouvrez votre fichier de contrôleur qui est placé dans app / controllers / ponies_controller.rb et ajoutez le code suivant dans la méthode destroy comme indiqué ci-dessous -

# DELETE /ponies/1
# DELETE /ponies/1.json
def destroy
   @pony = Pony.find(params[:id])
   @pony.destroy
   
   respond_to do |format|
      format.html { redirect_to ponies_url }
      format.json { head :no_content }
      format.js   { render :layout => false }
   end
   
end

À la page enfin du contrôleur est comme l'image montrée.

Maintenant, exécutez une application, sortie appelée à partir de http: // localhost: 3000 / ponies / new, elle ressemblera à l'image suivante

Appuyez sur le bouton Créer un poney, cela générera le résultat comme suit

Maintenant, cliquez sur le bouton retour, il affichera toutes les informations créées par le poney comme indiqué sur l'image

Jusqu'à présent, nous travaillons sur l'échafaudage, cliquez maintenant sur le bouton de destruction, cela appellera une fenêtre contextuelle comme le montre l'image ci-dessous, la fenêtre contextuelle fonctionne basée sur Ajax.

Si cliquez sur le bouton ok, cela supprimera l'enregistrement du poney. Ici, j'ai cliqué sur le bouton OK. La sortie finale sera la suivante -