CoffeeScript - Ajax

AJAX é uma técnica de desenvolvimento da web para criar aplicativos da web interativos.

AJAX significa Asíncrono JavaScript e XML. É uma nova técnica para criar aplicativos da web melhores, mais rápidos e mais interativos com a ajuda de XML, HTML, CSS e Java Script.
Ajax usa XHTML para conteúdo, CSS para apresentação, junto com Document Object Model e JavaScript para exibição de conteúdo dinâmico.
Os aplicativos convencionais da web transmitem informações de e para o servidor usando solicitações síncronas. Significa que você preenche um formulário, clica em enviar e é direcionado para uma nova página com novas informações do servidor.
Com AJAX, quando você clica em enviar, o JavaScript faz uma solicitação ao servidor, interpreta os resultados e atualiza a tela atual. No sentido mais puro, o usuário nunca saberia que algo foi transmitido para o servidor.
XML é comumente usado como formato para receber dados do servidor, embora qualquer formato, incluindo texto simples, possa ser usado.
AJAX é uma tecnologia de navegador independente do software de servidor da web.
Um usuário pode continuar a usar o aplicativo enquanto o programa cliente solicita informações do servidor em segundo plano.

Em geral, usamos jQuery para trabalhar com Ajax. A seguir está um exemplo de 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>

Aqui load() inicia uma solicitação Ajax para a URL especificada /coffeescript/result.htmlArquivo. Depois de carregar este arquivo, todo o conteúdo seria populado dentro de <div> marcado com o estágio de ID . Supondo que nosso arquivo /jquery/result.html tenha apenas uma linha HTML -

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

Quando você clica em um determinado botão, o arquivo result.html é carregado.

CoffeeScript com Ajax

Podemos reescrever o exemplo acima usando CoffeeScript como mostrado abaixo.

<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>

Next page ↱