Seriál o komunikaci mezi stránkou a serverem: Díl 1. AJAX v kostce

Název AJAX (asynchronní JavaScript a XML) se sice poprvé veřejně objevil až v dubnu 2005 v článku J. J. Garretta, nazvaném Ajax: A New Approach to Web Applications, ale jeho historie je mnohem starší. AJAX existuje už od roku 1999, kdy Microsoft uvedl pátou verzi svého prohlížeče. Cože to vlastně ten AJAX je? Význam této vágní zkratky je všeobecně spojován s používáním objektu XMLHttpRequest a souvisejících technik. Takto je pojímán i v tomto a příštím článku, nicméně dal by se vyložit mnohem šíře.

Cesta ke standardu

Internet Explorer byl nějakou dobu jediným prohlížečem podporujícím AJAX, ale konkurenční prohlížeče jeho novinku brzy převzaly. Implementace AJAXu však u nich byla provedena jinak. Onen rozdíl spočíval v objektu, přes který se prostřednictvím protokolu HTTP získávají data ze serveru. V IE to byl objekt ActiveX, jinde objekt XMLHttpRequest. Proto se při úpravách starších skriptů lze setkat se záhadnou konstrukcí, která vypadá nějak takto:

var http_request;
if (window.XMLHttpRequest) {
  http_request = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
  try {
    http_request = new ActiveXObject("Msxml2.XMLHTTP");
  }
  catch (eror) {
    http_request = new ActiveXObject("Microsoft.XMLHTTP");
  }
}

Po nekonečně dlouhých letech se veřejnost od Microsoftu dočkala sedmé verze IE, která už podporovala i objekt XMLHttpRequest. Došlo tedy ke sjednocení a v roce 2010 byl tento objekt oficiálně standardizován konsorciem W3C.

Načítání nového obsahu

Vytvoření instance objektu XMLHttpRequest je samozřejmě jen začátek. Je třeba ještě připravit a odeslat HTTP požadavek a zajistit zpracování došlých dat. Zde je krátký příklad:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200)
    document.getElementById("content").innerHTML = this.responseText;
  };
xhr.open("GET", "url.php?x=1", true);
xhr.send();

K tomu ještě pár poznámek:

• AJAX může fungovat i synchronně – provádění skriptu se pozastaví, dokud ze serveru nedorazí odpověď. Stačí nepovinný třetí argument metody open() nastavit na hodnotu false.
• Při zasílání požadavku typu POST by se měla ještě nastavit hlavička. Provede se to metodou setRequestHeader(), např.:
  xhr.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");

Krátké, ale ne dost pro zhýčkané programátory. Naštěstí knihovny jako jQuery nabídly pro načítání nového obsahu ze serveru naprosto minimalistická řešení v podobě jednoduchých funkcí. AJAX se díky tomu stal intuitivní záležitostí. S jQuery stačí místo předešlého „krátkého“ kódu napsat pouhý jeden řádek:

$("#content").load("url.php?x=1");

Vhodnější formát pro strukturovaná data

Ono „XML“ na začátku názvu objektu XMLHttpRequest je poněkud zavádějící. XML se pro účely AJAXu používá zřídkakdy. Strukturování dat je sice zapotřebí, weboví vývojáři však rychle zjistili, že procházet stromovou strukturou XML není to samé, co procházka růžovým sadem, už vůbec nemluvě o extrakci fragmentů HTML kódu z XML. Hledali tedy pro daný účel použitelnější formát. A co našli jejich rádcové? JSON.

Data v tomto formátu lze chápat jako objektový literál – syntaxe je v podstatě shodná. Tato okolnost umožňuje pracovat s těmito daty jako s objektovým literálem. JSON vyhovuje i z bezpečnostního hlediska. Nemůže totiž obsahovat žádné funkce a příkazy. Jelikož však JSON nebyl výstupním formátem AJAXu, musel se výstup (řetězec získaný jako hodnota vlastnosti responseText) nejdříve zpracovat, nejlépe parserem, do podoby skutečného JSON, než s ním bylo možno zacházet jako s objektovým literálem.

var json = JSON.parse(xhr.responseText);

Tento řádek javascriptového kódu by ovšem ve starých prohlížečích selhal, např. IE podporuje JSON parser až od osmé verze. Weboví vývojáři proto museli své aplikace buď sami doplnit na straně klienta o parser, nebo převádět řetězce na objekty typu JSON jednoduše pomocí funkce eval(), přičemž ten druhý způsob nemusel být za všech okolností bezpečný.

Standard se rozrůstá

Od desáté verze i Internet Explorer konečně podporuje rozšíření API objektu XMLHttpRequest, které bylo původně rozpracováno jako druhá úroveň (angl. level) specifikace XMLHttpRequest, ale později se obě spojily.

Oproti počátku přibyly v AJAXu tyto novinky:

• Nové události
  

  loadstart	nastane při zahájení datové transakce
  progress	opakuje se v průběhu datové transakce buď po 50 ms, nebo (v případě pomalejšího transferu dat) s každým přeneseným B
  abort	nastane při zrušení požadavku
  error	nastane při selhání požadavku
  load	nastane po obdržení vyžádaných dat
  timeout	nastane v důsledku překročení vymezeného časového limitu
  loadend	nastane, jakmile je požadavek kompletně vyřízen, nebo selže

• Časový limit pro přenos dat – implicitní hodnotou vlastnosti timeout je 0 (tzn. bez časového omezení); lze nastavit kladnou hodnotu (počet milisekund) jako lhůtu, dokdy musí být přenos dat dokončen
• Bez cookies – přiřazením hodnoty false vlastnosti withCredential lze zamezit tomu, aby se serveru z jiné domény posílaly cookies, HTTP autentizace, client-side SSL certifikáty, a hlavně aby nebyly zpracovávány ty přijaté
• Anonymita požadavku – při použití objektu AnonXMLHttpRequest() se nebudou odesílat cookies, HTTP autentizace, client-side SSL certifikáty ani adresa webové stránky
• Nové možnosti odesílání dat – metodou send() lze odeslat také pole, soubor nebo formulář (objekt FormData)
• Rozpoznávání typů přijatých dat – typ přijatých dat je automaticky přiřazen vlastnosti responseType jako její hodnota; může to být prázdný řetězec, pole (arraybuffer), soubor (blob), XML (document), JSON nebo text; k samotným datům se pak lze dostat přes vlastnost response

Specifikace také obsahuje dokumentaci API objektu FormData. Jedná se konkrétně o konstruktor FormData() a metodu append(jméno, hodnota, název_souboru). Třetí argument metody append() se zadává jen v případě, že přidávaná položka je souborem, příklad vše objasní:

...
var fd = new FormData();
fd.append("x",1);
xhr.send(fd); //xhr = objekt XMLHttpRequest

Specifikace je oficiálně stále ve fázi pracovního návrhu, takže na její konečnou podobu je potřeba si ještě počkat.

Tohle byl jen nezbytný úvod

Tématika AJAXu je samozřejmě mnohem širší, tohle byl jen radikálně stručný a snad i užitečný přehled toho základního. Druhý díl už bude upovídanější a také praktičtěji zaměřený. Na řadu přijdou sofistikovanější způsoby komunikace mezi serverem a klientem.

Upozornění na následující díl vám zašleme pohodlně na váš email. Přihlašte se k odběru novinek!

Celý seriál najdete pod štítkem: komunikace mezi stránkou a serverem