Przetwarzanie dokumentów XML i zaawansowane techniki WWW Wykład 10

Transkrypt

1 Plan Przetwarzanie dokumentów XML i zaawansowane techniki WWW Wykład 10 T. Romańczukiewicz Jagiellonian University 2009/2010

2 Plan Plan 1 AJAX 2 Podsumowanie

3 Plan AJAX Podsumowanie Przypomnienie AJAX - wstęp Prykłady AJAX i JSON Frameworki 1 AJAX Przypomnienie AJAX - wstęp Prykłady AJAX i JSON Frameworki 2 Podsumowanie

4 XML, poprawnie sformuowanie Sposoby opisu XML DTD XML Schema XPATH Sposoby prezentacji CSS XSLT DOM SAX JAXB Serwlety JSP AJAX

5 AJAX AJAX Podsumowanie Przypomnienie AJAX - wstęp Prykłady AJAX i JSON Frameworki AJAX - Asynchronous JavaScript and XML, asynchroniczny JavaScript i XML Wspólna nazwa kilku istniejacych już wcześniej narzędzi takich jak JavaScript, DOM, CSS, XML itp Technika tworzenia interaktywnych aplikacji, w dużym stopniu polegajacych na kodzie JavaScript po stronie klienta Realizuje asynchroniczne odwołania do serwera Pobieranie danych z serwera odbywa się bez konieczności odświeżenia całej strony w przegladarce Dane sa najczęściej generowane przez skrypt lub aplikację innego typu po stronie serwera. Oferuje poziom interaktywności zbliżony do aplikacji desktopowych (GoogleMaps, GoogleDocuments, GoogleSuggest, Google*) W klasycznym modelu stron WWW: Serwer nie zauważał żadnej aktywności użytkownika wprowadzajacego dane np do formularza, aż do momentu zatwierdzenia całego formularza. Nowa strona generowana na serwerze była w całości przesyłana do użytkownika Niepotrzebne wydłużanie procedury i obciażanie łacza Klasyczy model dobry do prezentowania statycznych danych

6

7 Model AJAX Przegladarka uruchamia aplikację a nie tylko prezentuje strony Logika aplikacji zaimplementowana jest w języku JavaScript (AJAX engine) Dane po pobraniu z serwera sa zapisywane w przegladarce jedynie w miejscu, gdzie doszło do zmiany Dokument modyfikowany jest poprzez interfejs DOM z poziomu JavaScript Elementy składowe AJAX JavaScript (X)HTML + CSS, najlepiej dobrze sformułowany XML - podstawowy format danych pobieranych przez aplikację JavaScript Uwaga: stosuje się też częśto dane czysto tekstowe oraz dane w formacie JSON (JavaScript Object Notation) Obiekt XMLHttpRequest - służy on do obsługi żadań HTTP wysyłanych przez kod JavaScript asynchronicznie do serwera umożliwia również pobieranie z serwera danych w innych formatach niż XML (np. JSON lub czysty tekst)

8 Przegladarka tworzy obiekt XMLHttpRequest z żadaniem (Wszędzie tak samo z wyjatkiem M$ IE 5 i 6) Obiekt XMLHttpRequest wysyłany jest do serwera Serwer przetwarza żadanie i tworzy odpowiedź Odpowiedź wysyłana jest do przegladarki Przegladarka przetwarza odpowiedź i uaktualnia stronę

9 Tworzenie XMLHttpRequest W większości przegladarek (IE7+, Opera, Chrome, FF) obiekt XMLHttpRequest tworzony jest przypomocy xmlhttp=new XMLHttpRequest();. Starsze przegladarki (IE5 i IE6) korzystaja z xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); Można łatwo napisać ogólny kod: Listing 1: XMLHttpRequest 1 if (window.xmlhttprequest) 2 { / / code f o r IE7 +, F i r e f o x, Chrome, Opera, S a f a r i 3 xmlhttp=new XMLHttpRequest(); 4 } 5 else 6 { / / code for IE6, IE5 7 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 8 } Alternatywnie używa się również konstrukcji try-catch. W zasadzie jest to jedyny fragment kodu, który zależy od przegladarki.

