AJAX podruhé

V minulém článku o AJAXu jsme si ukázali, jak jej používat. Tento článek je rozšířením informací o této technologii, které však nejsou nezbytně třeba. Jelikož AJAX je zkratkou pro Asynchronní JavaScript a XML, ukážeme si jak pracovat právě se soubory XML. Ale ještě předtím se podíváme na vlastnosti, které nám objekt AJAXe nabízí.

Vlastnosti objektu XMLHttpRequest

readyState

je to číslo od 0 do 4, které určuje, co zrovna objekt provádí:
0 - neinicializováno
1 - spojení otevřeno (metoda open)
2 - odeslán požadavek
3 - přijímání odpovědí
4 - přijato OK

status

kód zpráva serveru:
0 = pravděpodobně běží na lokálním pc
200 = OK
404 = nenalezeno
...

statusText

zpráva ke stavovému kódu (OK, Not found,...)

responseText

přijatý text, až je readyState 4 je odpověď kompletní a má smysl ji číst

responseXml

data přijatá ve formátu XML, jsou k dispozici až při readyState 4

Metody objektu XMLHttpRequest

abort()

přeruší aktivitu objektu a resetuje ho

getAllResponseHeaders()

vrátí řetězec se všemi přijatými hlavičkami oddělenými znakem nového řádku. Výstup může vypadat třeba takto:


Date: Sun, 10 Sep 2006 15:00:10 GMT
Server: Apache/2.0.58 (Win32) mod_ssl/2.0.58 OpenSSL/0.9.8b PHP/5.1.4
X-Powered-By: PHP/5.1.4
Content-Length: 32
Keep-Alive: timeout=15, max=99
Connection: Keep-Alive
Content-Type: text/html

getResponseHeader("jméno hlavičky")

vrátí hodnotu určené hlavičky (např. getResponseHeader("Contetn-Type") může vrátit text/html)

open("POST/GET", "url", "true/false", ["login", "password"])

otevře určenou metodou spojení na server, dále se určí zda bude asynchronní (true) nebo synchronní (false), jako volitelné parametry jsou uživatelské jméno a heslo na server.

send("řetězec")

Pošle data na server. Při použití metody GET se posílá NULL, medodou post se posílají hodnoty proměnných ve formátu: jméno proměnné=hodnoty. Tuto metodu lze použít během přenosu pouze jednou.

setRequestHeader

nastavuje hlavičky k odeslání. Pro data posílaná metodou POST se volá: setRequestHeader("Content-Type", "application/x-www-form-urlencoded")

Přístup k XML

Nyní se konečně dostaneme k partii, podle které má AJAX své jméno - k XML.
Pokud server pošle data ve formátu XML, nebo metodou open() otevřeme přímo soubor, lze pomocí responseXML přiřadit získané XML do proměnné a poté s ním pracovat pomocí funkcí javascriptu pro práci s XML. Oproti výstupu v textu je tento postup vhodný pro získávání několika hodnot, když jsou data složitější a bylo by na ně obtížné použít funkce typu split().
V následujícím příkladu uvidíme, jakým způsobem lze data zpracovat. Ukázka bude mít za úkol zobrazovat telefonní seznam umístěný ve 2 XML souborech, aniž by musela znovu stránku přenačítat.
Formát XML souborů:


<adresar>
 <polozka>
  <jmeno>...</jmeno>
  <prijmeni>...</prijmeni>
  <telefon>...</telefon>
 </polozka>
 ...
</adresar>

Na stránce budou 2 tlačítka s value="Název souboru", podle nichž bude skript volit načítaný soubor a výsledek ve formě tabulky zobrazí do prvku s id="seznam". Skript pro obsluhu bude mít tedy takovýto tvar:


<script type="text/javascript">
function poslat(soubor){
var ajax = (window.XMLHttpRequest ? new XMLHttpRequest() : (window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : false));
if(!ajax){
alert("Tak tady to nepoběží!");
return true;
}
ajax.open("GET", "store/"+soubor.value, true);
ajax.send(null);
ajax.onreadystatechange= function () {zpracuj(ajax); } ;
return false
}
function zpracuj(ajax){
var txt;
if (ajax.readyState == 4){ //bylo odpovězeno
if(ajax.status == 200  || ajax.status==0){
var xmldoc = ajax.responseXML;
var jmeno = xmldoc.getElementsByTagName('jmeno');
var prijmeni = xmldoc.getElementsByTagName('prijmeni');
var telefon = xmldoc.getElementsByTagName('telefon');
txt="<table border=\"1\"><tr><th>Jméno</th><th>Příjmení</th><th>Telefon</th></tr>\n"
for (var i=0;i<jmeno.length;i++){
txt+="<tr><td>"+jmeno[i].firstChild.data+"</td><td>";
txt+=prijmeni[i].firstChild.data+"</td><td>"+telefon[i].firstChild.data+"</td></tr>\n";
}
txt+="</table>";
document.getElementById("seznam").innerHTML = txt;
}
else alert("Chyba: "+ ajax.status +":"+ ajax.statusText);
}
}
</script>

Zde se zobrazí výsledek

A úplně na konec malá úvaha o využití XML v AJAXu. Osobně v běžných webových aplikacích velký přínos nevidím. Data jsou většinou brána z databáze a museli bychom je nejprve převést do XML a poté zpět... Jiná situace však nastává, pokud data získáme z aplikace, která právě formátu XML využívá. Nebo pokud vyvíjíme něco pod SOAP, ale zde se většinou o zpracování XML stará už server. Proto si myslím že se toto využití AJAXu objeví jen zřídka, což ovšem neznamená, že je to zbytečnost.

komentáře (0)