WYKŁAD 3 XML DOM XML DOCUMENT OBJECT MODEL CZĘŚĆ 1

Transkrypt

1 WYKŁAD 3 XML DOM XML DOCUMENT OBJECT MODEL CZĘŚĆ 1

2 XML DOM (ang. XML Document Object Model Obiektowy Model Dokumentu XML) Inaczej drzewo DOM to hierarchiczny, obiektowy model dokumentu XML. DOM to platforma i niezależny od języka interface, który pozwala programom dynamicznie modyfikować strukturę, wygląd i zawartość dokumentów. DOM definiuje obiekty i właściwości dla wszystkich elementów i udostępnia metody dostępu do nich.

3 CECHY XML DOM Dokumenty XML mają strukturę drzewiastą, podobnie jak dokumenty HTML. W dokumencie XML drzewo DOM ma zawsze tylko jeden główny korzeń. Drzewo DOM odpowiada za dostęp do poszczególnych elementów XML.

4 PRZYKŁAD XML DOM txt = xmldoc.getelementsbytagname("title")[0].childnodes[0].nodevalue;

5 WĘZŁY XML DOM (NODES) W XML DOM wszystkie elementy tworzą węzły dokumentu XML. XML DOM informuje, że: Cały dokument XML jest węzłem Wszystkie jego elementy są węzłem Tekst w elementach XML też jest węzłem, tyle, że tekstowym Każdy atrybut jest węzłem atrybutów Komentarze są węzłami komentarzy

6 PRZYKŁAD <bookstore> <book category="cooking"> <title lang="en">everyday Italian</title> <author>giada De Laurentiis</author> <year>2005</year> <price>30.00</price> </book> <book category="children"> <title lang="en">harry Potter</title> <author>j K. Rowling</author> <year>2005</year> <price>29.99</price> </book> <book category="web"> <title lang="en">xquery Kick Start</title> <author>james McGovern</author> <author>per Bothner</author> <author>kurt Cagle</author> <author>james Linn</author> <author>vaidyanathan Nagarajan</author> <year>2003</year> <price>49.99</price> </book> <book category="web" cover="paperback"> <title lang="en">learning XML</title> <author>erik T. Ray</author> <year>2003</year> <price>39.95</price> </book> </bookstore>

7 HIERARCHIA WĘZŁÓW Węzły w drzewie są ułożone hierarchicznie. Wzajemne relacje opisuje się poprzez rodzica, dziecko i rodzeństwo. Rodzice mają dzieci, dzieci z tego samego poziomu są rodzeństwem. Pierwszy węzeł jest określany jako korzeń (root) Każdy węzeł (oprócz korzenia) ma dokładnie jednego rodzica Każdy rodzic może mieć wiele dzieci Liść to węzeł bez dzieci Rodzeństwo to dzieci z tym samym rodzicem

8 DOSTĘP DO WĘZŁÓW Istnieją trzy sposoby dostępu do węzłów: 1. Metoda getelementsbytagname() 2. Przechodzenie przez drzewo 3. Nawigowanie po drzewie używając relacji między węzłami

9 getelementsbytagname() Metoda getelementsbytagname() zwraca tablicę wszystkich elementów z podanym znacznikiem. node.getelementsbytagname("tagname"); Wszystkie elementy title w węźle x: x.getelementsbytagname("title"); Wszystkie elementy w dokumencie: xmldoc.getelementsbytagname("title"); gdzie xmldoc odpowiada za węzeł całego dokumentu.

10 WŁAŚCIWOŚCI DOM x.nodename nazwa elementu x x.nodevalue wartość elementu x x.parentnode węzeł nadrzędny elementu x x.childnodes węzły podrzędne elementu x x.attributes atrybuty elementu x METODY DOM x.getelementsbytagname(name) elementy o tej nazwie znacznika x.appendchild(node) wstawienie elementu do węzła x.removechild(node) usunięcie elementu z węzła

11 JSON CZĘŚĆ 2

12 JSON: JAVASCRIPT OBJECT NOTATION JSON to sposób zapisywania, przechowywania i wymiany danych w formacie obiektów JavaScript. Powstał jako prostsza alternatywa dla XML. Podobnie jak XML ma postać dokumentów tekstowych. Podobnie jak XML daje możliwość opisania danych. Podobnie jak XML jest hierarchiczny. Łatwy do parsowania w różnych językach. Do wczytywania dokumentów można użyć obiektu XMLHttpRequest.

13 XML VS JSON - RÓŻNICE JSON nie używa tagów głównych i kończących; JSON jest krótszy; JSON jest szybszy do czytania i pisania; JSON umożliwia wykorzystanie tablic. XML musi być parsowany przez parser XML, JSON może być przetworzony przez standardową funkcję JavaScript.

14 FORMAT JSON VS XML JSON {"employees":[ {"firstname":"john", "lastname":"doe"}, {"firstname":"peter", "lastname":"jones"} ]} XML <employees> <employee> <firstname>john</firstname> <lastname>doe</lastname> </employee> <employee> <firstname>peter</firstname> <lastname>jones</lastname> </employee> </employees>

15 PRZETWARZANIE PLIKÓW XML Pobierz dokument XML, Użyj XML DOM do przejścia przez dokument, Pobierz wartości i umieść w zmiennych. JSON Pobierz dokument JSON, Użyj JSON.Parse.

16 PRZYKŁAD 1 <script> var text = '{"employees":[' + '{"firstname":"john","lastname":"doe" },' + '{"firstname":"peter","lastname":"jones" }]}'; obj = JSON.parse(text); document.getelementbyid("demo").innerhtml = obj.employees[0].firstname + " " + obj.employees[0].lastname; </script>

17 PRZYKŁAD 2 AJAX <script> var xmlhttp = new XMLHttpRequest(); var url = "myemployees.txt"; xmlhttp.onreadystatechange = function() { if (xmlhttp.readystate == 4 && xmlhttp.status == 200) { var myemp = JSON.parse(xmlhttp.responseText); myfunction(myemp); } }; xmlhttp.open("get", url, true); xmlhttp.send(); function myfunction(emp) { var out = "", var i; for(i = 0; i < emp.length; i++) { out += emp[i].firstname + ' ' + emp[i].lastname + '<br>'; } document.getelementbyid("demo").innerhtml = out; }</script>

18 DZIĘKUJĘ ZA UWAGĘ MATERIAŁY POMOCNICZE