AJAX

Článek vyšel na serveru Root.cz.

Článek rozebírá různé možnosti umísťování interaktivních komponent na webové stránky a soustřeďuje se na jeden v současné době poměrně populární. Díky technologii Asynchronous JavaScript and XML je možné z webového prohlížeče elegantně komunikovat s webovým serverem a vyměňovat si s ním data, která se mohou ihned uložit na serveru nebo naopak zobrazit u klienta.

Pokud je na stránce nějaká dynamická komponenta, např. anketa, hlasování nebo konec konců i diskuse, dá se k jejímu zpracování přistoupit mnoha různými způsoby:

• Tradiční řešení spočívá v tom, že akce je realizována běžným odkazem nebo formulářem a po jejím provedení se nahraje celá stránka znovu. Nevýhody jsou zřejmé – pomalost a pracnost vrátit stránku na místo, které bylo zobrazeno před provedením akce.
• Zpracování akce v nově otevřeném okně netrpí neduhy tradičního řešení, řada uživatelů je ale na otevírání nových oken alergická, obzvlášť když je to jenom kvůli oznámení, že jejich hlas byl započten. Toto řešení navíc původní stránku obvykle neaktualizuje aktuálními daty.
• Umístění komponent do samostatného rámu je nejelegantnější u jednoduchých stránek, které využívají dynamické komponenty provozované na jiném serveru. U větších serverů má ale i toto řešení své nevýhody – ve striktním HTML jsou rámy zakázané a stažení každé komponenty znamená další požadavek na webový server.
• Využít skriptování u klienta je pravděpodobně nejpracnější, ale zároveň přináší největší uživatelský prožitek. Realizovat se dá několika způsoby – přesměrováním akce do neviditelného rámu, který skriptem změní původní stránku, dynamickým vytvořením elementu script a jeho umístěním do HTML dokumentu nebo pomocí objektu XMLHttpRequest, který byl pro komunikaci skriptů se serverem přímo navržen.
• Pro hodnocení komentářů na Rootu je použit poměrně neobvyklý přístup, kdy se hlasy ukládají u klienta do cookie a na server se odešlou teprve až s návštěvou další stránky. Vzhledem k množství hodnocených komentářů se mi jeví tento přístup jako velice rozumný, protože jinak by počet požadavků na server neúměrně vzrostl, použít ho lze však jen ojediněle.
• Existují samozřejmě i další možnosti, např. umístění komponenty do Flashe, ty ale není možné použít vždy.

Pro použití objektu XMLHttpRequest se ustálil pojem AJAX, přestože korektní použití tohoto objektu nemusí odpovídat ani jednomu slovu ve zkratce – komunikace nemusí být asynchronní, jako skriptovací jazyk nemusí být použit JavaScript a data se nemusí přenášet pouze pomocí XML. Naopak AJAX se dá výše naznačenými způsoby zajistit i bez objektu XMLHttpRequest.

Příklad – realizace ankety v PHP

Na jednoduchém příkladu si ukážeme, jak se AJAX dá použít pro zpracování ankety. Důležitá část skriptů je univerzální a použitelná i v dalších komponentách.

Hlavní stránka se od ostatních řešení příliš lišit nebude. V případě vypnutého JavaScriptu nebo obecně nefunkčnosti technologie AJAX u klienta se navštíví běžný odkaz, který aktualizuje databázi a stránku celou překreslí. Pro kontrolu toho, jestli uživatel ještě nehlasoval, se používá cookie s platností jeden měsíc, podle potřeb je možné tuto kontrolu samozřejmě změnit. Vazbu na AJAX v tomto souboru zajišťuje volání funkce anketa_hlasovat.

<?php
// uložení odpovědi v případě vypnutého JavaScriptu
if (isset($_GET["anketa"]) && !isset($_COOKIE["anketa"])) { // primitivní kontrola toho, jestli uživatel ještě nehlasoval
    setcookie("anketa", $_GET["anketa"], strtotime("+1 month"));
    $_COOKIE["anketa"] = $_GET["anketa"];
    mysql_query("UPDATE anketa SET pocet = pocet + 1 WHERE id = " . intval($_GET["anketa"]));
}