10 Aby wysłać żadanie do serwera korzysta się z metod open(method,url,async), gdzie method: typ żadania: GET lub POST url: lokalizacja pliku na serwerze async: true (asynchronous) lub false (synchronous) send(string) wysyła żadanie do serwera. Dla metody GET brak argumentu.

11 Przykady wysyłania żadania: 1 xmlhttp.open("get","demo_get.asp",true); / / n a j p r o s t s z e 2 xmlhttp.open("get","demo_get.asp?t=" + Math.random(),true); / / unikalne URL brak cachowania 3 xmlhttp.open("get","demo_get2.asp?fname=henry&lname=ford",true); / / dodatkowe i n f o r m a c j e 4 xmlhttp.send(); 5 6 (...) 7 8 xmlhttp.open("post","ajax_test.asp",true); 9 xmlhttp.setrequestheader("content-type","application/x-www-form-urlencoded"); 10 xmlhttp.send("fname=henry&lname=ford");

12 (A)synchroniczność AJAX Podsumowanie Przypomnienie AJAX - wstęp Prykłady AJAX i JSON Frameworki Pojęcie asynchroniczności jest podstawowe dla AJAXa i było ogromnym udoskonaleniem jeśli chodzi o tworzenie stron WWW. Często operacje wykonywane na serwerze sa czasochłonne. Przed AJAXem mogło to powodować zawieszanie sie aplikacji webowych. W AJAXie JavaScript może wykonywać inne skrypty oczekujac na odpowiedź z servera Listing 2: przykład 1 xmlhttp.onreadystatechange=function() 2 { 3 if (xmlhttp.readystate==4 && xmlhttp.status==200) 4 document.getelementbyid("mydiv").innerhtml=xmlhttp.responsetext; 5 } 6 xmlhttp.open("get","ajax_info.txt",true); 7 xmlhttp.send(); 8 9 (...) xmlhttp.open("get","ajax_info.txt",false); 12 xmlhttp.send(); 13 document.getelementbyid("mydiv").innerhtml=xmlhttp.responsetext; Uwaga: użycie async=false jest niepolecane, jednak czasami może być ono wskazane.

13 Po przesłaniu żadanie na serwer przygotowywana jest odpowiedź, która przesyłana jest w obiekcie również w obiekcie XMLHttpRequest, a można ja odczytać np poprzez zmienna responsetext lub responsexml: Listing 3: przykład 1 document.getelementbyid("mydiv").innerhtml=xmlhttp.responsetext; 2 (...) 3 xmldoc=xmlhttp.responsexml; 4 var txt=""; 5 x=xmldoc.getelementsbytagname("artist"); 6 for (i=0;i<x.length;i++) 7 { 8 txt=txt + x[i].childnodes[0].nodevalue + "<br />"; 9 } 10 document.getelementbyid("mydiv").innerhtml=txt;

14 Zdarzenie onreadystatechange Gdy odpowiedź przesłana zostanie z serwera należy wykonać jakaś czynność. Zdarzenie onreadystatechange (a dokładniej funkcja przechowywana w onreadystatechange) wykonywane jest za każdym razem gdy zmieni się wartość readystate w obiekcie XMLHttpRequest. readystate: 0 żadanie nie zostało zainicjalizowane 1 połaczenie z serwerem zostało ustanowione 2 odpowiedź została otrzymana 3 przetwarzanie żadania 4 żadanie zostało zakończone i odpowiedź jest gotowa status 200 OK 404 strona nie została odnaleziona

15 1 xmlhttp.onreadystatechange=function() 2 { 3 if (xmlhttp.readystate==4 && xmlhttp.status==200) 4 document.getelementbyid("mydiv").innerhtml=xmlhttp.responsetext; 5 } 6 7 (...) 8 9 function myfunction() 10 { 11 loadxmldoc("ajax_info.txt",function() 12 { 13 if (xmlhttp.readystate==4 && xmlhttp.status==200) 14 document.getelementbyid("mydiv").innerhtml=xmlhttp.responsetext; 15 }); 16 }

