V tradičním kódu JavaScript, chcete-li získat informace z databáze nebo souboru na serveru nebo odeslat uživatelské informace na server, budete muset vytvořit formulář HTML a GET nebo POST data na serveru. Uživatel bude muset kliknout na tlačítko Odeslat, aby odeslal / získal informace, počkal na to, aby server odpověděl, a pak se nahraje nová stránka s výsledky.

Protože server vrátí novou stránku pokaždé, když uživatel předloží vstup, tradiční webové aplikace mohou běžet pomalu a mají tendenci být méně uživatelsky přívětivé. S rozhraním AJAX komunikuje váš JavaScript přímo se serverem prostřednictvím objektu XMLHttpRequest jazyka JavaScript.

Při požadavku na protokol HTTP může webová stránka požádat a získat odpověď z webového serveru bez opětovného načtení stránky. Uživatel zůstane na stejné stránce a nebude si všimat, že stránky vyžadují skripty nebo odesílají data na server na pozadí.

Tento obrázek je zjednodušený úvod o tom, jak Ajax funguje:

Uživatel odešle požadavek, který provádí akci, a reakce akce se zobrazí ve vrstvě identifikované podle ID, aniž by došlo k opětovnému načtení celé stránky. Například vrstva s tímto id:

V následujících krocích uvidíme, jak vytvořit XMLHttpRequest a přijmout odpověď ze serveru.

1. Vytvořte XMLhttpRequest

Různé prohlížeče používají pro vytvoření objektu XMLHttpRequest různé metody. Internet Explorer používá ActiveXObject, zatímco jiné prohlížeče používají vestavěný objekt JavaScript nazvaný XMLHttpRequest.

Chcete-li vytvořit tento objekt a zabývat se různými prohlížeči, použijeme příkaz "zkusit a chytit".

funkce ajaxFunction ()
{{
var xmlHttp;
Snaž se
{{
// Firefox, Opera 8.0+, Safari
xmlHttp = nový XMLHttpRequest ();
}}
úlovek (e)
{{
// Internet Explorer
Snaž se
{{
xmlHttp = nový ActiveXObject ("Msxml2.XMLHTTP");
}}
úlovek (e)
{{
Snaž se
{{
xmlHttp = nový ActiveXObject ("Microsoft.XMLHTTP");
}}
úlovek (e)
{{
alert ("Váš prohlížeč nepodporuje AJAX!");
vrátit falešně;
}}
}}
}}

2. Odeslání požadavku na server

Chcete-li odeslat požadavek na server, použijeme metodu open () a metodu send ().

Metoda open () má tři argumenty. První argument definuje, kterou metodu použijete při odesílání požadavku (GET nebo POST). Druhý argument určuje adresu URL skriptu na straně serveru. Třetí argument specifikuje, že žádost by se měla zpracovávat asynchronně. Metoda send () odešle požadavek na server.

xmlHttp.open ("GET", "time.asp", true);
xmlHttp.send (null);

3. Psaní skriptu na straně serveru

ResponseText uloží data vrácená ze serveru. Zde chceme poslat zpět aktuální čas. Kód v "time.asp" vypadá takto:

<%
response.expires = -1
response.write (čas)
%>

4. Spotřeba odpovědi

Nyní musíme přijmout přijatou odpověď a zobrazit ji uživateli.

xmlHttp.onreadystatechange = funkce ()
{{
pokud (xmlHttp.readyState == 4)
{{
document.myForm.time.value = xmlHttp.responseText;
}}
}}
xmlHttp.open ("GET", "time.asp", true);
xmlHttp.send (null);
}}

5. Vyplňte kód

Teď se musíme rozhodnout, kdy má být funkce AJAX provedena. Tuto funkci necháme spuštěn "za scénou", když uživatel zadá něco v textovém poli uživatelského jména. Celý kód vypadá takto:




Název: onkeyup = "ajaxFunction ();" jméno = "uživatelské jméno" />
Čas: