Využití technologie AJAX
Co to vlastně je AJAX? Stručně řečeno, AJAX je technologie, která pomocí skriptů zprostředkovává stránce
komunikaci s webovým serverem. Lze tak měnit obsah stránky bez potřeby ji znovu načítat.
Teoreticky lze tedy vytvořit dynamické stránky bez serverových skriptů, tedy mít jednu stránku pro celý web,
která pouze mění svůj obsah. Toto řešení však nedoporučuji, protože, jak již bylo řečeno, se jedná o scriptovou
technologii, tudíž je příliš závislá na klientu a není zaručeno zda bude fungovat. Využití však najde v doplňcích
webové stránky, jako je anketa, nebo pomocník pro vyhledávání, jako má např. Seznam.cz. Zde je poměrně jednoduché
udělat alternativní řešení - u ankety se hlas pošle klasickým formulářem a u vyhledávání zas chybějící pomocník nikoho
příliš trápit nebude.
Pokud máte jistotu, že u návštěvníků vašich stránek AJAX poběží je možné jej použít i pro složitější aplikace.
Osobně například používám chat, který si stahuje pouze nové příspěvky a pokud je na něm návštěvník sám, kontrola aktualizací se zpomalí,
což šetří mnoho přenesených dat.
Toto bylo menší zamyšlení k čemu je možné AJAX použít a nyní se dostaneme k tomu jak ho použít.
V různých prohlížečích je AJAX implementován různě. V geckových prohlížečích a opeře se o AJAX stará objekt window.XMLHttpRequest, Internet Explorer používá
ActiveX Microsoft.XMLHTTP. Když chceme AJAX použít musíme zjistit jaký objekt použít:
var ajax = (window.XMLHttpRequest ? new XMLHttpRequest() : (window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : false));
if(!ajax){
alert("Tak tady to nepoběží!");
return true;
}
Tento kód vytvoří objekt ajax, nejprve zkusí zda je možné použít XMLHttpRequest, pokud ne,
zkusí XMLHTTP, pokud stále nejde vytvořit, AJAX nepoběží a skript to oznámí.
Nyní (pokud se to povedlo) máme vytvořenou instanci AJAXe a můžeme s ní pracovat.
Nejdříve vytvoříme funkci, která obslouží odpověď od serveru.
Nyní otevřeme spojení na server a určíme jakou metodou bude komunikovat (GET/POST).
Funkce send(data) data na server a ukončí spojení.
Kód pro metodu GET je následující (protože data posíláme v url, send pošle NULL):
ajax.onreadystatechange= function () {zpracuj(ajax); } ;
ajax.open("GET", url s parametry, true);
ajax.send(null);
Takto byla vytvořena funkce zpracuj, která se provede až server odpoví (nastane událost onReadyStateChange):
function zpracuj(ajax){
var txt;
if (ajax.readyState == 4){ //bylo odpovězeno
if(ajax.status == 200 || ajax.status==0){
txt=ajax.responseText;
//co se má provést s odpovědí
}
else alert("Chyba: "+ ajax.status +":"+ ajax.statusText);
}
}
Pokud vše proběhlo bez chyby, vrátí server status 200 (status 0 je vrácen pokud skript neběží na serveru).
Použití metody POST je jen o malinko složitější, ale také flexibilnější:
ajax.onreadystatechange= function () {zpracuj(ajax); } ;
ajax.open("POST", url, true);
ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
ajax.send("proměnná="+hodnota);
Na rozdíl od GETu, kde byly proměnné předány v url, je u POSTu musíme poslat zvlášť, hlavičku měníme,
protože jsou očekávány XML data.
Konkrétní ukázkou bude, formulář pro počítání MD5.
<form name="form0" method="get" action="/store/md5.php">
MD5:<br />
<input type="text" name="text" />
<span id="md5"></span><br />
<input type="submit" onclick="return poslat()" />
</form>
PHP script md5.php pouze vrací MD5 hash toho co mu bylo posláno v jako proměnná text.
Script bude udělán tak, že pokud se povede inicializovat AJAX (a nedojde k žádné chybě) vrátí funkce poslat hodnotu
false a tím se zabrání odeslání formuláře. Pokud je třeba vypnutý javascript, událost onclick se neprovede
a data jsou poslána namísto AJAXe klasickým formulářem.
Script který obsluhuje komunikaci, může mít tvar:
<script type="text/javascript">
function poslat(){
var ajax = (window.XMLHttpRequest ? new XMLHttpRequest() : (window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : false));
if(!ajax){
alert("Tak tady to nepoběží!");
return true;
}
ajax.onreadystatechange= function () {zpracuj(ajax); } ;
//metoda GET
ajax.open("GET", "/store/md5.php?text="+document.form0.text.value, true);
ajax.send(null);
//totéž metodou POST
//ajax.open("POST", "store/md5.php", true);
//ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//ajax.send("text="+document.form0.text.value);
return false
}
function zpracuj(ajax){
var txt;
if (ajax.readyState == 4){ //bylo odpovězeno
if(ajax.status == 200 || ajax.status==0){
txt=ajax.responseText;
document.getElementById("md5").innerHTML = " = " + txt;
}
else alert("Chyba: "+ ajax.status +":"+ ajax.statusText);
}
}
</script>
komentáře (12)wow, asi se začnu učit v ajaxu...
vynikající skript
dobry
Příde mi to diný, mně totiž nefungují háčky a čárky (+čšř+ýáíčý=č+ýč´ýř=ěáýčř+íáýčšéíýšáěéíčý)
kous
kous
pepa
žena
Ještě poznámka, javascriptová funkce encodeURIComponent to převede správně do UTF-8 (escape nepoužívat, má určité problémy!!) a pak lze použít GET. Pokud používáte Tomcat (jako já a divil jsem se, proč to nejde), je třeba nastavit useBodyEncodingForURI v server.xml.
Dále jsem zkoumal chování IE, a zdá se že sice data v UTF přijímá, ale odesílá je ve výchozím kódování systému (cp1250). Pro obsáhlejší data a data s diakritikou je vhodnější použít metodu POST, kde jsou data při odesílání zakódována a problém s diakritikou tak mizí. Poslední řešení je na straně serveru automaticky převést data do UTF-8, jak to realizovat naleznete na blogu La Trine: http://www.dgx.cz/trine/item/autoczech-aneb-automaticka-detekce-kodovani
Koukal jsem na to, opravdu bude rozdíl v kódování IE a ostatních... Náprava by mohla být, zavolat na řetězec js funkci escape() a poté jej na serveru dekódovat php funkcí urldecode(). Upravil jsem to i v ukázce.
Zdravim, resim takovy problem, pomoci ajaxu posilam php scriptu retezec s diakritikou. Docetl jsem se ze ajax posila data v UTF-8, a protoze nemuzu mit v php scriptu ten retezec v utf-8, pouzil jsem na prevod php funkci iconv("UTF-8","WINDOWS-1250", $_GET[q])....to funguje skvele v FF i Opere, nikoli vsak v IE6 i 7. V IE se stane nasledujici, retezec se zkrati a cokoli od prvniho vyskytu znaku s diakritikou je odriznuto. Zkousenim jsem dospel k nazoru ze v IE ajax neposila retezec v utf-8. Nepouziju-li iconv() v ie, pak retezec ktery script obdrzi od ajaxu je ve stejnem kodovani v jakem jsem ho ajaxu predal. V FF je vsak kodovany v utf-8. Nikde jsem zatim nenasel zadnou zminku o rozdilu v IE a FF. A zjistil jsem ze ve Vasem prikladu to taky nefunguje, protoze pokud jako md5 date "šššš" tak ve firefoxu a IE dostanete rozdilne vysledky.
