Obecně o skriptování

Chceme-li měnit informace na stránkách kupříkladu mezi jednotlivými přístupy, případně každému uživateli poskytovat jiné údaje, můžeme použít skriptování. Toto se může odehrávat na straně serveru i na straně klienta. Na straně serveru skriptem generujeme výsledný HTML-kód, na straně klienta je situace poněkud složitější (tam do vygenerovaného kódu zasahujeme), nicméně aby nebyla situace na serveru jednodušší, existuje mnoho možností skriptování na serveru. Na klientovi je situace jednodušší v tom smyslu, že až na patologické případy lze psát skripty nejvýše v Javascriptu (stranou ponecháváme Active X, VBScripty a podobné, jelikož první je lepší mít z bezpečnostních důvodů zakázané, kdežto druhé funguje jen občas na Internet Exploreru). Při psaní skriptů pro klient je vhodné myslet na to, že ne všechny prohlížeče náš skript budou schopny zinterpretovat, proto je vhodné stránky nezaložit jen ja Javascriptech, opak (tedy stránky na skriptování založené) je snadnou metodou, jak návštěvníka znechutit (je jen málo takových, kteří si budou kód interpretovat a domýšlet, co jste mínili udělat). Zkrátka Javascript, který nás bude v této kapitole zajímat, je dobrý sluha, ale špatný pán.

Tag SCRIPT

Nyní si povězme hlavně o tagu SCRIPT. Jedná se o tag párový, počáteční i koncový tag je vyžadován. Skript tudíž píšeme mezi tagy <SCRIPT> a </SCRIPT>.

Vkládáme-li skript pomocí tagu SCRIPT, máme opět dvě možnosti, jak to provést. Buďto skript napíšeme do zvláštního souboru, na nějž nasměrujeme níže uvedený atribut SRC, nebo skript vložíme přímo mezi tagy <SCRIPT> a </SCRIPT>.

Tagu </script> atributy nevyplňujeme, na tagu <SCRIPT> se vyřádíme trochu více. Můžeme mu nastavovat zejména tyto atributy:

• SRC - určí URI, na němž skript leží,
• TYPE - určuje typ nahrávaných dat, obvykle "text/javascript", tento atribut je povinný,
• language - určuje přesný jazyk, v němž je skript napsán. Tento atribut je zamítnutý, v normě najdeme vysvětlení, že je zamítnutý proto, že norma HTML odmítá taxativně vymezovat jména skriptovacích jazyků. Jaký interpret má být pro dotyčný skript použit, by mělo být jasné z atributu TYPE.

Při použití tagu SCRIPT mějte na paměti, že mezi tagem počátečním a koncovým je text v jiném jazyku, nežli HTML, čili kupříkladu ztrácíte jistotu, že obsah bude case-insensitive, naopak Javascript je case-sensitive! Obdobně bychom měli přestat používat HTML-komentáře a začít používat komentáře povolené gramatikou cílového jazyka.

Existuje určitá výjimka. Z tajemného důvodu někteří lidé píší těsně za tag SCRIPT sekvenci uvádějící HTML-komentář (<!--) a těsně před </script> konec HTML-komentáře (-->). Toto počínání je sice částečně schváleno normou HTML, ovšem pouze jde-li HTML komentář bezprostředně za tagem SCRIPT, konec komentáře ovšem schválení normou HTML nepožívá, každopádně gramatika Javascriptu s tím, že se ve skriptu budou vyskytovat HTML-komentáře, naprosto nepočítá, pro Javascript jde o sekvenci sestávající z operátoru porovnání na nerovnost (<) následovaného operátorem logické negace (!) a predekrementace (--).

Mnozí lidé v dobré víře výše uvedeným jednáním přímo oplývají, aniž zjevně vědí, proč to dělají. Toto jednání mívalo opodstatnění za dávných časů, a to kvůli jistému archaickému prohlížeči, který neměl tag SCRIPT implementovaný a obsah skriptu vypsal. Aby skript nebyl vypsán, byl pro jistotu vnitřek "zabalen" do HTML-komentářů. Tuším, že se jednalo o historickou verzi browseru lynx, ale zdůrazňuji o velmi vykopávkovou verzi. Tato obava z vypsání zdrojových textů Javascriptů u některých autorů stránek (poměrně iracionálně) přežila, bohužel nápadně kontrastruje s hrubým až sprostým chováním některých webmasterů k návštěvníkům používajícím prohlížeč bez skriptování. Obdobně bychom měli přestat používat HTML-komentáře a začít používat komentáře povolené gramatikou cílového jazyka.

Příklad

<SCRIPT type="text/javascript">
/* Komentáře jsou dvou typů. Jeden typ zahajujeme
sekvencí lomeno-hvězdička a ukončujeme obráceně,
tedy hvězdička-lomeno, jako kolem tohoto textu. */
//komentář druhého druhu je jednořádkový a zahajuje
//se dvěma lomítky.

alert('Nic se nedeje...');
alert('10 + 15 = '+(10+15));
</SCRIPT>

Tento skript napřed vypíše výstražné okno s textem "Nic se neděje..." a dalším výstražným oknem oznámí, že 10 + 15 = 25. Řetězce v Javascriptu uzavíráme buď do apostrofů, nebo do uvozovek (je to jedno, ale čím řetězec otevřeme, tím jej musíme uzavřít).

Následující příklad je ukázkou případu, kdy skript napíšeme do jiného souboru, který necháme nahrát ke stránce:

<SCRIPT type="text/javascript" src="soubor.js" language="Javascript1.3">
</SCRIPT>

Jako stránkám s HTML dáváme koncovku html nebo htm (druhá varianta se používala na FAT-filesystému, který umožňoval přípony s nejvýše třemi znaky), souborům s Javascriptem dáváme koncovku js.

Tag NOSCRIPT

Může se stát, že prohlížeč nepodporuje skripty, eventuálně se může jednat o umělecký záměr uživatele znechuceného stálými bezpečnostními dírami v Javascriptu. Aby i uživatel takovéhoto prohlížeče měl ze stránky aspoň nějaký netriviální dojem, mezi tagy <NOSCRIPT> a </NOSCRIPT> dáme HTML-kód, který mají zobrazit prohlížeče, které skripty neinterpretují. V mezích možností se neomezujte na hulvátské sdělení "táhni, nejsou doma" realizované obvykle textem "Vás prohlížeč nepodporuje skripty." Uživatel o tom zpravidla dobře ví a z máločeho má takovou radost, jako z právě uvedené hlášky.

Obecně o Javascriptu

Javascript lze rozdělit na gramatickou část (popisující, jak program vypadá) a na objektový model. Objektový model říká, které proměnné jsou vestavěné a co dělají. Zatímco gramatika se mezi jednotlivými interprety příliš neliší (je určena normou ECMA-262, pro Javascript verze 2.0 konkrétně verzí 3 uvedené normy), objektový model má každý prohlížeč jiný.

Gramatika Javascriptu

Javascript existuje v několika verzích:

• 1.1 - upravena normou organizace Netscape,
• 1.3 - specifikováno normou ECMA-262, rev. 1,
• 1.5 - ....(DTTO)..., rev. 2,
• 2.0 - ..., rev. 3.

Manipulace s proměnnými

Základní operátory

+

• numericky - sčítání čísel,
• řetězcově - konkatenace.

-

(další jen numerické) odčítání,

*

násobení,

/

dělení,

%

počítání modulo,

&&

(logické) a současně,

||

nebo,

!

negace,

&

(bitové) konjunkce,

|

disjunkce,

<<, >> - bitové posuny.

Bitové operátory pohlédnou na argumenty v binárním zápisu a operaci aplikují na každý bit zvlášť. Tedy například bitová konjunkce provede operaci logické konjunkce na každý bit zadaných argumentů.

Další operátory:

=

operátor přiřazení,

==

operátor porovnání (rovnost),

!=

nerovnost,

