Smitka development

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>

A na konec zkušební verze:
MD5:


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