czwartek, 4 czerwca 2015

[JSON] Podstawy i struktura formatu JSON

TRUE
1538721816456079164
JSON to skrót od JavaScript Object Notation, w wolnym tłumaczeniu Notacja Obiektowa JavaScriptu. Jak sama nazwa wskazuje, format stanowi podzbiór języka JavaScript, w którym to służy on jako wewnętrzny język do opisywania obiektów. Nie ogranicza to bynajmniej pola, na którym można go stosować do samego tylko JavaScriptu, a wręcz przeciwnie - pomimo nazwy format ten jest używany powszechnie do wymiany danych we wszystkich praktycznie językach. Jest absolutnie niezależny od platformy, gdyż jego implementacja moze znaleźć się w praktycznie dowolnej aplikacji. Jest to zatem bardzo uniwersalny format, z powodzeniem wykorzystywany w celu wymiany danych pomiędzy aplikacjami.

JSON jest bardzo lekkim formatem - jego składnia ograniczona jest do minimum, jest to wręcz banalnie prosty, tekstowy format, w którym poza samymi danymi stosuje się raptem kilka innych ograniczników, takich jak przecinek, czy nawiasy. Przez taki minimalizm jest on niestety trochę mniej czytelny dla człowieka, niż np. XML, ale za to nadrabia małym rozmiarem, gdyż nie posiada w sobie żadnych elementów takich jak znaczniki w XML-u. Warto znać JSON-a, gdyż jest on bardzo przydatny w wymianie danych, szczególnie sieciowych. W artykule tym omówimy podstawowe rzeczy, takie jak składnia, a w następnych artykułach zobaczymy jak pracować na danych z JSON-a w językach PHP i Javascript.


Podstawowe zasady

W JSON-ie obowiązuje kilka kluczowych reguł jakich należy się trzymać podczas tworzenia pliku JSON:

  • każdy dokument powinien być kodowany w UTF-8
  • każdy dokument JSON musi zawierać się w głównym nawiasie klamrowym
  • każdy dokument musi zawierać jeden główny element, w którym zawiera się cała reszta
  • wszystkie nazwy elementów/kluczy i ich wartości objęte muszą być cudzysłowami
  • pary klucz-wartość oddzielamy dwukropkiem (klucz : wartość)
  • elementy występujące obok siebie oddzielamy przecinkiem
  • zawartość elementu obejmujemy w nawiasy klamrowe
  • tablice obejmujemy w nawiasy kwadratowe


Struktura JSON-a

Każdy plik JSON musi zawierac się w jednym głównym nawiasie klamrowym, najprostszy, pusty dokument JSON wyglądać będzie więc tak:
[code]
{

}[/code]
Dodajmy teraz nazwę dla głównego elementu, który jest wymagany, niech to będzie np. rodzina:
[code]
{
  "rodzina": {

  }
}[/code]
W JSON-ie każdą definicję obiektu/elementu, która zawierać będzie więcej niż jedno pole obejmujemy w nawias klamrowy.
Dodajmy teraz jakiś element do naszego głównego elementu, niech to będzie np. pole o nazwie nazwa.
W JSON-ie wartości dla danych pól podajemy na zasadzie:
[code]"klucz" : "wartość"[/code]
a w przypadku, gdy mamy do podania wartości kilku pól, to rodzielamy je przecinkiem:
[code]
{
"klucz1" : "wartość1",
"klucz2" : "wartość2",
"klucz3" : "wartość3"
}[/code]
Jak widzimy, w przypadku ilości większej, niż jedno pole całość obejmujemy w nawias klamrowy.
Dodajmy teraz pole nazwa do naszego głównego elementu:
[code]
{
  "rodzina": {
    "nazwa" : "Kowalscy"
  }
}[/code]
Powyższy zapis w XML-u wyglądałby tak:

XML:

[code]
<rodzina>
  <nazwa>Kowalscy</nazwa>
</rodzina>[/code]

Teraz dodajmy kolejny element o nazwie dziadkowie:
[code]
{
  "rodzina": {
    "nazwa" : "Kowalscy",
    "dziadkowie" : {  
 
    }
  }
}[/code]
A w nim kolejny element o nazwie dziadek z polami:

  • imie
  • nazwisko
  • oraz element dzieci, w którym znajdą się kolejne elementy:

[code]
{
  "rodzina": {
    "nazwa" : "Kowalscy",
    "dziadkowie" : {
         "dziadek" : {
            "imie" : "Alojzy",
            "nazwisko" : "Kowalski",
            "dzieci" : {      
         
            }    
       }  
    }
  }
}[/code]
Powyższy zapis w XML-u wyglądałby tak:

XML:

[code]
<rodzina>
  <nazwa>Kowalscy</nazwa>
  <dziadkowie>
    <dziadek>
      <imie>Alojzy</imie>
      <nazwisko>Kowalski</nazwisko>
      <dzieci>    
      </dzieci>
    </dziadek>
  </dziadkowie>
</rodzina>[/code]

A w widoku drzewka wygląda to tak:



Jak teraz dodać innego dziadka?
Zrobienie tego w poniższy sposób będzie błędne:
[code]
{
  "rodzina": {
    "nazwa" : "Kowalscy",
    "dziadkowie" : {
      "dziadek" : {
          "imie" : "Alojzy",
          "nazwisko" : "Kowalski",
          "dzieci" : {      
       
          }    
     `},
      "dziadek" : {
            "imie" : "Alfred",
            "nazwisko" : "Kowalski",
            "dzieci" : {      
         
            }    
      }  
    }
  }
}[/code]

Otóż musimy naszych dziadków ująć w tablicę, a robimy to za pomocą nawiasów kwadratowych:
[code]
{
  "rodzina": {
    "nazwa" : "Kowalscy",
    "dziadkowie" : [
       {"imie" : "Alojzy", "nazwisko" : "Kowalski", "dzieci" : {} },
       {"imie" : "Albert", "nazwisko" : "Kowalski", "dzieci" : {} }
    ]  
  }
}[/code]

Powyższy zapis w XML-u wyglądałby tak:

XML:

[code]
<rodzina>
  <nazwa>Kowalscy</nazwa>
  <dziadkowie>
    <dziadek>
      <imie>Alojzy</imie>
      <nazwisko>Kowalski</nazwisko>
      <dzieci>    
      </dzieci>
    </dziadek>
    <dziadek>
      <imie>Albert</imie>
      <nazwisko>Kowalski</nazwisko>
      <dzieci>    
      </dzieci>
    </dziadek>
  </dziadkowie>
</rodzina>[/code]

A w widoku drzewka prezentuje się tak:



Jak więc widzimy elementy tablicowe umieszczamy w nawiasach kwadratowych, na zasadzie:
[code]
"tablica" : [
  {"elementA1" : "wartośćA1", "elementA2" : "wartośćA2"},
  {"elementB1" : "wartośćB1",  "elementB2" : "wartośćB2"},
   ...
][/code]

Następnie dodać możemy kolejne zagnieżdżone elementy, jak ojcowie, synowie, wnukowie itd. Ale z tym już polecam poeksperymentować w ramach pracy domowej i pooglądać sobie wyniki swojej pracy na: http://codebeautify.org/jsonviewer


Wykorzystanie JSON-a

JSON jest powszechnie wykorzystywany w komunikacji sieciowej. Dane przesyłane JSON-em są najzwyczajniej w świecie przesyłane szybciej, gdyż objętość dokumentu JSON jest mniejsza, niż dokumentu z tymi samymi danymi zapisanymi w formacie XML. Jest w związku z tym również szeroko stosowany podczas przesyania danych AJAX-em. JSON jest ponadto wewnętrznie wykorzystywany przez Javascript jako jego naturalny język zapisu obiektów.

Praca z JSON-em jest wygodna zarówno po stronie Javascriptu, jak i PHP, gdzie możemy dowolnie wymieniać się danymi. Ponadto konwersja pomiędzy JSON-em, a XML-em jest dziecinnie prosta, tak samo jak serializacja i deserializacja obiektów i tablic robiona przy pomocy formatu JSON-a. W następnym artykule poznamy metody służące do pracy z tym formatem, zarówno w PHP, jak i w Javascripcie.

5 komentarzy:

  1. Takie rzeczy niestety dla mnie są całkowicie niezrozumiałe i jestem zdania, że to właśnie programiści się na tym znają. Dla mnie bardzo fajnie na stronie https://czas.tygodnik.pl/pl/639_materialy_partnera/9784_nie-oszczedzaj-na-tworzeniu-strony-internetowej---nie-warto.html opisano to dlaczego nie warto jest oszczędzać na samym tworzeniu stron internetowych.

    OdpowiedzUsuń
    Odpowiedzi
    1. Php Majster: [Json] Podstawy I Struktura Formatu Json >>>>> Download Now

      >>>>> Download Full

      Php Majster: [Json] Podstawy I Struktura Formatu Json >>>>> Download LINK

      >>>>> Download Now

      Php Majster: [Json] Podstawy I Struktura Formatu Json >>>>> Download Full

      >>>>> Download LINK WK

      Usuń
  2. Bardzo szczegółowe nauczanie, dzięki za udostępnienie

    OdpowiedzUsuń
  3. Od kiedy HTML jest bardziej czytelny dla człowieka niż json? xd Ciężko znaleźć coś mniej czytelnego niz HTML... HTML jest po to żeby to ładniej silnik przeglądarki zinterpretwał jako elementy strony, a nie żeby go człowiek czytał. JSON wizualnie w porównaniu do HTMLa i yamla prezentuaje się moim zdaniem najlepiej.

    OdpowiedzUsuń

Masz sugestię? Znalazłeś błąd? Napisz komentarz! :)

webmaester.pl - profesjonalne projektowanie WWW i webaplikacji
webmaester.pl - profesjonalne projektowanie WWW i webaplikacji