CoffeeScript - Ajax

AJAX est une technique de développement Web permettant de créer des applications Web interactives.

  • AJAX signifie Asynchrone JavaScript et XML. C'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.

  • Ajax utilise XHTML pour le contenu, CSS pour la présentation, ainsi que Document Object Model et JavaScript pour l'affichage de contenu dynamique.

  • Les applications Web conventionnelles transmettent des informations vers et depuis le serveur à l'aide de requêtes synchrones. Cela signifie que vous remplissez un formulaire, appuyez sur Soumettre et que vous êtes dirigé vers une nouvelle page avec de nouvelles informations du serveur.

  • Avec AJAX, lorsque vous cliquez sur Soumettre, JavaScript fera une demande au serveur, interprétera les résultats et mettra à jour l'écran actuel. Dans le sens le plus pur, l'utilisateur ne saurait jamais que quoi que ce soit a même été transmis au serveur.

  • XML est couramment utilisé comme format de réception des données du serveur, bien que n'importe quel format, y compris le texte brut, puisse être utilisé.

  • AJAX est une technologie de navigateur Web indépendante du logiciel de serveur Web.

  • Un utilisateur peut continuer à utiliser l'application pendant que le programme client demande des informations au serveur en arrière-plan.

En général, nous utilisons jQuery pour travailler avec Ajax. Voici un exemple d'Ajax et de jQuery

<html>

   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript"
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){
               $('#stage').load('/jquery/result.html');
            });
         });
      </script>
   </head>
	
   <body>
	
      <p>Click on the button to load /jquery/result.html file −</p>
		
      <div id = "stage" style = "background-color:cc0;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Load Data" />
		
   </body>
	
</html>

Ici load() lance une requête Ajax vers l'URL spécifiée /coffeescript/result.htmlfichier. Après le chargement de ce fichier, tout le contenu serait rempli à l'intérieur de <div> étiqueté avec l' étape ID . En supposant que notre fichier /jquery/result.html ne comporte qu'une seule ligne HTML -

<h1>THIS IS RESULT...</h1>

Lorsque vous cliquez sur le bouton donné, le fichier result.html est chargé.

CoffeeScript avec Ajax

Nous pouvons réécrire l'exemple ci-dessus en utilisant CoffeeScript comme indiqué ci-dessous.

<html>

   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript"
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src="http://coffeescript.org/extras/coffee-script.js"></script>
        
      <script type="text/coffeescript">
        $(document).ready ->
          $('#driver').click (event) ->
            $('#stage').load '/jquery/result.html'
            return
          return
      </script>
   </head>
	
   <body>
	
      <p>Click on the button to load /jquery/result.html file -</p>
		
      <div id = "stage" style = "background-color:cc0;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Load Data" />
		
   </body>
	
</html>