Dziudek's jogger

Plik json.remote.js to ostatni składnik grupy Remote. Jest on rozszerzeniem klasy XHR i służy do wymiany danych w formacie JSON za pomocą obiektu XMLHttpRequest.

Posiada on jedną metodę - send oraz jedno własne zdarzenie - onComplete.

Pełna składnia wygląda następująco:

var obiekt = new Json.Remote("adres",{
   onComplete: function(json){
      // w tej funkcji otrzymujemy uchwyt do pobranego obiektu JSON
      // na przykład json.nick
   }
}).send({json});

Składnia może się wydać skomplikowana, ale zaraz wszystko po kolei wytłumaczę ;)

Zmienna adres to oczywiście lokalizacja pliku do którego wyślemy obiekt JSON zadeklarowany jako argument metody send. Zdarzenie onComplete definiuje funkcję, która wykona się po zakończeniu zapytania. Może ona pobierać za argument zwrócony przez skrypt obiekt JSON i w ten sposób otrzymujemy uchwyt do tego obiektu w ciele tej funkcji, zatem możemy się później łatwo odwoływać do właściwości tego obiektu.

Klasa Json.Remote działa w ten sposób, że zamienia podany jako argument metody send obiekt na ciąg znaków i jednocześnie od razu zamienia zwrócony przez skrypt ciąg znaków na obiekt JSON.

Przy wywołaniu możemy zdefiniować w opcjach obok zdarzenia onComplete, także parametr secure, którego działanie już znamy po omówieniu metody evaluate klasy Json.

Pora na przykład użycia tej klasy.

Ponieważ nie mam za bardzo gdzie umieścić przykładu ze skryptem odczytującym JSON (Wymaga PHP 5.2.0, a pisanie skryptu, który by to odczytał według mnie mija się z celem dla tak prostego przykładu) więc skupimy się na pobraniu danych w formacie JSON i ich łatwemu odczytaniu.

Pobierzemy z testowej strony następujący obiekt:

{
   nazwaPliku: "json.txt",
   autorPliku: "Dziudek",
   domena: "dziudek.ovh.org"
}

Oczywiście na stronie będzie on widniał w postaci:

{"nazwaPliku": "json.txt","autorPliku": "Dziudek","domena": "dziudek.ovh.org"}

Odczytana zawartość zostanie umieszczona w odpowiednim elemencie strony z przykładem.

Tworzymy obiekt klasy Json.Remote:

new Json.Remote("json.txt").send();

Nasz uchwyt do pobranego obiektu nazwiemy danePliku - tworzymy szkielet zdarzenia onComplete:

new Json.Remote("json.txt",{
   onComplete: function(danePliku){
      var string = '<strong>Nazwa pliku:</strong> ' + danePliku.nazwaPliku + '<br />';
      string += '<strong>Autor pliku:</strong> ' + danePliku.autorPliku + '<br />';
      string += '<strong>Domena:</strong> ' + danePliku.domena + '<br />';
      $('console').setHTML(string);

   }
}).send();

Ważna uwaga - niezależnie od tego czy wysyłamy jakieś dane w formacie JSON, czy tylko zamierzamy je pobrać MUSIMY dodać metodę send - dopiero wtedy będzie można odczytać dane - przy inicjalizacji obiektu jest tylko tworzony obiekt klasy XHR, ale NIE jest wysyłane od razu zapytanie...

Na koniec podpinamy nasz kod pod zdarzenie onclick przycisku i całość umieszczamy jako kod zdarzenia onload (lub DOMContentLoaded jak kto woli) obiektu window.

Działający przykład poniżej:

PRZYKŁAD

Jak widać klasa Json.Remote znacząco upraszcza proces wysyłania i pobierania danych zapisanych w formacie JSON. Tą częścią kursu zakończyliśmy omawianie sekcji Remote - w następnej części kursu zajmiemy się efektami, krótko mówiąc będziemy co nieco animowali ;)