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>