Dziudek's jogger

JSON to format wymiany danych, który moim zdaniem naprawdę warto poznać, zwłaszcza w kontekście bardziej zaawansowanego użycia skryptów JavaScript na stronie. Do czego możemy użyć tego formatu ? Możemy elegancko wymieniać złożone dane pomiędzy PHP, a JavaScript - oczywiście nie tylko PHP posiada wsparcie dla JSON - posiada je mnóstwo języków programowania co zresztą sami zobaczycie czytając podlinkowaną na początku wpisu stronę. Dzięki JSON uzyskujemy łatwy dostęp do poszczególnych elementów obiektu danych.

Mootools w pliku json.js posiada dwie metody składowe klasy Json - toString i evaluate - pierwsza zamienia obiekt JavaScript na ciąg znaków, a druga zamienia ciąg znaków na obiekt JavaScript. Dzięki temu możemy używać przechowywać złożone dane na przykład w cookies - zapisujemy obiekt konfiguracji jako ciąg znaków, który umieszczamy w ciasteczku, a następnie możemy tenże obiekt w dowolnym momencie odczytać.

Nie muszę chyba mówić, że zapis konfiguracji w postaci takiego obiektu:

{
   "styl": 1,
   "nick": 'Dziudek'
}

Jest łatwiejszy do ponownego użycia niż jakiś ciąg znaków, który można odczytać tylko na znany autorowi skryptu sposób ;)

Oczywiście format JSON to nie tylko obiekty - to także tablice i ciągi znaków - wszystkie informacje na ten temat zawarte są na wspomnianej już stronie o JSON.

Warto dodać, że PHP posiada identycznie działające metody jak mootools - json_decode i json_encode, różnica polega na tym, że po stronie PHP obiekty JavaScript są tablicami.

toString

Metoda toString jak już wspomniałem zamienia obiekt na ciąg znaków. Składnia tej metody jest oczywiście nieskomplikowana, gdyż pobiera ona tylko jeden argument - obiekt do przetworzenia:

Json.toString(obiekt);

Powyższy zapis zwróci nam nasz obiekt zamieniony na ciąg znaków, przykładowo:

Json.toString({styl: 'red', nick: 'Dziudek'}});

Ten zapis zwróci nam taki oto ciąg znaków:

'{"styl":"red","nick":"Dziudek"}'

I taki ciąg możemy już śmiało zapisywać w ciasteczku lub wysyłać jakiemuś skryptowi PHP do przetworzenia...

To pora na jakiś mały przykład - wykorzystamy przy tym naszą wiedzę o pliku cookie.js (poprzednia część kursu).

Stworzymy skrypt, który zapisze kilka danych z prostego formularza w ciasteczku. Przyjmijmy, że te dane to preferowana kolorystyka strony nick użytkownika i krótka notatka.

Całość będzie polegała na odczytaniu wartości poszczególnych pól formularza i zapisaniu ich w obiekcie. Następnie obiekt ten zostanie zamieniony na ciąg znaków i zapisany w cookie.

Do tego dołożymy przycisk, który pokaże nam zawartość ciasteczka, ale na razie bez dekodowania jej do postaci pierwotnej.

Tworzymy obiekt, w którym to wszystko zapiszemy:

var dane = {
   styl: '',
   nick: '',
   notatka: ''
}

Następnie tworzymy zdarzenie onclick przycisku wykonującego całą operację:

$('btn-save').addEvent('click',function(){
   dane.styl = $('form-styl').getValue();
   dane.nick = $('form-nick').getValue();
   dane_notatka = $('form-notatka').getValue();

   Cookie.set('dane',Json.toString(dane),{duration: 10,path: "/"});
});

I do tego przycisk, który wczyta nam zawartość ciasteczka do wybranego diva:

$('btn-read').addEvent('click',function(){
   $('cookie-content').setHTML(Cookie.get('dane'));
});

I cały powyższy kod w akcji:

PRZYKŁAD 1

evaluate

Metoda evaluate ma działanie odwrotne do metody toString - zamienia ciąg znaków w obiekt formatu JSON. Pobiera dwa argumenty - ciąg znaków do przetworzenia i parametr decydujący o tym czy ma być sprawdzana poprawność podanego ciągu znaków.

W wypadku gdy pierwszy argument nie jest ciągiem znaków, bądź jest niepoprawnym zapisem formatu JSON i drugi argument jest ustawiony jako true to zwrócona zostanie wartość false.

Składnia metody evaluate:

Json.evaluate('{obiekt}',secure);

Rozbudujmy zatem nasz przykład od kod, który odczyta elegancko zawartości ciasteczka.

Zmienimy jedynie kod funkcji przypisanej jako zdarzenie onclick przycisku btn-read:

$('btn-read').addEvent('click',function(){    var dane = Json.evaluate(Cookie.get('dane'));
   var string = '<strong>Styl:</strong>' + dane.styl + '<br />';
   string += '<strong>Nick:</strong>' + dane.nick + '<br />';
   string += '<strong>Notatka:</strong> ' + dane.notatka + '<br />';
   $('cookie-content').setHTML(string);
});

Poniżej zmieniony kod:

PRZYKŁAD 2

Jak widać plik json.js mimo zaledwie dwóch metod jakie zawiera, otwiera przed nami zupełnie nowe możliwości przekazywania, przechowywania i pobierania danych.

W następnej części kursu omówimy plik Json.Remote.js - ostatni z plików grupy Remote.