// zobrazení ankety
echo "<h3>Anketa</h3>\n";
$result = mysql_query("SELECT * FROM anketa");
echo "<table border='1' id='anketa'>\n";
while ($row = mysql_fetch_assoc($result)) {
    $odpoved = htmlspecialchars($row["odpoved"]);
    if (!isset($_COOKIE["anketa"])) {
        $odpoved = "<a href='?anketa=$row[id]' onclick='return !anketa_hlasovat($row[id]);'>$odpoved</a>";
    }
    echo "<tr><td class='odpoved'>$odpoved</td><td id='pocet$row[id]'>$row[pocet]</td></tr>\n";
}
echo "</table>\n";
echo "<span id='stav-anketa'></span>\n";
mysql_free_result($result);
?>

Největší část funkčnosti zajišťuje následující JavaScriptový kód. Funkce send_xmlhttprequest je obálka nad objektem XMLHttpRequest, která zajistí vytvoření správného objektu v závislosti na schopnostech prohlížeče, inicializuje požadavek a nastaví mu případné hlavičky a tělo, prováže ho s obsluhou události a odešle ho. Funkce anketa_hlasovat tuto funkci využívá a kromě toho znemožní opětovné hlasování vymazáním odkazů a překreslí anketu se započteným hlasem uživatele. V neposlední řadě informuje uživatele o tom, že se ukládají výsledky – vzhledem k tomu, že uživatelé na tento způsob modifikace stránek nemusí být zvyklí, je jejich informování poměrně důležité. Funkce anketa_obsluha přiřazená k obsluze události onreadystatechange se volá při každé změně stavu, a pokud je požadavek dokončen (readyState má hodnotu 4), aktualizuje data na základě momentálního počtu odpovědí a informuje uživatele o dokončení požadavku.

<script type="text/javascript">
/** Odeslání XMLHttp požadavku
* @param Function funkce zajišťující obsluhu při změně stavu požadavku, dostane parametr s XMLHttp objektem
* @param string GET|POST|...
* @param string URL požadavku
* @param string tělo zprávy
* @param object předané hlavičky ve tvaru { 'hlavička': 'obsah' }
* @return boolean true v případě úspěchu, false jinak
* @copyright Jakub Vrána, http://php.vrana.cz/
*/
function send_xmlhttprequest(state_change, method, url, content, headers) {
	var xmlhttp = (window.XMLHttpRequest ? new XMLHttpRequest() : (window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : false));
	if (!xmlhttp) {
		return false;
	}
	xmlhttp.open(method, url);
	xmlhttp.onreadystatechange = function () {
		state_change(xmlhttp);
	};
	headers = headers || {};
	headers['X-Requested-With'] = headers['X-Requested-With'] || 'XMLHttpRequest';
	for (var key in headers) {
		xmlhttp.setRequestHeader(key, headers[key]);
	}
	xmlhttp.send(content);
	return true;
}
</script>

Za zmínku stojí, že vytvořený objekt xmlhttp se obslužné funkci předává jako parametr. V tomto jednoduchém případě by to mohla být i globální proměnná, ale vzhledem k tomu, že na stránce může být dynamických komponent více, je nutné mezi nimi rozlišovat. Pokud by se použila globální proměnná a nějaká komponenta by vytvořila nový požadavek ještě před dokončením předešlého, vedlo by to k jeho nedokončení. Je potřeba pamatovat na to, že zpracování je asynchronní.

<script type="text/javascript">
function anketa_hlasovat(hlas) {
	// odeslání požadavku na aktualizaci dat
	if (!send_xmlhttprequest(anketa_obsluha, 'GET', 'anketa_rpc.php?anketa=' + hlas)) {
		return false;
	}
	document.getElementById('pocet' + hlas).innerHTML++; // zobrazení hlasu u klienta
	// znemožnění opětovného hlasování smazáním odkazů
	for (var key in document.getElementById('anketa').getElementsByTagName('td')) {
		var val = document.getElementById('anketa').getElementsByTagName('td')[key];
		if (val.className == 'odpoved') {
			val.innerHTML = val.firstChild.innerHTML;
		}
	}
	document.getElementById('stav-anketa').innerHTML = 'Ukládá se';
	return true;
}

function anketa_obsluha(xmlhttp) {
	if (xmlhttp.readyState == 4) {
		// aktualizace odpovědí na základě aktuálního stavu
		var odpovedi = xmlhttp.responseXML.getElementsByTagName('odpoved');
		for (var i=0; i < odpovedi.length; i++) {
			document.getElementById(odpovedi[i].getAttribute('id')).innerHTML = odpovedi[i].firstChild.data;
		}
		document.getElementById('stav-anketa').innerHTML = 'Uloženo';
	}
}
</script>

