Pokud chcete aktualizovat obsah svého webu, aniž byste museli stránku restartovat, budete potřebovat technologii AJAX. Umožňuje asynchronně sdílet data se serverem a měnit obsah stránky bez jejího úplného restartování. V tomto článku vám řekneme, jak vytvořit HTML kód pomocí AJAXu a poskytneme podrobné pokyny a tipy.
Krok 1: Vytvořte HTML formulář
Příklad HTML formuláře:
Krok 2: Vytvořte JavaScript funkce AJAX
Příklad JavaScriptu funkce AJAX:
function loadHTML() >xhr.send();>Odkaz můžete změnit v metodě ' xhr.open ' na cestě k vašemu serverovému skriptu a nastavení dotazu podle vašich potřeb.
Chcete-li začít, budete muset vytvořit objekt XMLHttpRequest, který bude provádět požadavky na server. Můžete to udělat pomocí následujícího kódu:
var xhttp = new XMLHttpRequest();
Poté musíte zadat funkci zpětného volání (callback), která bude volána, když je dotaz úspěšně proveden. V této funkci můžete získat obsah HTML kódu a přidat jej na stránku. Můžete například použít následující kód:
xhttp.onreadystatechange = function() >;
Zde uvádíme, že při změně stavu dotazu (readystatechange), pokud je stav 4 a stav je 200 (dotaz je úspěšně proveden), obdržíme obsah odpovědi ze serveru (this.responseText) a přidejte jej do položky s identifikátorem "myDiv" na stránce pomocí vlastnosti innerHTML.
Také před provedením dotazu musíte zadat metodu (GET nebo POST) a adresu URL, na kterou chcete dotaz provést. Můžete například použít následující kód:
xhttp.open("GET", "http://example.com/my_page.html", true);
Zde uvádíme metodu GET a adresu URL "http://example.com/my_page.html". třetí argument true znamená, že požadavek musí být asynchronní.
Nakonec, chcete-li odeslat dotaz, musíte zavolat metodu send() objektu XMLHttpRequest. Například:
xhttp.send();
Tento kód odešle požadavek na server a při přijetí odpovědi ze serveru vyvolá funkci zpětného volání.
Porozumění práci Ajaxu a jeho výhodám
Hlavní výhodou AJAXu je zvýšení citlivosti a interaktivity webových aplikací. Uživatel může komunikovat s webem, aniž by čekal úplný restart stránky, což zlepšuje uživatelský zážitek.
Pomocí AJAXu můžete aktualizovat jednotlivé části stránky, odesílat a přijímat data na pozadí, aniž byste museli restartovat celou stránku. Umožňuje vytvářet dynamické, interaktivní webové stránky a aplikace.
Výhody používání Ajaxu:
- Rychlá odezva: AJAX umožňuje odesílat dotazy a přijímat odpovědi ze serveru asynchronně, bez blokování hlavního proudu prohlížeče. Díky tomu jsou webové aplikace citlivější a umožňují uživateli pokračovat v interakci s webem bez zpoždění.
- Úspora provozu: AJAX vám umožňuje aktualizovat pouze požadované části stránky, aniž byste museli restartovat celou stránku. To snižuje využití provozu a urychluje načítání webu.
- Vylepšená uživatelská zkušenost: AJAX umožňuje vytvářet interaktivní prvky, jako je dynamická aktualizace obsahu, automatické doplňování, okamžitá validace tvarů atd. díky tomu je uživatelský zážitek příjemnější a efektivnější.
- Modularita a opětovné použití kódu: AJAX umožňuje rozdělit klientskou a serverovou logiku, díky čemuž je Kód modulárnější a umožňuje opětovné použití komponent.