CoffeeScript - Ajax
AJAX è una tecnica di sviluppo web per la creazione di applicazioni web interattive.
AJAX sta per Asincrono JavaScript e XML. È una nuova tecnica per creare applicazioni web migliori, più veloci e più interattive con l'aiuto di XML, HTML, CSS e Java Script.
Ajax utilizza XHTML per il contenuto, CSS per la presentazione, insieme a Document Object Model e JavaScript per la visualizzazione del contenuto dinamico.
Le applicazioni web convenzionali trasmettono informazioni da e verso il server utilizzando richieste sincrone. Significa che compili un modulo, premi Invia e vieni indirizzato a una nuova pagina con nuove informazioni dal server.
Con AJAX, quando premi submit, JavaScript farà una richiesta al server, interpreterà i risultati e aggiornerà la schermata corrente. Nel senso più puro, l'utente non saprebbe mai che qualcosa è stato trasmesso al server.
XML è comunemente utilizzato come formato per la ricezione dei dati del server, sebbene sia possibile utilizzare qualsiasi formato, incluso il testo normale.
AJAX è una tecnologia del browser web indipendente dal software del server web.
Un utente può continuare a utilizzare l'applicazione mentre il programma client richiede informazioni dal server in background.
In generale, usiamo jQuery per lavorare con Ajax. Di seguito è riportato un esempio di Ajax e 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>
Qui load() avvia una richiesta Ajax all'URL specificato /coffeescript/result.htmlfile. Dopo aver caricato questo file, tutto il contenuto verrà popolato all'interno di <div> contrassegnato con ID stage . Supponendo che il nostro file /jquery/result.html abbia solo una riga HTML -
<h1>THIS IS RESULT...</h1>
Quando fai clic sul pulsante indicato, viene caricato il file result.html.
CoffeeScript con Ajax
Possiamo riscrivere l'esempio sopra usando CoffeeScript come mostrato di seguito.
<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>