16 Przykład: wyszukiwanie tekstu Listing 4: showhint 1 function showhint(str) 2 { 3 if (str.length==0) 4 { 5 document.getelementbyid("txthint").innerhtml=""; 6 return; 7 } 8 if (window.xmlhttprequest) xmlhttp=new XMLHttpRequest(); 9 else xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); xmlhttp.onreadystatechange=function() 12 { 13 if (xmlhttp.readystate==4 && xmlhttp.status==200) 14 document.getelementbyid("txthint").innerhtml=xmlhttp.responsetext; 15 } 16 xmlhttp.open("get","gethint.asp?q="+str,true); 17 xmlhttp.send(); 18 }

17 Przykład: wyszukiwanie tekstu c.d. Listing 5: showhint 1 <?php 2 3 $a[]="anna"; 4 $a[]="wenche"; 5 $a[]="vicky"; 6 7 / / g e t t h e q parameter from URL 8 $q=$_get["q"]; 9 10 / / lookup a l l h i n t s from a r r a y i f l e n g t h o f q>0 11 if (strlen($q) > 0) 12 { 13 $hint=""; 14 for($i=0; $i<count($a); $i++) 15 { 16 if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q)))) 17 { 18 if ($hint=="") $hint=$a[$i]; 19 else $hint=$hint.", ".$a[$i]; 20 } 21 } 22 } / / Set output to " no suggestion " i f no h i n t were found 25 / / or t o t h e c o r r e c t v a l u e s 26 if ($hint == "") $response="no suggestion"; 27 else $response=$hint; / / o u t p u t t h e r e s p o n s e 30 echo $response; 31?>

18 Przykład: AJAX i Bazy danych 1 <html><head> 2 <script type="text/javascript"> 3 function showuser(str) { 4 if (str=="") { 5 document.getelementbyid("txthint").innerhtml=""; 6 return; 7 } 8 if (window.xmlhttprequest) xmlhttp=new XMLHttpRequest(); 9 else xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 10 xmlhttp.onreadystatechange=function() { 11 if (xmlhttp.readystate==4 && xmlhttp.status==200) 12 document.getelementbyid("txthint").innerhtml=xmlhttp.responsetext; 13 } 14 xmlhttp.open("get","getuser.php?q="+str,true); 15 xmlhttp.send(); 16 } 17 </script> 18 </head> 19 <body> 20 <form> 21 <select name="users" onchange="showuser(this.value)"> 22 <option value="">select a person:</option> 23 <option value="1">peter Griffin</option> 24 <option value="2">lois Griffin</option> 25 <option value="3">glenn Quagmire</option> 26 <option value="4">joseph Swanson</option> 27 </select> 28 </form><br /> 29 <div id="txthint"><b>person info will be listed here.</b></div> 30 </body>

19 1 <?php 2 $q=$_get["q"]; 3 $con = mysql_connect( localhost, peter, abc123 ); 4 if (!$con) die( Could not connect:. mysql_error()); 5 6 mysql_select_db("ajax_demo", $con); 7 8 $sql="select * FROM user WHERE id = ".$q." "; 9 10 $result = mysql_query($sql); echo "<table border= 1 > 13 <tr> 14 <th>firstname</th> 15 <th>lastname</th> 16 <th>age</th> 17 <th>hometown</th> 18 <th>job</th> 19 </tr>"; while($row = mysql_fetch_array($result)) 22 { 23 echo "<tr>"; 24 echo "<td>". $row[ FirstName ]. "</td>"; 25 echo "<td>". $row[ LastName ]. "</td>"; 26 echo "<td>". $row[ Age ]. "</td>"; 27 echo "<td>". $row[ Hometown ]. "</td>"; 28 echo "<td>". $row[ Job ]. "</td>"; 29 echo "</tr>"; 30 } 31 echo "</table>"; 32 mysql_close($con);?>

