Ruby on Rails - AJAX

Ajax sta per Asincrono JavaScript e XML. Ajax non è una singola tecnologia; è una suite di diverse tecnologie. Ajax incorpora quanto segue:

  • XHTML per il markup delle pagine web
  • CSS per lo styling
  • Visualizzazione dinamica e interazione utilizzando il DOM
  • Manipolazione e scambio di dati tramite XML
  • Recupero dei dati utilizzando XMLHttpRequest
  • JavaScript come collante che unisce tutto questo

Ajax ti consente di recuperare i dati per una pagina web senza dover aggiornare i contenuti dell'intera pagina. Nell'architettura web di base, l'utente fa clic su un collegamento o invia un modulo. Il modulo viene inviato al server, che quindi restituisce una risposta. La risposta viene quindi visualizzata per l'utente su una nuova pagina.

Quando interagisci con una pagina Web basata su Ajax, viene caricato un motore Ajax in background. Il motore è scritto in JavaScript e la sua responsabilità è sia di comunicare con il server web sia di mostrare i risultati all'utente. Quando si inviano i dati utilizzando un modulo alimentato da Ajax, il server restituisce un frammento HTML che contiene la risposta del server e visualizza solo i dati nuovi o modificati invece di aggiornare l'intera pagina.

Per un dettaglio completo su AJAX puoi consultare il nostro Tutorial AJAX

Come Rails implementa Ajax

Rails ha un modello semplice e coerente per come implementa le operazioni Ajax. Una volta che il browser ha eseguito il rendering e visualizzato la pagina Web iniziale, diverse azioni dell'utente determinano la visualizzazione di una nuova pagina Web (come qualsiasi applicazione Web tradizionale) o l'attivazione di un'operazione Ajax -

  • Some trigger fires - Questo trigger potrebbe essere l'utente che fa clic su un pulsante o un collegamento, l'utente che apporta modifiche ai dati in un modulo o in un campo o semplicemente un trigger periodico (basato su un timer).

  • The web client calls the server- Un metodo JavaScript, XMLHttpRequest , invia i dati associati al trigger a un gestore di azioni sul server. I dati potrebbero essere l'ID di una casella di controllo, il testo in un campo di immissione o un intero modulo.

  • The server does processing - L'action handler lato server (azione del controller Rails) - fa qualcosa con i dati e restituisce un frammento HTML al client web.

  • The client receives the response - Il JavaScript lato client, che Rails crea automaticamente, riceve il frammento HTML e lo utilizza per aggiornare una parte specifica dell'HTML della pagina corrente, spesso il contenuto di un tag <div>.

Questi passaggi sono il modo più semplice per usare Ajax in un'applicazione Rails, ma con un po 'di lavoro in più, puoi fare in modo che il server restituisca qualsiasi tipo di dati in risposta a una richiesta Ajax e puoi creare JavaScript personalizzato nel browser per eseguire di più interazioni coinvolte.

Esempio AJAX

Questo esempio funziona in base a scaffold, il concetto Destroy funziona in base a ajax.

In questo esempio, forniremo, elencheremo, mostreremo e creeremo operazioni sulla tabella dei pony. Se non hai compreso la tecnologia dello scaffold, ti suggeriamo di leggere prima i capitoli precedenti e poi continuare con AJAX on Rails.

Creazione di un'applicazione

Cominciamo con la creazione di un'applicazione Sarà fatto come segue:

rails new ponies

Il comando precedente crea un'applicazione, ora dobbiamo chiamare la directory dell'app usando il comando cd. Entrerà in una directory dell'applicazione, quindi dobbiamo chiamare un comando scaffold. Sarà fatto come segue:

rails generate scaffold Pony name:string profession:string

Il comando sopra genera lo scaffold con il nome e la colonna della professione. Abbiamo bisogno di migrare il database come segue comando

rake db:migrate

Ora esegui l'applicazione Rails come segue comando

rails s

Ora apri il browser web e chiama un URL come http: // localhost: 3000 / ponies / new, L'output sarà il seguente

Creazione di un Ajax

Ora apri app / views / ponies / index.html.erb con editor di testo adeguati. Aggiorna la tua riga di distruzione con: remote => true,: class => 'delete_pony' Alla fine, sembra come segue.

Crea un file, destroy.js.erb, mettilo accanto agli altri tuoi file .erb (sotto app / views / ponies). Dovrebbe assomigliare a questo -

Ora inserisci il codice come mostrato di seguito in destroy.js.erb

$('.delete_pony').bind('ajax:success', function() {
   $(this).closest('tr').fadeOut();
});

Ora apri il file del tuo controller che si trova in app / controllers / ponies_controller.rb e aggiungi il seguente codice nel metodo di distruzione come mostrato di seguito:

# 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

Alla fine la pagina del controller è come l'immagine mostrata.

Ora esegui un'applicazione, output chiamato da http: // localhost: 3000 / ponies / new, apparirà come nell'immagine seguente

Premere sul pulsante crea pony, genererà il risultato come segue

Ora fai clic sul pulsante Indietro, mostrerà tutte le informazioni create dal pony come mostrato nell'immagine

Fino ad ora, stiamo lavorando su scaffold, ora fai clic sul pulsante di distruzione, chiamerà un pop-up come mostrato nell'immagine sottostante, il pop-up funziona in base a Ajax.

Se fai clic sul pulsante ok, cancellerà il record da pony. Qui ho fatto clic sul pulsante ok. L'output finale sarà il seguente: