JSON i AJAX – przykład wykorzystania

Dziś dość krótki wpis. Tak jak obiecałem w ostatnim poście, tym razem przygotowałem pseudo aplikację wykorzystującą JSON. Użyłem też AJAXa, czyli asynchronicznego ładowania danych na stronie. JSON i AJAX to technologie, które zazwyczaj występują w parze, ponieważ świetnie do siebie pasują. Jakby tego wszystkiego było mało, dla dodania aplikacji wiarygodności, zbudowałem również prosty back-end stworzony w PHP. Mam nadzieję, że udało mi się osiągnąć wynik, który zilustruje jak wszystko pięknie ze sobą współgra.

Działanie aplikacji jest bardzo proste. Po podaniu przez użytkownika odpowiedniego loginu i hasła serwer przesyła dane konta, które zostają wyświetlone w oknie przeglądarki. Tutaj można, zobaczyć to na żywo.

JSON i AJAX

Ponieważ w tym przykładzie korzystam z back-endu, aby aplikacja zadziałała, potrzebny jest serwer. Dla windowsa, najlepiej skorzystać z gotowego stacku WAMP. Dla innych systemów, łatwo znaleźć odpowiednik. Nie będę dokładnie opisywał jak wszystko poustawiać. Nie są to specjalnie skomplikowane sprawy, do tego w internecie jest mnóstwo poradników tłumaczących jak to zrobić.

Zacznę od opisania kodu PHP. Plik z tym kodem zapisuję na serwerze pod nazwą backend.php

Nie jestem wirtuozem PHP, więc jeśli popełniłem tutaj jakieś faux pas, musicie mi wybaczyć 🙂 Tak naprawdę to pierwszy skrypt w tym języku jaki napisałem w życiu 😉

Nie ma sensu dokładnie tłumaczyć całości powyższego kodu, jest dość prosty. Zresztą dobrym ćwiczeniem dla każdego przyszłego programisty jest próba zrozumienia kodu w języku którego nie zna 😉 Wytłumaczę bardzo ogólnie co tu się dzieje. Pierwsza, ta największa, część kodu to dane. Są zapisane w formie wielopoziomowych tablic. Zaznaczę w tym miejscu, że jest to trochę naciąganie. Normalnie kod PHP łączył by się z jakąś bazą danych, ale korzystam z tego co mam. Tablica, której używam do zapisu informacji to tak zwana tablica asocjacyjna. Oznacza to, że kluczami do elementów są nie liczby a łańcuchy znaków. elementy mogą oczywiście też być tablicami. Jeśli dobrze się przyjrzeć wygląda to bardzo podobnie do JavaScriptowych obiektów, tylko bez metod. Chyba łatwo się domyślić co będzie dalej.

Większa z tablic zawiera dane trzech kont. Mniejsza, to treści wiadomości, które wyświetlą się w odpowiedzi na błędnie podane hasło lub login.

Pozostałe parę linijek sprawdza czy wysłane przez front end hasło i login są poprawne. Jeżeli nie są, serwer przekazuje obiekt zawierający treść błędu. Jeżeli podane login i hasło są poprawne, serwer oddaje zawartość podtablicy, która zawiera dane przypisane do podanego loginu. Nic skomplikowanego 🙂

Ok, skoro backend mam już z głowy, czas przejść do tego co się naprawdę liczy, czyli HTML i JavaScript. Ponieważ, będzie trochę usuwania i tworzenia elementów w DOMie, dołączam niezawodną bibliotekę jQuery. Ponad to w jQuery mam też bardzo proste metody do obsługi AJAXa, one również mi się dziś przydadzą.

Struktura HTML, nie jest specjalnie skomplikowana. Tak naprawdę na początku w dokumencie jest tylko jeden div:

Nic więcej nie potrzeba. Nowe elementy będą dodawane dynamicznie w odpowiedzi na czyny użytkownika.

Kolej na JavaScript. Stworzyłem jeden obiekt, który zajmuje się wysyłaniem zapytań do serwera o dane i obsługą tych danych, kiedy już trafią do przeglądarki.

Konstruktor klasy SiteControler przyjmuje jedne argument. Będzie to element obleczony funkcją jQuery. W tym elemencie będzie tworzona zawartość aplikacji. Następnie jak zwykle tworzę, zmienną that, do odwoływania się do obiektu w eventach oraz w tym wypadku w wywołaniu AJAX. Kolejny krok to przypisanie container do wewnętrznego pola o takiej samej nazwie. Pozostałe dwa pola to kolejno: element, który dodam do dokumentu w razie gdy użytkownik poda błędny hasło lub login oraz elementy HTML, wykorzystywane do budowania początkowego widoku aplikacji.

Pierwsza metoda w obiekcie SiteControler to initLogin.

Ta prosta metoda, służyć będzie do, jak nazwa wskazuje, zainicjalizowania kodu. Do elementu container dodawany jest HTML z formularzem logowania a następnie wywoływana jest metoda activatelogin

W tej metodzie przypisuję event on click do przycisku submit, dodanego do dokumenty przez metodę initLogin. Najpierw przechwytuję obiekt eventu i wywołuję jego metodę preventDefault, to spowoduje, że po przyciśnięciu submit, strona nie przeładuje się. Następny krok to stworzenie obiektu data, i wypełnienie jego pól login oraz password wartościami z formularza. Na koniec wywoływana jest metoda checkPass, która otrzymuje obiekt data jako argument.

I tak dochodzę do serca aplikacji, metody checkPass. Pierwsza linijka zawiera kod usuwający wszelkie elementy o klasie error. Robię to w razie jakby w dokumencie znajdowały się takie elementy, pozsotałości po poprzednich próbach logowania. Reszta kodu, to wywołanie metody AJAX obiektu jQuery. To dzięki tej metodzie, jestem w stanie połączyć się z serwerem i odebrać dane od skryptu php. metoda AJAX przyjmuje jeden argument – obiekt zawierający informacje o komunikacji z serwerem. Oto za co odpowiadają pola tego obiektu:

  • url – jest to url, prowadzący do skrytpu po stronie serwera, z którym chcę się skomunikować.
  • type – typ żądania, może być równy post lub get.
  • data – dane przekazywane do serwera, w moim przypadku wysyłam obiekt, zawierający wpisany w formularz login i hasło.
  • success – to metoda, która zostanie wywołana, gdy wywołanie AJAX wykona się bez problemów. Jej argument to odpowiedź serwera. W tym wypadku będzie to łańcuch znaków, zawierający JSON, zwrócony przez skrypt PHP. metodą parse obiektu JSON, zamieniam łańcuch na JavaScriptowy obiekt. Jeżeli zawiera pole errMessage, oznacza, to że podany login lub hasło były błędne i wywoływana jest metoda printError. W przeciwnym wypadku, wywołana jest metoda displayAccountInfo.
  • error – analogicznie do metody success, ta metoda wywoływana jest, jeśli coś pójdzie nie tak z wywołaniem AJAX. Mogę wypisać do konsoli status wywołanie i treść błędu, zawsze to jakaś wskazówka co nie wyszło.

Oto jak wygląda przykładowa odpowiedź serwera w konsoli chrome, jeśli login i hasło zostały podane poprawnie:

JSON i AJAX

Warto zauważyć, że metodom printError i displayAccountInfo przekazuję jako argument, JSONa oddanego przez serwer.

Metoda printError dodaje do głównego elementu paragraf zawierający tekst błędu oddany przez serwer. Nic skomplikowanego 🙂

Jeżeli poprzednia metoda była sercem aplikacji, to ta jest jej szkieletem, mięśniami i układem nerwowym 🙂 Metoda displayAccountInfo wyświetla dane konta użytkownika. Dokładniej, nazwę konta, wszystkie postaci i związane z nimi informacje a na koniec ustawienie dźwięku (oczywiście, żadnego dźwięku nie ma, ale możemy sobie wyobrazić, że jest).

Nie będę opisywał wszystkiego dokładnie, tak naprawdę są to dość proste funkcje manipulujące DOMem. Najważniejsze jest to w jaki sposób wykorzystuję JSON aby wypełnić powstałe elementy treścią. Pętlą for in przechodzę przez wszystkie pola characters a kolejną pętlą for in przechodzę przez pola każdego z nich i wypisuje o danej postaci wszystkie informacje w postaci paragrafów. Jeżeli wartość aktualnie sprawdzanego pola zawiera łańcuch znaków „png”, zamiast paragrafu tworzę element img.

Na koniec dodaję element logout, po naciśnięciu którego wywoływana jest metoda initLogin, która powoduje, że aplikacja wraca do widoku początkowego.

Nie jestem designerem, więc wygląda może pozostawiać wiele do życzenia ale nie o to tu chodzi 🙂 Ważne jest to, że wywołania AJAX działa a dzięki otrzymanemu od serwera JSONonwi, mogę wypełniać strony treścią. Oczywiście prawdziwa aplikacja tego typu pozwalałaby także na tworzenie nowych kont i edycje obecnych danych i była by na pewno bardziej skomplikowana, ale to co pokazałem wystarczy jako przykład.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *