Ruby on Rails - AJAX
Ajax significa Asíncrono JavaScript e XML. Ajax não é uma tecnologia única; é um conjunto de várias tecnologias. Ajax incorpora o seguinte -
- XHTML para marcação de páginas da web
- CSS para o estilo
- Exibição dinâmica e interação usando o DOM
- Manipulação e intercâmbio de dados usando XML
- Recuperação de dados usando XMLHttpRequest
- JavaScript como a cola que une tudo isso
O Ajax permite que você recupere dados para uma página da web sem ter que atualizar o conteúdo da página inteira. Na arquitetura básica da web, o usuário clica em um link ou envia um formulário. O formulário é enviado ao servidor, que então envia de volta uma resposta. A resposta é exibida para o usuário em uma nova página.
Quando você interage com uma página da web com Ajax, ela carrega um mecanismo Ajax em segundo plano. O mecanismo é escrito em JavaScript e sua responsabilidade é se comunicar com o servidor da web e exibir os resultados ao usuário. Quando você envia dados usando um formulário com tecnologia Ajax, o servidor retorna um fragmento HTML que contém a resposta do servidor e exibe apenas os dados que são novos ou alterados, em vez de atualizar a página inteira.
Para obter detalhes completos sobre AJAX, você pode consultar nosso Tutorial AJAX
Como o Rails implementa Ajax
Rails tem um modelo simples e consistente de como implementa operações Ajax. Depois que o navegador renderiza e exibe a página inicial da web, diferentes ações do usuário fazem com que ele exiba uma nova página da web (como qualquer aplicativo da web tradicional) ou acione uma operação Ajax -
Some trigger fires - Este gatilho pode ser o usuário clicando em um botão ou link, o usuário fazendo alterações nos dados em um formulário ou em um campo, ou apenas um gatilho periódico (baseado em um cronômetro).
The web client calls the server- Um método JavaScript, XMLHttpRequest , envia dados associados ao gatilho para um manipulador de ação no servidor. Os dados podem ser o ID de uma caixa de seleção, o texto em um campo de entrada ou um formulário inteiro.
The server does processing - O manipulador de ação do lado do servidor (ação do controlador Rails) - faz algo com os dados e retorna um fragmento HTML para o cliente web.
The client receives the response - O JavaScript do lado do cliente, que o Rails cria automaticamente, recebe o fragmento HTML e o usa para atualizar uma parte específica do HTML da página atual, geralmente o conteúdo de uma tag <div>.
Essas etapas são a maneira mais simples de usar Ajax em um aplicativo Rails, mas com um pouco de trabalho extra, você pode fazer com que o servidor retorne qualquer tipo de dados em resposta a uma solicitação Ajax e você pode criar JavaScript personalizado no navegador para realizar mais interações envolvidas.
Exemplo AJAX
Este exemplo funciona com base em cadafalso, o conceito Destroy funciona com base em ajax.
Neste exemplo, iremos fornecer, listar, mostrar e criar operações na mesa de pôneis. Se você não entende a tecnologia de cadafalso, sugerimos que leia os capítulos anteriores primeiro e depois continue com AJAX on Rails.
Criando um aplicativo
Vamos começar com a criação de um aplicativo. Será feito da seguinte maneira -
rails new ponies
O comando acima cria um aplicativo, agora precisamos chamar o diretório do aplicativo usando o comando cd. Ele entrará em um diretório de aplicativo, então precisamos chamar um comando scaffold. Será feito da seguinte maneira -
rails generate scaffold Pony name:string profession:string
O comando acima gera o scaffold com a coluna de nome e profissão. Precisamos migrar o banco de dados conforme o seguinte comando
rake db:migrate
Agora execute o aplicativo Rails conforme o seguinte comando
rails s
Agora abra o navegador da web e chame um url como http: // localhost: 3000 / ponies / new, a saída será a seguinte
![](https://assets.edu.lat/ruby-on-rails/images/ajax.jpg)
Criando um Ajax
Agora abra app / views / ponies / index.html.erb com editores de texto adequados. Atualize sua linha de destruição com: remote => true,: class => 'delete_pony'.Finalmente, parece o seguinte.
![](https://assets.edu.lat/ruby-on-rails/images/ajax1.jpg)
Crie um arquivo, destroy.js.erb, coloque-o próximo aos seus outros arquivos .erb (em app / views / ponies). Deve ser assim -
![](https://assets.edu.lat/ruby-on-rails/images/ajax2.jpg)
Agora insira o código conforme mostrado abaixo em destroy.js.erb
$('.delete_pony').bind('ajax:success', function() {
$(this).closest('tr').fadeOut();
});
Agora abra o arquivo do controlador que está localizado em app / controllers / ponies_controller.rb e adicione o seguinte código no método destroy como mostrado abaixo -
# DELETE /ponies/1
# DELETE /ponies/1.json
def destroy
@pony = Pony.find(params[:id])
@pony.destroy
respond_to do |format|
format.html { redirect_to ponies_url }
format.json { head :no_content }
format.js { render :layout => false }
end
end
Finalmente, a página do controlador é a imagem mostrada.
![](https://assets.edu.lat/ruby-on-rails/images/ajax3.jpg)
Agora execute um aplicativo, Output chamado de http: // localhost: 3000 / ponies / new, será semelhante à imagem a seguir
![](https://assets.edu.lat/ruby-on-rails/images/ajax4.jpg)
Pressione o botão criar pônei para gerar o resultado da seguinte forma
![](https://assets.edu.lat/ruby-on-rails/images/ajax5.jpg)
Agora clique no botão Voltar, ele mostrará todas as informações criadas pelo pônei como mostrado na imagem
![](https://assets.edu.lat/ruby-on-rails/images/ajax6.jpg)
Até agora, estamos trabalhando no scaffold, agora clique no botão destruir, ele irá chamar um pop-up como mostrado na imagem abaixo, o pop-up funciona baseado em Ajax.
![](https://assets.edu.lat/ruby-on-rails/images/ajax7.jpg)
Se clicar no botão ok, ele excluirá o registro do pônei. Aqui, cliquei no botão ok. O resultado final será o seguinte -
![](https://assets.edu.lat/ruby-on-rails/images/ajax8.jpg)