Smitka development

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.
linkuj.czjagg.czpošli na vybrali.sme.skdeliciousTopČlánky.cz
Nahoru HOME PC•Elektro Programování Blog Autor Lynt Speciální backlink: Šulislav
© 2006 Smitka development