Ruby on Rails - AJAX

Ajax oznacza Asynchroniczny JavaScript i XML. Ajax nie jest pojedynczą technologią; jest to zestaw kilku technologii. Ajax zawiera następujące elementy -

XHTML do oznaczania stron internetowych
CSS do stylizacji
Dynamiczne wyświetlanie i interakcja z wykorzystaniem DOM
Manipulowanie danymi i wymiana za pomocą XML
Pobieranie danych za pomocą XMLHttpRequest
JavaScript jako klej, który spaja to wszystko razem

Ajax umożliwia pobieranie danych do strony internetowej bez konieczności odświeżania zawartości całej strony. W podstawowej architekturze WWW użytkownik klika łącze lub przesyła formularz. Formularz jest przesyłany do serwera, który następnie odsyła odpowiedź. Odpowiedź jest następnie wyświetlana użytkownikowi na nowej stronie.

Kiedy wchodzisz w interakcję ze stroną internetową opartą na Ajax, ładuje ona silnik Ajax w tle. Silnik jest napisany w JavaScript, a jego zadaniem jest zarówno komunikacja z serwerem WWW, jak i wyświetlanie wyników użytkownikowi. Gdy przesyłasz dane za pomocą formularza opartego na technologii Ajax, serwer zwraca fragment HTML zawierający odpowiedź serwera i wyświetla tylko te dane, które są nowe lub zmienione, zamiast odświeżania całej strony.

Aby uzyskać szczegółowe informacje na temat AJAX, przejdź do naszego samouczka AJAX

Jak Railsy implementują Ajax

Railsy mają prosty, spójny model implementacji operacji Ajax. Gdy przeglądarka wyrenderuje i wyświetli początkową stronę internetową, różne działania użytkownika powodują wyświetlenie nowej strony internetowej (jak każda tradycyjna aplikacja internetowa) lub uruchomienie operacji Ajax -

Some trigger fires - Tym wyzwalaczem może być kliknięcie przez użytkownika przycisku lub łącza, użytkownik wprowadzający zmiany w danych w formularzu lub polu albo po prostu okresowy wyzwalacz (oparty na liczniku czasu).
The web client calls the server- Metoda JavaScript, XMLHttpRequest , wysyła dane powiązane z wyzwalaczem do modułu obsługi akcji na serwerze. Dane mogą być identyfikatorem pola wyboru, tekstem w polu wprowadzania lub całym formularzem.
The server does processing - Program obsługi akcji po stronie serwera (akcja kontrolera Railsów) - robi coś z danymi i zwraca fragment HTML do klienta WWW.
The client receives the response - JavaScript po stronie klienta, który Railsy tworzy automatycznie, otrzymuje fragment HTML i używa go do aktualizacji określonej części kodu HTML bieżącej strony, często zawartości znacznika <div>.

Te kroki są najprostszym sposobem użycia Ajax w aplikacji Railsowej, ale przy odrobinie dodatkowej pracy możesz sprawić, aby serwer zwrócił dowolne dane w odpowiedzi na żądanie Ajax, a także możesz utworzyć niestandardowy JavaScript w przeglądarce, aby wykonać więcej zaangażowane interakcje.

Przykład AJAX

Ten przykład działa w oparciu o scaffold, koncepcja Destroy działa w oparciu o Ajax.

W tym przykładzie dostarczymy, wyszczególnimy, pokażemy i utworzymy operacje na stole kucyków. Jeśli nie rozumiesz technologii rusztowań, sugerujemy, abyś najpierw przejrzał poprzednie rozdziały, a następnie kontynuował pracę z AJAX on Rails.

Tworzenie aplikacji

Zacznijmy od stworzenia aplikacji.Zrobimy to następująco -

rails new ponies

Powyższe polecenie tworzy aplikację, teraz musimy wywołać katalog aplikacji za pomocą polecenia cd. Wejdzie do katalogu aplikacji, a następnie musimy wywołać polecenie szkieletu. Zostanie to zrobione w następujący sposób -

rails generate scaffold Pony name:string profession:string

Powyższe polecenie generuje rusztowanie z kolumną z nazwą i profesją. Musimy przeprowadzić migrację bazy danych w następujący sposób

rake db:migrate

Teraz uruchom aplikację Rails w następujący sposób

rails s

Teraz otwórz przeglądarkę internetową i wywołaj adres URL jako http: // localhost: 3000 / pony / new, dane wyjściowe będą następujące

Tworzenie Ajax

Teraz otwórz app / views / pony / index.html.erb z odpowiednimi edytorami tekstu. Zaktualizuj swoją linię zniszczenia za pomocą: remote => true,: class => 'delete_pony'. Na koniec wygląda to następująco.

Utwórz plik, zniszcz.js.erb, umieść go obok innych plików .erb (w sekcji app / views / pony). Powinien wyglądać tak -

Teraz wprowadź kod, jak pokazano poniżej w destru.js.erb

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

Teraz otwórz plik kontrolera, który znajduje się w app / controllers / pony_controller.rb i dodaj następujący kod w metodzie niszczenia, jak pokazano poniżej -

# 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

W końcu strona kontrolera jest taka, jak pokazano na obrazku.

Teraz uruchom aplikację, Wyjście wywołane z http: // localhost: 3000 / pony / new, będzie wyglądać jak na poniższym obrazku

Naciśnij przycisk tworzenia kucyka, wygeneruje wynik w następujący sposób

Teraz kliknij przycisk Wstecz, pokaże wszystkie informacje utworzone przez kucyka, jak pokazano na obrazku

Do tej pory pracujemy na rusztowaniu, teraz kliknij przycisk zniszcz, wywoła wyskakujące okienko, jak pokazano poniżej, pop-up działa w oparciu o Ajax.

Kliknięcie przycisku OK spowoduje usunięcie rekordu z kucyka. Tutaj kliknąłem przycisk OK. Ostateczny wynik będzie następujący -