Ajax. 1. Wprowadzenie. 2. Aplikacja serwerowa

Wielkość: px

Rozpocząć pokaz od strony:

Download "Ajax. 1. Wprowadzenie. 2. Aplikacja serwerowa"

Stanisław Sobczak
5 lat temu
Przeglądów:

Ajax 1. Wprowadzenie Do tej pory każda akcja na Waszej stronie kończyła się nowym requestem do serwera i przeładowaniem całej strony w przeglądarce.

1 Ajax 1. Wprowadzenie Do tej pory każda akcja na Waszej stronie kończyła się nowym requestem do serwera i przeładowaniem całej strony w przeglądarce. W tej instrukcji dodamy elementy asynchroniczne na stronie, czyli prościej mówiąc elementy, które są podmieniane w tle bez przeładowania strony. Sam Ajax w skrócie oznacza mniej więcej Asynchroniczny javascript i Xml. Oznacza to, iż musimy napisać odpowiedni skrypt, który będzie działał po stronie klienta i na odpowiednią akcję wykonywał w tle żądanie do servera. Natomiast serwer będzie zwracał treść w postaci xml, którą skrypt odpowiednio wkomponuje w stronę. 2. Aplikacja serwerowa W pierwszej kolejności najłatwiej będzie przerobić istniejący kod strony dopisując obsługę żądań ajax-owych. W ten sposób operacje na danych jak i logika aplikacji diametralnie się nie zmieni. Aby rozpoznać, czy żądanie jest ajaxowe trzeba zbadać, czy w nagłówku żądania znajduje się nagłówek XMLHttpRequest. Dodaje go przeglądarka za każdym razem jeśli wykonywane jest żądanie asynchroniczne. W MVC obecność nagłówka można sprawdzić metodą: Request.IsAjaxRequest() W przypadku ajaxowego żądania serwer zwróci uproszczony widok IndexPartial zawierający jedynie fragment strony. W innym wypadku metoda zadziała tak jak dotychczas, zwracając widok Index.

2 Zwrócicie uwagę, iż widok IndexPartial jest praktycznie kopią indeksu tylko ma odciętą deklarację layoutu. Dodano również każdemu z linków klasę Ajax-Action, w tej chwili jest to nieistotne i niewymagane, ale w trakcie pisania skryptu js okaże się bardzo przydatna. Dodatkowo całość widoku umieszczona została w pojedynczym obiekcie o klasie Ajax-Block, co również się wyjaśni później. Natomiast widok Indeks można przerobić wycinając fragment wspólny z IndexPartial, a w to miejsce wywołać renderowanie tegoż partiala. Dzięki temu dalej layout elementu jest zdefiniowany w jednym miejscu. To samo można zrobić z kontrolerem i formularzami edycji.

3 Redirect-a z metody edit do index zostawiamy bez zmian, gdyż ajax-owe żądania również podlegają przekierowaniu. Poza tym w metodzie indeks również dodano obsługę ajax więc serwer z pewnością zwróci stosowną treść. Widoki analogicznie można przerobić tak jak w przypadku indeksu. Zobaczcie, że w tym wypadku formularz ma również klasę Ajax-Action, natomiast obiekt okalający całość Ajax-Modal.

UWAGA! Szczególną uwagę zwróćcie, iż w tym momencie w formularzu wpisywany jest link. Jest to istotne w przypadku ajax-a, gdyż formularz z domyślnym adresem wysyłany jest pod aktualny adres.

Oczywiście tworząc swój skrytp musicie sami podać adres, gdzie ma iść asynchroniczne żądanie. Możecie go odczytać z elementu linka lub formularza.

4 UWAGA! Szczególną uwagę zwróćcie, iż w tym momencie w formularzu wpisywany jest link. Jest to istotne w przypadku ajax-a, gdyż formularz z domyślnym adresem wysyłany jest pod aktualny adres. Przykładowo będąc na adresie /home/index wstawicie ajax-owo formularz z strony /home/edit to domyślnie przeglądarka będzie chciała go wysłać na /home/index, a nie na /home/edit. Oczywiście tworząc swój skrytp musicie sami podać adres, gdzie ma iść asynchroniczne żądanie. Możecie go odczytać z elementu linka lub formularza. W ten prosty sposób skończyliśmy część po stronie serwer. Zaletą takiego podejścia jest nieduży nakład pracy, jak również współdzielony kod dla obu funkcjonalności. 3. Skrypt JavaScript klienta Teraz należy utworzyć skrypt, który będzie uruchamiała przeglądarka. W pierwszej kolejności tworzymy plik skryptu w katalogu /Scripts/skrypt.js Następnie musimy dopisać odnośnik do naszego skryptu w głównym layoucie strony, tak aby przeglądarka pobierając cały wygenerowany kod html wiedziała, że ma również pobrać i uruchomić nasz skrypt. Dodatkowo dokładamy skrypty bootstrapa.

Skrypt taki może odpalić się w tle jak użytkownik już przegląda zawartość strony.

5 Dopisanie go za element <html> zamiast w <header> powoduje, iż skrypt zostanie pobrany i odpalony dopiero po wyrenderowaniu strony. Pozwala to uniknąć długiego wczytywania strony w przypadku rozległych skryptów. Czasem warto umieszczać w ten sposób biblioteki, gdyż mogą w dużym stopniu zniechęcić do korzystania z strony. Skrypt taki może odpalić się w tle jak użytkownik już przegląda zawartość strony. Natomiast w treść wpleść skrypty, które mają wpływ na wygląd strony i nie mogą być uruchamiane na koniec, gdyż użytkownik zobaczy wadliwą przeskakującą stronę. Możemy teraz sprawdzić, czy nasz skrypt się uruchamia poprawnie. Można wpisać w nim linijkę: console.log( jaki? tekst ); Wypisze on nam na konsoli jakiś tekst widoczny w narzędziach developerskich przeglądarki. Dalej skorzystamy z biblioteki jquery. W pierwszej kolejności skojarzymy zdarzenie kliknięcia oraz submit-a z naszymi metodami handlerami. Zwracając false z metody blokujemy dalszą propagację zdarzenia, które ostatecznie skutkuje synchronicznym przeładowaniem strony.

6 Odwołując się do this w metodzie odwołujemy się do elementu, który wyemitował zdarzenie. Dzięki temu można odczytać wszystkie potrzebne dla nas informacje. Dzięki tym informacjom możemy sami w skrypcie wywołać żądanie oraz podmienić treść. Korzystamy z gotowej metody jquery.ajax, gdzie pod parametrem context przekazujemy referencję, którą w metodzie success chcemy mieć pod zmienną this, w naszym przypadku będzie to kliknięty buton. Do urla przekazujemy wartość atrybutu href klikniętego butona. W metodzie success uruchamianej w przypadku odebrania zwrotki z serwera, wyszukujemy najbliższy element klasy Ajax-Block, o którym wspominaliśmy przy tworzeniu widoków i podmieniamy jego treść. Jest to przykład uniwersalnej metody, która pozwala podmieniać dowolne obiekty w zależności od parametrów. Podejście takie również pozwala na wyłączenie skryptów, gdyż strona w takiej sytuacji będzie działać w sposób synchroniczny bez większych problemów.

7 Ostatnim przykładem jest wykorzystanie okienka dialogowego bootstrapa. Do wyświetlania elementów o klasach Ajax-Modal. Dodatkowo dodano metodę odsługującą formularze. Każdy odebrany fragment strony jest umieszczony w wygenerowanej na początku strukturze modala, a następnie wyświetlone. Dodatkowo w modalu przechowywany jest kontekst do ostatniego elementu, który wywołał się wewnątrz bloku Ajax-Block, dzięki temu możliwa jest podmiana bloku, który nie okala niezależnego modala (umieszczane są w innym miejscu przez skrypt bootstrap-a), chociaż jedna z kontrolek tego bloku wywołała okienko (referencja do macierzystego bloku, z którego okienko zostało wykonane).

8 Zadanie Rozszerzyć aplikację z poprzednich zajęć i dodać obsługę zapytań ajax-owych. Zbadać aplikację narzędziami deweloperskimi przeglądarki, jak przepływają komunikaty pomiędzy serwerem, a Waszym skryptem. Zbadać jakim niepożądanym efektem cechuje się ajax-owy formularz logowania. Zastanowić się kiedy warto stosować ajax-a i zbadać jaki efekt przynosi funkcja cofania przeglądarki i co można w tym kierunku zrobić.

Podobne dokumenty

Widoki zagnieżdżone, layout. 1. Wprowadzenie Repozytoria danych

Widoki zagnieżdżone, layout. 1. Wprowadzenie Repozytoria danych Widoki zagnieżdżone, layout 1. Wprowadzenie Repozytoria danych Identyczne operacje na danych często się powtarzają np. pobierz książkę. Jeśli zapytanie realizowane jest za każdym razem w metodzie kontrolera