Wykład 11

Plan
Przetwarzanie dokumentów XML
i zaawansowane techniki WWW
Wykład 10
T. Romańczukiewicz
Jagiellonian University
2009/2010
T. Romańczukiewicz
XML 10
Plan
Plan
1
AJAX
2
Podsumowanie
T. Romańczukiewicz
XML 10
AJAX Podsumowanie
Przypomnienie AJAX - wstep
˛
Prykłady AJAX i JSON Frameworki
Plan
1
AJAX
Przypomnienie
AJAX - wstep
˛
Prykłady
AJAX i JSON
Frameworki
2
Podsumowanie
T. Romańczukiewicz
XML 10
AJAX Podsumowanie
Przypomnienie AJAX - wstep
˛
Prykłady AJAX i JSON Frameworki
XML, poprawnie sformuowanie
Sposoby opisu XML
DTD
XML Schema
XPATH
Sposoby prezentacji
CSS
XSLT
DOM
SAX
JAXB
Serwlety
JSP
AJAX
T. Romańczukiewicz
XML 10
AJAX Podsumowanie
Przypomnienie AJAX - wstep
˛
Prykłady AJAX i JSON Frameworki
AJAX
AJAX - Asynchronous JavaScript and XML, asynchroniczny JavaScript i XML
Wspólna nazwa kilku istniejacych
˛
już wcześniej narz˛edzi 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 sie˛ bez konieczności odświeżenia całej
strony w przegladarce
˛
Dane sa˛ najcz˛eściej generowane przez skrypt lub aplikacje˛ 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
T. Romańczukiewicz
XML 10
AJAX Podsumowanie
T. Romańczukiewicz
Przypomnienie AJAX - wstep
˛
Prykłady AJAX i JSON Frameworki
XML 10
AJAX Podsumowanie
Przypomnienie AJAX - wstep
˛
Prykłady AJAX i JSON Frameworki
Model AJAX
Przegladarka
˛
uruchamia aplikacje˛ a nie tylko prezentuje strony
Logika aplikacji zaimplementowana jest w jezyku
˛
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 aplikacje˛ JavaScript
Uwaga: stosuje sie˛ też cz˛eś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)
T. Romańczukiewicz
XML 10
AJAX Podsumowanie
Przypomnienie AJAX - wstep
˛
Prykłady AJAX i JSON Frameworki
Przegladarka
˛
tworzy obiekt XMLHttpRequest z żadaniem (Wsz˛edzie 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 strone˛
T. Romańczukiewicz
XML 10
AJAX Podsumowanie
Przypomnienie AJAX - wstep
˛
Prykłady AJAX i JSON Frameworki
Tworzenie XMLHttpRequest
W wiekszoś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
2
3
4
5
6
7
8
if (window.XMLHttpRequest)
{ / / c o d e f o r IE7 + , F i r e f o x , Chrome , Opera , S a f a r i
xmlhttp=new XMLHttpRequest();
}
else
{ / / c o d e f o r IE6 , IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
Alternatywnie używa sie˛ również konstrukcji try-catch.
W zasadzie jest to jedyny fragment kodu, który zależy od przegladarki.
˛
T. Romańczukiewicz
XML 10
AJAX Podsumowanie
Przypomnienie AJAX - wstep
˛
Prykłady AJAX i JSON Frameworki
Aby wysłać żadanie
˛
do serwera korzysta sie˛ 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.
T. Romańczukiewicz
XML 10
AJAX Podsumowanie
Przypomnienie AJAX - wstep
˛
Prykłady AJAX i JSON Frameworki
Przykady wysyłania żadania:
xmlhttp.open("GET","demo_get.asp",true);
// najprostsze
xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true); / / u n i k a l n e URL −
brak cachowania
3 xmlhttp.open("GET","demo_get2.asp?fname=Henry&lname=Ford",true); / / d o d a t k o w e
informacje
4 xmlhttp.send();
1
2
5
6
7
8
9
10
(...)
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
T. Romańczukiewicz
XML 10
AJAX Podsumowanie
Przypomnienie AJAX - wstep
˛
Prykłady AJAX i JSON Frameworki
(A)synchroniczność
Pojecie
˛
asynchroniczności jest podstawowe dla AJAXa i było ogromnym
udoskonaleniem jeśli chodzi o tworzenie stron WWW.
Cz˛esto 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
2
3
4
5
6
7
8
9
10
11
12
13
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
(...)
xmlhttp.open("GET","ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
Uwaga: użycie async=false jest niepolecane, jednak czasami może być ono wskazane.
T. Romańczukiewicz
XML 10
AJAX Podsumowanie
Przypomnienie AJAX - wstep
˛
Prykłady AJAX i JSON Frameworki
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
2
3
4
5
6
7
8
9
10
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
(...)
xmlDoc=xmlhttp.responseXML;
var txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br />";
}
document.getElementById("myDiv").innerHTML=txt;
T. Romańczukiewicz
XML 10
AJAX Podsumowanie
Przypomnienie AJAX - wstep
˛
Prykłady AJAX i JSON Frameworki
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 sie
˛ wartość
readyState w obiekcie XMLHttpRequest.
readyState:
0
1
2
3
4
żadanie
˛
nie zostało zainicjalizowane
połaczenie
˛
z serwerem zostało ustanowione
odpowiedź została otrzymana
przetwarzanie żadania
˛
żadanie
˛
zostało zakończone i odpowiedź jest gotowa
status
200 OK
404 strona nie została odnaleziona
T. Romańczukiewicz
XML 10
AJAX Podsumowanie
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Przypomnienie AJAX - wstep
˛
Prykłady AJAX i JSON Frameworki
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
(...)
function myFunction()
{
loadXMLDoc("ajax_info.txt",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
});
}
T. Romańczukiewicz
XML 10
AJAX Podsumowanie
Przypomnienie AJAX - wstep
˛
Prykłady AJAX i JSON Frameworki
Przykład: wyszukiwanie tekstu
Listing 4: showHint
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest) xmlhttp=new XMLHttpRequest();
else xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
xmlhttp.open("GET","gethint.asp?q="+str,true);
xmlhttp.send();
}
T. Romańczukiewicz
XML 10
AJAX Podsumowanie
Przypomnienie AJAX - wstep
˛
Prykłady AJAX i JSON Frameworki
Przykład: wyszukiwanie tekstu c.d.
Listing 5: showHint
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<?php
$a[]="Anna";
$a[]="Wenche";
$a[]="Vicky";
/ / g e t t h e q p a r a m e t e r f r o m URL
$q=$_GET["q"];
/ / l o o k u p a l l h i n t s f r o m a r r a y i f l e n g t h o f q>0
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<count($a); $i++)
{
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
{
if ($hint=="") $hint=$a[$i];
else $hint=$hint." , ".$a[$i];
}
}
}
/ / S e t o u t p u t t o " no s u g g e s t i o n " i f no h i n t were f o u n d
/ / or t o t h e c o r r e c t v a l u e s
if ($hint == "") $response="no suggestion";
else $response=$hint;
/ / output the response
echo $response;
?>
T. Romańczukiewicz
XML 10
AJAX Podsumowanie
Przypomnienie AJAX - wstep
˛
Prykłady AJAX i JSON Frameworki
Przykład: AJAX i Bazy danych
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<html><head>
<script type="text/javascript">
function showUser(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest) xmlhttp=new XMLHttpRequest();
else xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
</form><br />
<div id="txtHint"><b>Person info will be listed here.</b></div>
</body>
T. Romańczukiewicz
XML 10
AJAX Podsumowanie
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
Przypomnienie AJAX - wstep
˛
Prykłady AJAX i JSON Frameworki
<?php
$q=$_GET["q"];
$con = mysql_connect(’localhost’, ’peter’, ’abc123’);
if (!$con) die(’Could not connect: ’ . mysql_error());
mysql_select_db("ajax_demo", $con);
$sql="SELECT * FROM user WHERE id = ’".$q."’";
$result = mysql_query($sql);
echo "<table border=’1’>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";
while($row = mysql_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row[’FirstName’] . "</td>";
echo "<td>" . $row[’LastName’] . "</td>";
echo "<td>" . $row[’Age’] . "</td>";
echo "<td>" . $row[’Hometown’] . "</td>";
echo "<td>" . $row[’Job’] . "</td>";
echo "</tr>";
}
echo "</table>";
mysql_close($con); ?>
T. Romańczukiewicz
XML 10
AJAX Podsumowanie
Przypomnienie AJAX - wstep
˛
Prykłady AJAX i JSON Frameworki
XML a JSON
Listing 6: XML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?xml version=’1.0’ encoding=’UTF-8’?>
<card>
<fullname>Sean Kelly</fullname>
<org>SK Consulting</org>
<emailaddrs>
<address type=’work’>[email protected]</address>
<address type=’home’ pref=’1’>[email protected]</address>
</emailaddrs>
<telephones>
<tel type=’work’ pref=’1’>+1 214 555 1212</tel>
<tel type=’fax’>+1 214 555 1213</tel>
<tel type=’mobile’>+1 214 555 1214</tel>
</telephones>
<addresses>
<address type=’work’ format=’us’>1234 Main St
Springfield, TX 78080-1216</address>
<address type=’home’ format=’us’>5678 Main St
Springfield, TX 78080-1316</address>
</addresses>
<urls>
<address type=’work’>http://seankelly.biz/</address>
<address type=’home’>http://seankelly.tv/</address>
</urls>
</card>
T. Romańczukiewicz
XML 10
AJAX Podsumowanie
Przypomnienie AJAX - wstep
˛
Prykłady AJAX i JSON Frameworki
XML a JSON c.d.
Listing 7: JSON
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
"fullname": "Sean Kelly",
"org": "SK Consulting",
"emailaddrs": [
{"type": "work", "value": "[email protected]"},
{"type": "home", "pref": 1, "value": "[email protected]"}
],
"telephones": [
{"type": "work", "pref": 1, "value": "+1 214 555 1212"},
{"type": "fax", "value": "+1 214 555 1213"},
{"type": "mobile", "value": "+1 214 555 1214"}
],
"addresses": [
{"type": "work", "format": "us",
"value": "1234 Main StnSpringfield, TX 78080-1216"},
{"type": "home", "format": "us",
"value": "5678 Main StnSpringfield, TX 78080-1316"}
],
"urls": [
{"type": "work", "value": "http://seankelly.biz/"},
{"type": "home", "value": "http://seankelly.tv/"}
]
}
T. Romańczukiewicz
XML 10
AJAX Podsumowanie
Przypomnienie AJAX - wstep
˛
Prykłady AJAX i JSON Frameworki
JSON
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˛edziem 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.
Najwieksz
˛
a˛ zaleta˛ jest szybki i łatwy sposób wykorzystania w JavaScripcie (JSON
jest podzbiorem js)
T. Romańczukiewicz
XML 10
AJAX Podsumowanie
Przypomnienie AJAX - wstep
˛
Prykłady AJAX i JSON Frameworki
Jeśli chodzi o pobieranie danych wszystko wyglada
˛ tak samo:
1
2
3
4
var req = new XMLHttpRequest();
req.open("GET", "http://localhost/addr?cardID=32", /∗ a s y n c ∗/true);
req.onreadystatechange = myHandler;
req.send(/∗ no params ∗/null);
Odczytywanie z pliku XML z wykorzystaniem modelu DOM:
1
2
3
4
5
6
7
8
9
10
11
12
function myHandler() {
if (req.readyState ==
/ / Update a d d r e s s
var addrField
=
var root
=
var addrsElem
=
var firstAddr
=
var addrText
=
var addrValue
=
addrField.value =
}
}
4 /∗ c o m p l e t e ∗/) {
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
document.getElementById(’addr’);
req.responseXML;
root.getElementsByTagName(’addresses’)[0];
addrsElem.getElementsByTagName(’address’)[0];
fistAddr.firstChild;
addrText.nodeValue;
addrValue;
T. Romańczukiewicz
XML 10
AJAX Podsumowanie
Przypomnienie AJAX - wstep
˛
Prykłady AJAX i JSON Frameworki
To samo ale z użyciem danych w formacie JSON:
1
2
3
4
5
6
7
unction myHandler() {
if (req.readyState == 4 /∗ c o m p l e t e ∗/) {
var addrField = document.getElementById(’addr’);
var card = eval(’(’ + req.responseText + ’)’);
addrField.value = card.addresses[0].value;
}
}
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 dostepne
˛
z poziomu JavaScript, tak jak wszystkie inne
dane, co bardzo ułatwia ich odczytywanie.
Funkcja eval wykonuje wszystkie skrypty gdy napotka kod JavaScript. Ze
wzgledów
˛
bezpieczeństwa można używać metody parse, która opuszcza skrypty.
T. Romańczukiewicz
XML 10
AJAX Podsumowanie
Przypomnienie AJAX - wstep
˛
Prykłady AJAX i JSON Frameworki
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ć sie
˛
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 sie˛ używa w arkuszu stylów.
Obiekt AJAX oferowany przez Prototype, jest przenośny miedzy
˛
przegladarkami.
˛
Posiada
dwie główne metody: Ajax.Request() i Ajax.Updater().
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var url = "http://www.foobar.com/path/script.php";
var myAjax = new Ajax.Request(url, {
parameters: {
imie: $F("imie"),
wiek: $F("wiek")
},
onSuccess: function(t) {
alert(t);
},
onFailure: function(t) {
alert(’Error....’);
}
});
T. Romańczukiewicz
XML 10
AJAX Podsumowanie
Przypomnienie AJAX - wstep
˛
Prykłady AJAX i JSON Frameworki
Biblioteka script.aculo.us – jest udostepniana
˛
na Licencji X11, a baza˛ dla tej
biblioteki jest Prototype JavaScript Framework, wiec
˛ cz˛esto 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 jezyka
˛
JavaScript, ułatwiajaca
˛
korzystanie z JavaScript (w tym manipulacje˛ 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.
T. Romańczukiewicz
XML 10
AJAX Podsumowanie
Plan
1
AJAX
2
Podsumowanie
T. Romańczukiewicz
XML 10
AJAX Podsumowanie
AJAX - podsumowanie
Zbiór kilku narz˛edzi 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˛esciej 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.
T. Romańczukiewicz
XML 10