CoffeeScript - Ajax
AJAX es una técnica de desarrollo web para crear aplicaciones web interactivas.
AJAX significa Asincrónico JavaScript y XML. Es una nueva técnica para crear aplicaciones web mejores, más rápidas y más interactivas con la ayuda de XML, HTML, CSS y Java Script.
Ajax utiliza XHTML para contenido, CSS para presentación, junto con Document Object Model y JavaScript para visualización de contenido dinámico.
Las aplicaciones web convencionales transmiten información hacia y desde el servidor mediante solicitudes sincrónicas. Significa que llenas un formulario, presionas enviar y te dirigen a una nueva página con nueva información del servidor.
Con AJAX, cuando presiona enviar, JavaScript hará una solicitud al servidor, interpretará los resultados y actualizará la pantalla actual. En el sentido más puro, el usuario nunca sabría que se ha transmitido algo al servidor.
XML se usa comúnmente como formato para recibir datos del servidor, aunque se puede usar cualquier formato, incluido el texto sin formato.
AJAX es una tecnología de navegador web independiente del software del servidor web.
Un usuario puede seguir utilizando la aplicación mientras el programa cliente solicita información del servidor en segundo plano.
En general, usamos jQuery para trabajar con Ajax. A continuación se muestra un ejemplo de Ajax y 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>
aquí load() inicia una solicitud Ajax a la URL especificada /coffeescript/result.htmlarchivo. Después de cargar este archivo, todo el contenido se completará dentro de <div> etiquetado con la etapa de identificación . Suponiendo que nuestro archivo /jquery/result.html tiene solo una línea HTML -
<h1>THIS IS RESULT...</h1>
Cuando hace clic en el botón dado, se carga el archivo result.html.
CoffeeScript con Ajax
Podemos reescribir el ejemplo anterior usando CoffeeScript como se muestra a continuación.
<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>