AJAX není nikterak novou technologií, jak se někteří vývojáři tváří, vždyť bez problémů funguje v MS IE 6, kterýžto prohlížeč lze s klidným svědomím oznažit jako opravdu obskurně zastaralý. AJAX je jedna ze zajímavých technologií, kterou prohlížeče uměly dlouho, ale přesto ji vývojáři webů nepoužívali. Já jsem se AJAXu donedávna bránil, ne proto, že bych viděl nějakou nepříjemnu komplikaci v programování, ale nepracoval jsem na takové aplikaci, kde bych AJAX dokázal opravdu využít.
AJAX je vcelku snadné pochopit, když jsem zjistil, že jej potřebuji, našel jsem mnoho tutoriálů a po cca 30 minutách studování jsem byl schopen jej použít, sice to byl v podstatě jen copy&past 3 JavaScriptových kousků kódů, z nichž jsem 2 upravil ku obrazu svému, vytvoření AJAXového handleru si asi opravdu nebudu pamatovat, ale teď už jej mám ve svém frameworku a mohu ho kdykoliv využít.
První co je potřeba zrealizovat je vytvoření jakéhosi handleru, který je trochu složitější, protože v prohlížeči Microsoft Internet Explorer není vše stejné, jako v normálních prohlížečích:
function getHTTPObject(){
if (window.ActiveXObject){
return new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest){
return new XMLHttpRequest();
} else {
alert("Prohlizec neumi AJAX :(.");
return null;
}
}
function vystup(){
if(httpObject.readyState == 4){
document.getElementById('vystup1').value = httpObject.responseText;
}
}
var httpObject = null;
Po tomto prvním kroku je možné napsat další kousek JS, který si zinicializuje AJAXový handler a pošle správně zformátovaný požadavek.
function zpracAJAX(){
httpObject = getHTTPObject();
if (httpObject != null) {
httpObject.open("GET", "zpracuj.php?myinput="
+document.getElementById('myInput').value, true);
httpObject.send(null);
httpObject.onreadystatechange = vystup;
}
}
V funkci zpracAJAX jsou data vzata ze vstupního formuláře, odeslána scriptu zpracuj.php metodou GET a výstup scriptu je v objetku httpObject, může to být třeba vygenerovaný kus webové stránky.
Takže v httpObjectu jsou data, která chceme, ale ještě je potřeba je nějakým způsobem zobrazit. K výstupu dat se využívá DOM, tj. opět JavaScript přes který „se nacpou“ data do určitého místa stránky, k tomu je potřeba mít tag, do nějž chcete vložit data výstupu označený parametrem id="". Výstup realizuje funkce vystup(), v tomto článku bude výstup realizován do <div id="vystup1"> </div>.
Jediné co chybí k tomu, abychom mohli AJAX používat je kód stránky, která AJAXové zpracování volá a script, který data zpracuje. První je script s formulářem, který data odešle AJAXem ke zpracování:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AJAX - příklad</title>
</head>
<body>
<script language="javascript" type="text/javascript">
<!--
// Get the HTTP Object
function getHTTPObject(){
if (window.ActiveXObject){
return new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest){
return new XMLHttpRequest();
} else {
alert("Prohlizec neumi AJAX :(.");
return null;
}
}
function vystup(){
if(httpObject.readyState == 4){
document.getElementById('vystup1').value = httpObject.responseText;
}
}
function zpracAJAX(){
httpObject = getHTTPObject();
if (httpObject != null) {
httpObject.open("GET", "zpracuj.php?myinput="
+document.getElementById('myInput').value, true);
httpObject.send(null);
httpObject.onreadystatechange = vystup;
}
}
var httpObject = null;
//-->
</script>
<form name="ajaxTest">
Vstupní text: <input type="text" name="myInput" id="myInput" />
<p>Výstup: <div id="vystup1">výstup<div></p>
<input type="button" onclick="zpracAjax();" value=" Zpracuj ">
</form>
</body>
</html>
O zpracování zaslaných dat se stará krátký script. Pro přenos je potřebné nastavit kódování, protože ne každý hosting má defaultně UTF-8 a ne vždy je dobré spoléhat na prohlížeč.
<?php
header('Content-Type: text/html; charset=utf-8');
if (isset($_GET['myinput']))
echo '<b>' . strtoupper($_GET['myinput']) . '</b>';
?>
Závěrem
Používání AJAXu není žádná velká alchymie, zatím jsem neřešil některé detaily:
- Obsluha více AJAXových požadavků. Pokud potřebuji používat AJAX pro více částí jedné stránky, musím si vytvořit patřičný počet handlerů, určitě to jde řešit lépe, ale zatím mne to nepálí.
- POST požadavek je netriviální na odeslání, byť je mnohem bezpečnější.
Co je mnohem nepříjemnější je ladění stránky, která obsahuje AJAX, doporučuji používat extenzi Firebug pro prohlížeč Mozilla Firefox.
AJAX má ve jménu schované XML, ale vhodnější strukturovaný formát pro posílání zpráv mezi klientem (strana prohlížeče u uživatele) a serverem jest JSON.
Komentáře
2 komentáře: „AJAX je perfektní, ale nepříjemný“
Pěkný kus javascriptu ale řekl bych že v dnešní době k ničemu. Nastuduj si JQuery a uděláš ajaxový formulář i s načítáním na dva řádky.
Ladis: S JQuery jsem se setkal a nejspíše o něm něco napíšu na svůj domovský portál. Hlavně považuji za zbytečné pro AJAX natahovat obrovský balík JavaScriptu (pokud si pamatuji dobře v čem je JQuery psáno), když to potřebuji jen pro docela malinké věci, navíc jsem zastánce toho, že by člověk měl řadu problémů naprogramovat i klasicky, bez velkých frameworků, kterým každý neporozumí.