- JavaScript


AdvencedAJAX i xml2json


Biblioteka AdvencedAJAX ( advAJAX ) to obiekt JavaScript autorstwa Łukasza Lacha pozwalający na szybkie i łatwe korzystanie z możliwości popularnej ostatnio technologi AJAX, pozwalającej na ładowanie części strony niezależnie od reszty co niweluje chwilowe "znikanie" strony podczas ładowania. Wadą tego rozwiązania jest to, że wtedy może niepoprawnie działać przycisk "Wstecz" więc jest wykorzystywany głównie przy edytorach online, różnorakich menu i tym podobnych elementach.

Strona z której można pobrać bibliotekę oraz na której jest dokumentacja: http://advajax.anakin.us/index-pl.htm

Natomiast biblioteka xml2json autorstwa Thomas'a Frank'a pozwala łatwo i szybko przekonwertować dane z XML do JSON. Zaletą tego drugiego jest to, iż jest łatwo dostępny z poziomu JavaScript i o wiele bardziej intuicyjny w trakcie pisania.

Strona z której można pobrać xml2json: http://www.thomasfrank.se/xml_to_json.html

Podstawy advAJAX


Na początek przedstawię sposób pobierania danych z pliku XML za pomocą advAJAX:
 
advAJAX.get({ // metoda .get() może zostać zastąpiona w tym przykładzie przez .post() ( reszta możliwości na stronie projektu )
url: "test.xml", // adres do pobieranego pliku
onSuccess : function(obj) { alert(obj.responseText); } // jeśli wszystko się powiedzie to wyświetlamy okienko alert() z zawartością pliku test.xml
});
 

Oczywiście to nie wszystkie możliwości tej biblioteki, ale ich omówienie nie ma nic wspólnego z naszym artykułem. Dla zainteresowanych odsyłam do strony projektu podanej wyżej.

advAJAX i JSON


JSON jest bardzo łatwy w zapisie przy wykorzystaniu JS, ale jego zapis jest dość zagmatwany:
Przykład zapisu JSON:
{"menu": {
  "id": "file",
  "value": "File",
  "popup": {
    "menuitem": [
      {"value": "New", "onclick": "CreateNewDoc()"},
      {"value": "Open", "onclick": "OpenDoc()"},
      {"value": "Close", "onclick": "CloseDoc()"}
    ]
  }
}}
 

i identycznego zapisu w XML:
 
<menu id="file" value="File">
  <popup>
    <menuitem value="New" onclick="CreateNewDoc()" />
    <menuitem value="Open" onclick="OpenDoc()" />
    <menuitem value="Close" onclick="CloseDoc()" />
  </popup>
</menu>
 

Jak widać zapis XML jest trochę bardziej przejrzysty ( przynajmniej dla mnie ). Jednak dostęp do danych zwracanych przez obj.responseXML przez DOM jest dość zagmatwany, natomiast JSON "daje" się odczytać błyskawicznie:
 
var element = obj.menu.popup.menuitem[0].value; //pobieramy wartość atrybutu value pierwszego elementu <menuitem>
 

Więc jak to zrobić by z pliku XML można korzystać tak łatwo jak z JSON?? A skorzystać z funkcji parse() z biblioteki xml2json.
 
var objJSON = xml2json.parse(obj.responseText);
 


Skoro już wiemy jak to działa to spróbujmy połączyć to wszystko w jeden plik:
 
advAJAX.get({
url: "test.xml",
onSuccess : function (obj) {
  var objJSON = xml2json.parse(obj.responseText);
  alert(objJSON.menu.popup.menuitem[0].value;
}
});
 


To oczywiście tylko próbka możliwości połączenia tych dwóch bibliotek, ale na początek wystarczy.


InformacjeRaportuj | Drukuj

Data dodania: 18-11-2017 18:19Autor:WinerFresh
Ilość wyświetleń:702Komentarzy: 3
Komentarze
awmarcz dnia 14-01-2018 13:57
  Chyba Advanced? Trochę zgrzyta ...
awmarcz dnia 14-01-2018 14:01
  strona advAJAX (advajax.anakin.us) nie działa ... strona anakin.us zresztą też ...
WinerFresh dnia 28-01-2018 21:31
  no tak. Jak widać stronę diabli wzięli, a co do Advanced to sorry mój błąd.
Dodaj komentarz
Zaloguj się, żeby móc dodawać komentarze.