20 XML a JSON AJAX Podsumowanie Przypomnienie AJAX - wstęp Prykłady AJAX i JSON Frameworki Listing 6: XML 1 <?xml version= 1.0 encoding= UTF-8?> 2 <card> 3 <fullname>sean Kelly</fullname> 4 <org>sk Consulting</org> 5 < addrs> 6 <address type= work >kelly@seankelly.biz</address> 7 <address type= home pref= 1 >kelly@seankelly.tv</address> 8 </ addrs> 9 <telephones> 10 <tel type= work pref= 1 > </tel> 11 <tel type= fax > </tel> 12 <tel type= mobile > </tel> 13 </telephones> 14 <addresses> 15 <address type= work format= us >1234 Main St 16 Springfield, TX </address> 17 <address type= home format= us >5678 Main St 18 Springfield, TX </address> 19 </addresses> 20 <urls> 21 <address type= work > 22 <address type= home > 23 </urls> 24 </card>

21 XML a JSON c.d. AJAX Podsumowanie Przypomnienie AJAX - wstęp Prykłady AJAX i JSON Frameworki Listing 7: JSON 1 { 2 "fullname": "Sean Kelly", 3 "org": "SK Consulting", 4 " addrs": [ 5 {"type": "work", "value": "kelly@seankelly.biz"}, 6 {"type": "home", "pref": 1, "value": "kelly@seankelly.tv"} 7 ], 8 "telephones": [ 9 {"type": "work", "pref": 1, "value": " "}, 10 {"type": "fax", "value": " "}, 11 {"type": "mobile", "value": " "} 12 ], 13 "addresses": [ 14 {"type": "work", "format": "us", 15 "value": "1234 Main StnSpringfield, TX "}, 16 {"type": "home", "format": "us", 17 "value": "5678 Main StnSpringfield, TX "} 18 ], 19 "urls": [ 20 {"type": "work", "value": " 21 {"type": "home", "value": " 22 ] 23 }

22 JSON AJAX Podsumowanie Przypomnienie AJAX - wstęp Prykłady AJAX i JSON Frameworki JSON and. JavaScript Object Notation Format danych oparty na JavaScript Struktura zagnieżdżenia elemetnów podobna jak w XML JSON jest również formatem textowym Jest praktycznie tak samo czytelny jak XML Ma mniej redundancji - przez to jest zazwyczaj nieco lżeszy XML jest dobrym narzędziem do tworzenia dokumentów JSON jest dobrym formatem do przesyłania danych Jest jeden obiekt z zagnieżdżonymi innymi objektami, tablicami, stringami, liczbami itp. Największa zaleta jest szybki i łatwy sposób wykorzystania w JavaScripcie (JSON jest podzbiorem js)

23 Jeśli chodzi o pobieranie danych wszystko wyglada tak samo: 1 var req = new XMLHttpRequest(); 2 req.open("get", " / async /true); 3 req.onreadystatechange = myhandler; 4 req.send(/ no params /null); Odczytywanie z pliku XML z wykorzystaniem modelu DOM: 1 function myhandler() { 2 if (req.readystate == 4 / complete /) { 3 / / Update a d d r e s s f i e l d i n a form w i t h f i r s t s t r e e t a d d r e s s 4 var addrfield = document.getelementbyid( addr ); 5 var root = req.responsexml; 6 var addrselem = root.getelementsbytagname( addresses )[0]; 7 var firstaddr = addrselem.getelementsbytagname( address )[0]; 8 var addrtext = fistaddr.firstchild; 9 var addrvalue = addrtext.nodevalue; 10 addrfield.value = addrvalue; 11 } 12 }

24 To samo ale z użyciem danych w formacie JSON: 1 unction myhandler() { 2 if (req.readystate == 4 / complete /) { 3 var addrfield = document.getelementbyid( addr ); 4 var card = eval( ( + req.responsetext + ) ); 5 addrfield.value = card.addresses[0].value; 6 } 7 } Co prawda w przeciwieństwie do poprzedniego przypadku odpowiedź należy sparsować (XML od razu jest przekazywany w postaci obiektu DOM), ale parsowanie danych w formacie JSON to tylko jedna linijka (4). Dane sa bezpośrednio dostępne z poziomu JavaScript, tak jak wszystkie inne dane, co bardzo ułatwia ich odczytywanie. Funkcja eval wykonuje wszystkie skrypty gdy napotka kod JavaScript. Ze względów bezpieczeństwa można używać metody parse, która opuszcza skrypty.

25 Prototype JavaScript Framework - rozbudowana biblioteka JavaScript. Zawiera wiele rozwiazań wspomagajacych operacje na DOM, programowanie AJAX, i wiele innych. $() funkcja dolara jest używana jako skrót do metody getelementbyid. By odwołać się do obiektu DOM w stronie HTML: $("moj_element").style.display = "none"; $F() zwraca wartość pola formularza. Na przykład dla elementu text zwróci wartość pola: $$() funkcja podwójnego dolara jest silnikiem selektorów CSS. Można używać takich samych selektorów jakich się używa w arkuszu stylów. Obiekt AJAX oferowany przez Prototype, jest przenośny między przegladarkami. Posiada dwie główne metody: Ajax.Request() i Ajax.Updater(). 1 var url = " 2 3 var myajax = new Ajax.Request(url, { 4 parameters: { 5 imie: $F("imie"), 6 wiek: $F("wiek") 7 }, 8 onsuccess: function(t) { 9 alert(t); 10 }, 11 onfailure: function(t) { 12 alert( Error... ); 13 } 14 });

26 Biblioteka script.aculo.us jest udostępniana na Licencji X11, a baza dla tej biblioteki jest Prototype JavaScript Framework, więc często sa one spotykane razem. Aculo.us rozszerza Prototype JS o animacje oraz różne efekty wizualne, czy też o elementy interfejsu użytkownika na bazie obiektowego modelu dokumentu DOM. jquery lekka biblioteka programistyczna dla języka JavaScript, ułatwiajaca korzystanie z JavaScript (w tym manipulację drzewem DOM). Pozwala osiagn ać interesujace efekty animacji, dodać dynamiczne zmiany strony, wykonać zapytania AJAX. jquery UI - jest rozszerzeniem biblioteki jquery o bogaty zestaw komponentów graficznych i widgetów Adobe Spry framework JS / Ajax od firmy Adobe. Bardzo bogaty, posiadajacy wiele elementów, m.in: efekty(animacje, przenikanie, potrzasanie, itd), wsparcie do przetwarzania XML, JSON, HTML, XML, MooTools modułowa biblioteka JavaScript. mintajax rozbudowana, łatwa w użyciu i darmowa biblioteka JavaScript o małych rozmiarach przeznaczona do prostego, szybkiego i wygodnego tworzenia dynamicznych stron internetowych.

27 Plan AJAX Podsumowanie 1 AJAX 2 Podsumowanie

28 AJAX Podsumowanie AJAX - podsumowanie Zbiór kilku narzędzi do dynamicznego i asynchronicznego tworzenia stron WWW (JavaScript, DOM, XML, XMLHttpRequest) Pozwala na tworzenie interaktywnych aplikacji webowych, bez konieczności przeładowywania całej strony Przegladarka tworzy obietk XMLHttpRequest, w którym umieszczane jest żadanie wysyłane do serwera Po otrzymaniu odpowiedzi z servera JavaScript analizuje odpowiedź i aktualizuje jedynie te fragmenty, których dotycza zmiany Odpowiedzi najczęsciej sa przesyłane w postaci zwykłego tekstu, XML lub w formacie JSON Dane z XML można przetwarzać przy pomocy modelu DOM Dane z JSON sa już praktycznie w formacie danych JavaScript - nie potrzebne sa złożone procedury wybierania odpowiednich elementów.