Format JSON i JavaScript.

JavaScript

Poziom średnio-zaawansowany

Witamy w kolejnym artykule. Pisząc i poruszając kolejne tematy, czujemy się zobligowani do napisania o JSON (JavaScript Object Notation). Jest to lekki format wymiany danych komputerowych. JSON jest formatem tekstowym, i można traktować go jak podzbiór języka JavaScript.

Format JSON w JavaScript

Typ MIME dla formatu JSON to application/json. Ze względu na przydatność i wygodę użycia jest często spotykany w aplikacjach WWW (a nawet mobilnych), w tym często wybierany zamiast XML jako nośnik danych w aplikacjach korzystających z AJAX.

Co prawda JSON kojarzy się głównie z JavaScriptem, i umożliwia zapis całych obiektów tego języka w swojej notacji, to jednak JSON jest formatem niezależnym od konkretnego języka.

Wiele innych języków programowania obsługuje ten format danych przez dodatkowe pakiety bądź biblioteki. Są to m.in. ActionScript, C i C++, C#, Java, Perl, PHP, Python, Ruby.

JSON to znakomity sposób serializacji danych.

Na oficjalnej stronie formatu JSON znajdziemy sporo informacji i narzędzi, w tym biblioteki dla wielu innych języków programowania.

Przykład podstawowy – użycie formatu JSON w JavaScript:

var obj_txt = '{"imie": "Ewa", "nazwisko": "Fajna", "adres":{';
    obj_txt += '"ulica": "Ajaksowa 77", "miasto": "Sopot"}}';

var obj = eval("(" + obj_txt +")");

var str = "Dane odczytane z obiektu JSON:\n";
str += "Imię: " + obj.imie + "\n";
str += "Nazwisko: " + obj.nazwisko + "\n";
str += "Adres ulica: " + obj.adres.ulica + "\n";
str += "Adres miasto: " + obj.adres.miasto + "\n";

alert(str);

Jest to przykład przetwarzania danych w zapisanych w notacji JSON.

Przykład – użycie JSON z AJAX:

Wklejmy poniższą zawartość do pliku books.json:

var book= {
    "title" : "Tutorial JavaScript",
    "author" : "Jan Kowalski",
};

Zwykle po prostu przesyła się dane w żądaniu, ale załóżmy że mamy zapisany JSON w pliku na serwerze. Można go wczytać a następnie odtworzyć.

Przykład – odczytanie danych w formacie JSON (wywołanie AJAX):

// ...
AJAX.open("GET", "books.json");

var json = XMLHttp.responseText;
var book = eval("(" + json + ")");
var title = book.title; // odwołanie

JSONP

Spójrzmy na ten fragment kodu (wywołanie AJAX z użyciem jQuery):

$.ajax({
  url: tokenUrl,
  dataType: "jsonp",
  success: function(results) {
    ...
  }
});

Czasem możemy spotkać określenie dataType: „jsonp” zamiast json.

Chodzi tutaj o „JSON with Padding„. Jest to mechanizm używany do komunikacji (jak pobieranie danych) z innej domeny (cross-domain request).

Biblioteka JSON-js i serializacje

Chcąc pracować z JSON, śmiało możemy postawić na bibliotekę napisaną przez samego Douglasa Crockforda.

Dołączenie biblioteki JSON-js:

<script type="text/javascript" src="//raw.github.com/douglascrockford/JSON-js/master/json2.js"></script>

Dostajemy narzędzie do wygodnej pracy z JSON w JavaScript. Szczególnie metoda JSON.stringify, która konwertuje wartość podaną jako argument, do poprawnej notacji JSON.

Przykłady użycia JSON.stringify:


// ...
data: JSON.stringify(response.data) // przekształć dane z serwera
//...

JSON.stringify(true); // 'true'
JSON.stringify("foo"); // '"foo"'
JSON.stringify({ x: 77 }); // '{"x":77}');
JSON.stringify([2, "true", true]); // '[2,"true",true]');

Swoją drogą analizując kody udostępnione przez Douglasa na Githubie, można nauczyć się czegoś nowego o JavaScript.

Mając po drugiej stronie (AJAX) język PHP, bardzo łatwo możemy implementować dwukierunkową komunikację, gdzie nośnikiem danych jest oczywiście JSON.


Przykład – komunikacja z PHP:

var myArr = [1, 77, 111];
var url = 'server_side.php?arr=' + JSON.stringify(myArr);
// ...

Obsługa po stronie serwera może wyglądać tak:

// server_side.php
$myArr = array();
if (isset($_REQUEST['arr'])) {
  $myArr = json_decode($_REQUEST['arr']);
}

Funkcja json_decode() dekoduje wartość przesłaną jako ciąg (JSON) do danych w odpowiednim formacie (tutaj: tablica).

W drugą stronę, jeśli np. chcemy odesłać jakieś dane do JavaScript, kodujemy je funkcją json_encode(). Sprawa czysta, bez udziwnień.

Podsumowanie

JSON jest bez wątpienia bardzo ważnym formatem służącym do wymiany danych w sieci.

Jest alternatywą dla XML, i patrząc od dłuższego czasu na trendy, w wielu przypadkach staje się on preferowany. Sam także wybieram format JSON kiedy to możliwe, ponieważ po prostu pracuje mi się z nim lepiej niż np. z XML.

Programista WWW i aplikacji mobilnych z wieloletnim doświadczeniem, początkujący bloger. Pasjonat programowania, nowych technologii, e-commerce, a także sportu i motoryzacji.

Twitter LinkedIn Google+ Skype Xing 

Podaj dalej: Share on Facebook1Tweet about this on TwitterShare on Google+1Share on LinkedIn0Share on Tumblr0Digg thisEmail this to someonePin on Pinterest1
Możesz skomentować leave a response, lub podać trackback z własnej strony.