Skript anketa_rpc.php je velice jednoduchý – zkontroluje, jestli uživatel ještě nehlasoval, započte jeho hlas a zpět odešle jednoduché XML s aktuálním počtem odpovědí. Jak již bylo řečeno, nemusí spolu skripty komunikovat pomocí XML, u strukturovaných dat je to však poměrně praktické. Pokud by skript generoval nestrukturovaná data, lze k nim z JavaScriptu přistoupit přes vlastnost responseText.

<?php
if (!isset($_COOKIE["anketa"])) {
    setcookie("anketa", $_GET["anketa"], strtotime("+1 month"));
    mysql_query("UPDATE anketa SET pocet = pocet + 1 WHERE id = " . intval($_GET["anketa"]));
}

header("Content-Type: text/xml");
echo "<anketa>\n";
$result = mysql_query("SELECT * FROM anketa");
while ($row = mysql_fetch_assoc($result)) {
    echo "<odpoved id='pocet$row[id]'>$row[pocet]</odpoved>\n";
}
mysql_free_result($result);
echo "</anketa>\n";
?>

Objekt XMLHttpRequest umožňuje i odesílání dat metodou POST. Opět lze poslat XML dokument, je ale možné použít i hlavičku Content-Type: application/x-www-form-urlencoded a data poslat standardně URL-zakódovaná (jednotlivé části funkcí encodeURIComponent). Z takto poslaných dat PHP vytvoří standardní proměnné.

AJAX se samozřejmě dá použít i na spoustu dalších věcí. Zmíněny byly další dynamické komponenty stránky, dobře viditelné je použití u tzv. našeptávačů nebo u mapových aplikací, použít se dá např. i pro předběžnou kontrolu unikátnosti uživatelského jména u klienta. Fantazii se meze nekladou, důležité je ale vždy zajistit, aby aplikace byla použitelná i bez této funkce. Nevhodné je také AJAXem nahradit např. běžný přechod mezi stránkami, protože uživatelé potom nemohou používat historii a mohou být zmateni, že se stránky chovají jinak, než jsou zvyklí.

Související odkazy

• XMLHttpRequest na XULPlanet
• XMLHttpRequest na MSDN
• Dynamické načítání obsahu do HTML z aplikace přes JavaScript

Přijďte si o tomto tématu popovídat na školení JavaScript a AJAX (4.10.2010, Praha).

Jakub Vrána, Seznámení s oblastí, 3.10.2005, diskuse: 46 (nové: 0)

Diskuse

Navigace

PHP triky

• Archiv (519)
• Stažení celého webu
• RSS, Atom, Atom diskusí
• O autorovi, o webu, Twitter

Nabídka pracovních pozic

• Přidejte vlastní pracovní nabídku

Reklama

• Hledáte-li programátora nebo naopak sami programujete a nemáte do čeho píchnout, využijte služeb portálu nezávislých profesionálů Na volné noze.
• HostMonster – neomezený hosting

Články podle skupin

• Dobře míněné rady (82)
• Řešení problému (125)
• Výuka (94)
• Seznámení s oblastí (68)
• Ze zákulisí (67)
• Školení (24)
• Verze PHP (8)
• Osobní (25)
• Adminer (26)

Výběr článků

• Traverzování kolem stromu prakticky
• Vlastní pořadí řádků v tabulce
• Ukázka použití indexů
• Struktura stránek
• Unikátnost návštěvníka
• Vyhledávání v JavaScriptu
• Kontrola e-mailové adresy
• Vytvoření přátelského URL
• HTTP cachování
• Atomicita operací
• Vypnutí magic_quotes_gpc
• Ukládání souborů od uživatele
• Cross Site Scripting
• AJAX
• Přihlašování uživatelů
• MySQL 4.1 – kódování
• Vzájemné propojení souborů
• Diskuse s reakcemi
• Šablony
• HTTP metody GET a POST
• Escapování
• Ukládání hesel
• Využití unikátních klíčů v databázi
• Obrana proti SQL Injection

Nejnovější články

• Kde zachytáváte výjimky?
• Jak je to s těmi chybami?
• Rozšíření pro NotORM
• Konference OSI Days 2010
• Závorky u jazykových konstrukcí

Normy a manuály

• PHP
• MySQL
• HTTP
• Apache
• HTML, XHTML

Další projekty

• Adminer
• JavaScript Syntax Highlighter
• NotORM
• php-initialized
• Čtyřka
• Matfyz.cz