<, >, <=, >=

menší, větší (resp. rovno),

++, --

inkrementace, dekrementace.

Z Pascalu neznámé jsou operátory inkrementace resp. dekrementace. Jsou to operátory unární a klademe je před nebo za jméno proměnné. Operátor zvýší (resp. sníží o jedna obsah proměnné.

Příklad:

x=++a;
x=a++;

Vzhledem k objektovosti Javascriptu je velice důležitý operátor tečky, jehož pomocí přistupujeme k jednotlivým prvkům objektu. Pro první přiblížení si můžeme představit analogii s přístupem do Pascalských struktur, jen oproti Pascalu v objektu existují nejen proměnné (tzv. propriety nebo atributy), ale i funkce (zvané metody). Téměř každý objekt má kupříkladu metodu toString, která vyvolá konverzi do řetězce. Její použití může vypadat takto:

promenna=10;
retezec=promenna.toString();

Řídící struktury

if(podminka) vyraz

Dále máme k dispozici klíčové slovo else, které nám umožňuje napsat if-větev není-li podmínka splněna. Pokud je vyraz za podmínkou jednoduchý příkaz, před else klademe středník, naopak za případný blok výrazů středník nedáváme.

Příklad

if(a==1)
	funkce();
else	jina_funkce();

if(b==10)
{	prvni_funkce();
	druha_funkce();
}else {	jina_funkce();
	druha_jina_fce();
}

Další základní řídící strukturou je while. Tato struktura umožňuje opakovaně provádět kus kódu, dokud je splněna podmínka.

Příklad

i=0;
while(i<10)
{	alert("jeste nebylo deset");
	i++;
}

Dále je k dispozici řídící struktura for. Tato struktura má syntax shodnou s Javou či jazykem C, leč poměrně odlišnou od Pascalu. Konstrukce vypadá takto: for(inicializační_kód; podmínka;inkrementační_kód)příkazy. Tedy stanovíme, co se má provést při vstupu do for-cyklu, specifikujeme podmínku, cyklus se má opakovat, dokud je splněna, následuje údaj o tom, co se má provést po každé iteraci cyklu (obvykle zvýšit nebo snížit hodnota nějaké proměnné). Pascalskou konstrukci for i:=1 to k do begin prikazy end; můžeme v Javascriptu zapsat takto: for(i=1;i<=k;i++){ prikazy}, tedy stále nic nového pod sluncem (jen Javascriptí for-cyklus je výpočetně mnohem silnější).

Chceme-li vybírat z několika možností, máme k dispozici konstrukci switch. Za klíčové slovo switch uvedeme do závorek výraz, jehož hodnota rozhodne, kterou větem proběhneme. Následují bloky tvaru case vyraz: prikazy..., kde za klíčovým slovem case uvádíme hodnotu při jejímž nabytí řídící proměnnou se má tento blok provést. Ve chvíli, kdy se ukáže, že příslušná hodnota byla nabyta, začíná se kód interpretovat bez ohledu na další case-bloky až do výskytu slova break, tedy v následujícím příkladu při nabytí hodnoty výr2 provedeme i kód pro implicitní případ (ten je uveden klíčovým slovem default):

switch(výraz)
{       case výr1: kód_vykonatelný je-li výraz==výr1...
        break;
        case výr2: kód_vykonatelný je-li výraz==výr2...
        ...
        default: když_neplatí_nic jiného...
}

Funkce a procedury

Funkce voláme podobně jako v jiných programovacích jazycích založených na gramatice jazyka C, tedy tak, že napíšeme jméno funkce následované kulatými závorkami, v nichž jsou argumenty, které chceme funkci předat. Nechceme-li předávat žádné argumenty, necháme závorky prázdné (ale napsat je musíme).

Příklad:

alert('Stiskni knoflik');
document.writeln('kus HTML-textu');
variable.toString();

Příklad:

confirm('Chces pokracovat?');
//tady navratovou hodnotu ignorujeme,
vysl=confirm('A ted doopravdy - chces pokracovat?');
//tady navratovou hodnotu prirazujeme.

Chceme-li definovat novou funkci, postupujeme podobně jako v Pascalu, jen stále místo slova begin píšeme otevírací složenou závorku ({) a místo slova end zavírací (}). Taktéž neurčujeme typ proměnných. Tedy například takto:

function f()
{
	alert('Zavolali jsme funkci f!');
}

function g(a)
{	alert("Zavolali jsme funkci g s argumentem "+a);
}

Za klíčovým slovem return určujeme návratovou hodnotu funkce. Najede-li interpret na slovo return, interpretace funkce končí a vrací se do nadřazené funkce.

Hlavní funkce se nijak zvlášť neoznačuje, sestává prostě z příkazů, které nejsou součástí definice žádných funkcí. Takový kód je proveden okamžitě po nahrání.

Příklad - funkce faktorial:

function faktorial(a)
{       b=1;
        for(c=1;c<=a;c++)b=b*c;
        return b;
}

desfakt=faktorial(10);
//toto probehne hned po nahrani stranky...

Objektový model

Aby bylo možno Javascriptem zasahovat do vzhledu stránky, má každý prohlížeč vestavěnu sadu objektů obsahujících další objekty, atributy a metody. Tyto objekty nám umožňují zasahovat do vzhledu stránky. Každý prohlížeč má strukturu těchto objektů jinou a vpodstatě platí, že čím méně stránku poškodí neexistence některého z objektů, tím lépe. Uveďme si některé tzv. top-level-objekty, tedy objekty na vrchní úrovni:

document

Objekt pohlížející na stránku jako na množinu tagů - obrázků, odkazů, formulářů apod.

navigator

Objekt charakterizující prohlížeč (jméno a verzi).

window

Umožňuje zasahovat přímo do okna prohlížeče (nastavovat nebo aspoň zjišťovat rozměry okna, občas umožňuje i jezdit oknem po ploše.

Math

Objekt obsahující nejrůznější matematické funkce a konstanty (například sinus (sin), absolutní hodnotu (abs), arcus-tangens (atan) a řadu dalších (např. ceil, exp, log, max, min, pow, random, round, sqrt, floor nebo md5).

history

Umožňuje přejít na některou z předchozích (resp. následujících) stránek. Obsahuje zejména metody forward, back a go. První přechází na následující stránku (ekvivalent stisku tlačítka Vpřed), druhý o stránku zpět (ekvivalent tlačítka Back) a třetí očekává údaj o stránce, na kterou má přejít (číslo o kolik se má jít dopředu či dozadu - záporná čísla odkazují ke stránkám minulým, nejtypičtější je history.go(-1);, což udělá totéž, jako history.back();.

frames

Pole rámečků (framů) v současném okně.

Příklad:

for(i in document)
	alert(i);

Tento příklad vypíše ve výstražném okně vše, co existuje v objektu document.

Dále u objektů můžete volat metody valueOf a toString. Tyto metody dokonce mohou být vyvolány implicitně při pokusu o konverzi objektu do čísla resp. řetězce.

Javascript obsahuje i funkce pro styk s uživatelem, tedy takové, které buďto něco oznamují, nebo žádají o reakci.

• Chceme-li uživatele jen postrašit (něco mu oznámit, použijeme funkci alert. Této funkci zadáme jako argument řetězec, který chceme vypsat.
• Chceme-li po uživateli, aby projevil souhlas s jednáním skriptu, použijeme funkce confirm. Tato také přijímá jeden řetězcový argument, oproti funkci alert ale vrací boolskou hodnotu podle toho, které tlačítko bylo zmáčknuto.
• Pokud potřebujeme získat od uživatele nějaký řetězec, je nám k dispozici funkce prompt. Této funkci můžeme zadat jeden nebo dva argumenty (náš příklad je s jedním). Zadáme-li dva argumenty, druhý argument je implicitním obsahem textového políčka (první je jako obvykle komentář).

Další pěknou součástí Javascriptu jsou timery. Chceme-li chvíli počkat a pak až na uživatele vybafnout, použijeme funkci setTimeout. Tato funkce přijímá dva argumenty, první obsahuje kód, který se má vykonat, druhý argument je čas v milisekundách, za který chceme kód spustit. Tato funkce vrací řetězec (jméno timeru). Tento řetězec můžeme strčit funkci clearTimeout. O tom, zda timer již proběhl, nebo se nám jej podařilo úspěšně zlikvidovat, nejsme informováni.

Další důležité funkce jsou write a writeln. Jsou v objektu document a umožňují vypisovat přímo do zdrojového kódu stránky. Na které místo stránky se zapíše, záleží na tom, zda byl skript vyvolán při nahrávání stránky (pak vypisuje přímo na místo, na kterém je), v opačném případě vypisuje na konec dokumentu. Obě funkce přijímají řetězcový argument - HTML-kód, který mají vypsat na konec stránky.

Cvičení: Zkoušejte kombinovat příklad na setTimeout a clearTimeout uvedený výše. Vše si též zkoušejte na svých vlastních příkladech.

Některé vestavěné objekty

alinkColor

Údaj o barvě aktivního odkazu,

linkColor

barva odkazů,

vlinkColor

barva navštívených odkazů,

forms

pole formulářů v dokumentu (obvykle jedno nebo nulaprvkové),

location

objekt popisující URI současné stránky,

title

objekt popisující titulek stránky,

referer

kdo nás poslal?

location

údaje o URI současné stránky,

frames

rámečky v současném rámečku,

parent

objekt rodičovského rámečku,

top

nejvyšší frame (dělící celé okno),

close

metoda, která ukončí současný frame.

action

URI, kam se má formulář odeslat,

elements

pole prvků v dotyčném formuláři,

submit

metoda, která odešle formulář,

reset

metoda, která formulář vymaže.

V každém elementu formuláře najdeme zejména atributy name a value. První určuje jméno prvku, druhý jeho hodnotu. Prvky různé od radio a checkbox mají třeba atributy checked a defaultChecked, radiobutton je opět pole jednotlivých voleb... select má atributy options, index, selected, selectedIndex a text.

Ovladače událostí

Některé handlery mají zvláštní moc. Například vrátí-li ovladač události onSubmit logickou lež (false), odeslání se zmaří. Toto je velmi užitečné chceme-li experimentovat s formuláři zvláště náchylnými na vyplnění. Zjistí-li Javascript, že je špatně vyplněno, je nesmysl zbytečně obtěžovat server pokaženým formulářem.

Příklad:

<SCRIPT type="text/javascript">
function check_form()
{	if(document.forms[0].jmeno.value=="")
	{	alert('Jmeno musi byt vyplneno!');
		return false;
	}
}
</SCRIPT>
<form action="skript.php" onSubmit="return check_form();">
Zadej jmeno: <input type="text" name="jmeno"><br>
<input type="submit" value="odeslat">
</form>

• onLoad - při nahrání stránky,
• onunload - při konci (odchodu ze) stránky,
• onclick - cvaknutí myší,
• ondblclick - dvojclick,
• onmousedown - stisknutí tlačítka myši,
• onmouseup - povolení (uvolnění) tlačítka myši (nad prvkem),
• onmouseover - při příjezdu myši nad prvek,
• onmousemove - při pohybu myši nad elementem,
• onmouseout - při odjezdu myši z objektu,
• onfocus - když dovádíme (začneme dovádět) uvnitř objektu, (pro select, textarea, button)...
• onblur - opak focusu - odejdeme z prvku,
• onsubmit - při pokusu o odeslání formuláře (může odeslání zmařit vrátí-li false, tedy logickou lež),
• onreset - při pokusu o vymazání formuláře,
• onkeypress, onkeydown, onkeyup, onselect, onchange - ...

Vlastní objekty vyrobené pomocí Javascriptu

Jelikož Javascript je objektový jazyk, je přirozené, že si můžeme vyrobit vlastní objekty. K tomuto používáme operátory new a delete. Za operátor new klademe volání funkce (tedy například new funkce();). Výsledkem je objekt obsahující lokální proměnné funkce uvedené za operátorem new. K čemu může být tento nástroj dobrý? Kupříkladu jako ekvivalent typu record z Pascalu, tedy k udržování několika hodnot souvisejících s jedním jevem.

Uveďme si příklad telefonního seznamu. V tom udržujeme jméno, příjmení a telefonní číslo. Chceme-li přidat do seznamu člověka, použijeme operátor new takto:

Příklad

function clovik(jm,prij,cis)
{	jmeno=jm;
	prijmeni=prij;
	telefon=cis;
}

novy_clovek=new clovik("Kamil","Novak","776 112 777");

V příkladu jsme vytvořili objekt jménem novy_clovek mající vlastnosti jmeno, prijmeni a telefon. Chceme-li nyní kupříkladu změnit číslo člověku z minulého příkladu, přistoupíme do objektu jej popisujícího pomocí operátoru tečky.

Příklad

novy_clovek.telefon='604 111 111';

Chceme-li objekt zrušit, použijeme operátor delete. Za klíčové slovo delete klademe jméno objektu, který chceme zrušit (tedy například delete novy_clovek;). Důležitou vlastností objektů je, že operátorem new vyrobíme jen jednu instanci, tedy pokud bychom objekt přiřadili do další proměnné, jedná se stále o jeden a tentýž objekt. Tedy například provedeme-li mezi vytvořením a zrušením objektu novy_clovek přiřazení roztomily_clovek=novy_clovek;, po operaci delete novy_clovek; přestává existovat i obsah proměnné roztomily_clovek!

Vytvoříme-li v každém objektu odkaz na objekt předchozí (a případně i následující), můžeme po těchto odkazech přecházet a takové struktuře říkáme spojový seznam. Ukazujeme příklad telefonního seznamu, který svou složitostí poněkud převyšuje ambice tohoto materiálu, ale je jednou z mála rychle vysvětlitelných aplikací objektů (pochopitelně by šlo postupovat třeba přes asociativní pole...).

Pole

Pole v Javascriptu slouží například k pořádání více dat. Máme-li sadu měření, můžeme si jednotlivé hodnoty uložit do pole. Pole vytváříme jako další objekt pomocí operátoru new, že objekt má být pole řekneme takto: pole=new Array();. Array je vestavěná metoda (funkce), která vytvoří objekt typu pole (čili operátorem new vytváříme nejen své vlastní objekty, jak by si člověk mohl myslet z minulého oddílu. Do pole přistupujeme pomocí operátoru hranatých závorek (jako v mnoha ostatních jazycích). Array je silně multifunkční konstruktor a tvoří pole mnoha různými způsoby. Zadáme-li jako argument jedno celé číslo, má se za to, že určujeme délku pole. Zadáme-li argumentů více, nebo je-li argument něco jiného, než kladné celé číslo, má se za to, že pole inicializujeme. Každé pole má atribut length, který určuje délku pole. Nastavíme-li délku pole kratší, než byla dosud, má se za to, že chceme pole zinicializovat. První prvek pole má index nula!

Příklad

a = new Array(); //Prázdné pole (délky nula)
b = new Array('ahoj'); // Pole délky jedna, a[0] je 'ahoj'
c = new Array(5); // Pole délky 5 plné nedefinovaných prvků.
d = new Array('1','1','2','3','1');
// Pole delky pet obsahujici ruzna cisla 1 -- 3.
// Patrne popisuje neci studijni vysledky :-)

Javascript dále umí tzv. asociativní pole. Asociativní pole je také pole (tedy vytvořené pomocí new Array(...), ale jeho prvky nejsou indexovány čísly, nýbrž řetězci. Místo dlouhého vysvětlování přistupme k názornému příkladu:

TWS = new Array();
TWS['Novak_Jan']='Zapocteno';
TWS['Houska_Kamil']='Zapocteno';
TWS['Mameluk_David']='Nezapocteno';

alert('Novák má z TWS '+TWS['Novak_Jan']);

Příklady

Test celočíselnosti vstupu:

Zaklikávání ve formulářích:

Cvičení: Hra Pexeso se hraje tak, že rozmístíme 2k lístků s čísly 1, 2,..., k (každá hodnota se vyskytuje právě dvakrát). Hráč otočí dva lístky. Pokud je na obou lístcích totéž číslo, hráč lístky bere a hraje znovu. Pokud se čísla neshodují, lístky se otočí zpátky a hraje protihráč. Implementujte jednoduché pexeso v Javascriptu. Ve skutečnosti se místo čísel používají obrázky. Pokud chcete, můžete je použít též.

AJAX

Pokud chceme AJAX využít, vytvoříme si speciální objekt, kterému budeme volat vybrané metody, případně číst a nastavovat atributy anebo nastavovat handlery událostí. Třída, jejíž instanci (objekt) budeme tvořit, se jmenuje XMLHttpRequest, ovšem na Internet Exploreru verze 5 a 6 se tvoří konstruktorem ActiveXObject("Microsoft.XMLHTTP"). Vytvoření příslušného objektu by tedy mohlo vypadat xmlhttp=new XMLHttpRequest();

Pokud už máme instanci této třídy vytvořenu, můžeme použít mimo jiné následující metody a atributy:

open(metoda,cil,asynchronni)

Oznámíme které stránce (skriptu) se mají data předat, jakou metodou a zda má být spojení synchronní nebo asynchronní (synchronní znamená, že se běh Javascriptu zastaví do chvíle, kdy přijde odpověď). Přesnější smysl argumentů je:

• metoda - řetězec určující, zda data budeme odesílat metodou GET nebo POST.
• cil - adresa cílové stránky (skriptu) kam se mají data poslat (například "skript.php".
• asynchronni - boolský údaj (true/false).

send()

Tato metoda je výkonná - odešle nastavený požadavek na server.

setRequestHeader(udaj,hodnota)

Přidá do HTTP-hlavičky zadaný údaj. Můžeme (musíme) použít například u metody POST k nastavení typu odesílaných dat: a.setRequestHeader("Content-type:","application/x-www-form-urlencoded");

onreadystatechange

Ovladač změny stavu. Do něj přiřadíme funkci, která se má zavolat, kdykoliv se změní stav odpovědi. Tento ovladač může reflektovat příslušné změny (vypisovat do stránky).

responseText

Atribut obsahující odpověď serveru v podobě textu.

responseXML

Odpověď od serveru v XML.

status

Atribut oznamující stav spojení (třímístný číselný kód).

readyState

Atribut hlásící stav zpracování našeho requestu (nabývá hodnot 0 - 4, hodnoty znamenají (v tomto pořadí): request not initialized, connection established, request received, processing request, finished). Data zaslaná nám serverem tedy můžeme zpracovat, pokud je tento readyState roven čtyřem.

Příklad:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<title>Pokus s Ajaxem</title>
<script type="text/javascript">
function delej()
{	if (window.XMLHttpRequest)
		// code for IE7+, Firefox, Chrome, Opera, Safari
		xmlhttp=new XMLHttpRequest();
	else	// code for IE6, IE5
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	xmlhttp.onreadystatechange=function()
	{	if (xmlhttp.readyState==4)
    			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
	}
	xmlhttp.open("GET","ajax_info2.txt",true);
	xmlhttp.send();
}
</script>
<button type="button" onclick="delej()">Jedeme!</button>
<div id="myDiv">
Tady se neco stane!
</div>

Cvičení: Vybavte souvislý příklad Kafomat skriptem využívajícím AJAX ke zjišťování dostupnosti jednotlivých druhů káv (do objednávacího formuláře tento indikátor vhodně zapracujte) a taktéž ceny jednotlivých nápojů načítejte pomocí AJAXe (jelikož se mohou každou chvíli měnit podle poptávky jako například ceny letenek).