Implementacja JSON

Kilka słów wstępu

Pisząc aplikacje internetowe często spotykamy się z problemem komunikacji pomiędzy częścią kliencką aplikacji (JavaScript lub Flex), czyli interfejsem a częścią serwerową (PHP, Python,Ruby) odpowiedzialną za pobieranie i przetwarzanie danych.

W wielu przykładach wykorzystuje się do tego XML. Takie rozwiązanie ma swoje zalety, ale ma też wady. Największą z nich w przypadku aplikacji internetowych jest rozmiar danych, które trzeba przesłać. Duży rozmiar wynika z nadmiarowości jaką niesie format XML. Wiele znaczników występuje w strukturze wiele razy i nie można użyć struktury podobnej do tablicy, gdzie iterujemy indeksy. W XML’u dla każdej pozycji musi istnieć osobny znacznik.

Weźmy pod uwagę następującą strukturę danych, są to użytkownicy systemu:

$users = array(
	array(
		'name' => 'Adam',
		'age' => '28',
		'projects' => array(
			'Shop','Website','Facebook'
		)
	),
	array(
		'name' => 'Mark',
		'age' => '23',
		'projects' => array(
			'Website','Facebook'
		)
	),
	array(
		'name' => 'Anna',
		'age' => '24',
		'projects' => array(
			'Facebook'
		)
	)
);

Chcąc przesłać dane musimy przekształcić je do formatu XML, czyli otrzymamy następujący wynik:

<?xml version="1.0" encoding="UTF-8"?>
<users>
	<user name="Adam" age="28">
		<projects>
			<project name="Shop"/>
			<project name="Website"/>
			<project name="Facebook"/>
		</projects>
	</user>
	<user name="Mark" age="23">
		<projects>
			<project name="Website"/>
			<project name="Facebook"/>
		</projects>
	</user>
	<user name="Anna" age="24">
		<projects>
			<project name="Facebook"/>
		</projects>
	</user>
</users>

Jak można zauważyć każdy element tablicy projects został 'opakowany’ w znacznik project. Taka struktura zajmuje 446 bajtów.

Teraz przedstawmy te same dane za pomocą formatu JSON (JavaScript Object Notation):

[{"name":"Adam","age":"28","projects":["Shop","Website","Facebook"]},
{"name":"Mark","age":"23","projects":["Website","Facebook"]},
{"name":"Anna","age":"24","projects":["Facebook"]}]

Tak sformatowane dane zajmują znacznie mniej miejsca, bo tylko 181 bajtów. Jak można zauważyć zysk jest spory, a biorąc pod uwagę, że będziemy przesyłać znacznie więcej, oszczędzamy transfer oraz przyspieszamy działanie naszej aplikacji.

Czytaj więcej: Kiedy warto zdecydować się na serwer VPS?

Implementacja

Kodowanie danych w php

Aby zakodować dane w PHP posłużymy się funkcją json_encode(), która jest wbudowana w PHP od wersji 5.2. Dla wcześniejszych wersji PHP możemy wykorzystać dodatkową bibliotekę dostępną tutaj.

Zakładając, że chcemy zakodować naszą zmienną $users kod pliku users.php będzie wyglądał następująco:

<?php
$users = array(...);
echo json_encode($users);
?>

Nie jest to operacja skomplikowana podobnie wygląda sprawa z odkodowaniem danych otrzymanych z JavaScript/Flex. Zakładamy, że dane otrzymujemy za pomocą POST

$dane = json_decode($_POST['dane']);

Teraz pozostało tylko przedstawić obsługę po stronie klienta.

Kodowanie danych w JS

Aby móc korzystać z dobrodziejstw formatu JSON musimy pobrać odpowiednią bibliotekę, która to umożliwi: JSON dla JavaScript lub skorzystać z jQuery.

Przykładowy kod pobierający użytkowników może wyglądać tak:

<html>
  <head>
     <script src="https://code.jquery.com/jquery-1.4.4.js"></script>
  </head>
  <body>
    <script>
      $.getJSON("http://localhost/users.php",{},function(data) {
        for(var i in data) {
          document.write(data[i].name + '<br/>');
        }
      });
    </script>
  </body>
</html>

Powyższy przykład wypisuje imiona użytkowników na ekranie.