Úvod do AJAX
AJAX je snem vývojáře, protože můžete:
- Číst data z webového serveru - po načtení stránky
- Aktualizujte webovou stránku bez opětovného načítání stránky
- Odesílejte data na webový server - na pozadí
Příklad AJAX
Let AJAX change this text
Vysvětlení příkladu AJAX
HTML stránka
<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h2>Let AJAX change this text</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>
</body>
</html>
Stránka HTML obsahuje sekci <div> a tlačítko <button>.
Sekce <div> se používá k zobrazení informací ze serveru.
<tlačítko> volá funkci (pokud na ni kliknete).
Funkce požaduje data z webového serveru a zobrazuje je:
Funkce loadDoc()
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
Co je AJAX?
AJAX = synchronní J avaScript a X ML .
AJAX není programovací jazyk.
AJAX používá pouze kombinaci:
- Vestavěný
XMLHttpRequestobjekt prohlížeče (k vyžádání dat z webového serveru) - JavaScript a HTML DOM (k zobrazení nebo použití dat)
AJAX je zavádějící název. Aplikace AJAX mohou k přenosu dat používat XML, ale stejně běžné je přenášet data jako prostý text nebo text JSON.
AJAX umožňuje asynchronní aktualizaci webových stránek výměnou dat s webovým serverem v zákulisí. To znamená, že je možné aktualizovat části webové stránky, aniž by bylo nutné znovu načítat celou stránku.
Jak funguje AJAX
- 1. Na webové stránce dojde k události (stránka se načte, klikne se na tlačítko)
- 2. Objekt XMLHttpRequest je vytvořen JavaScriptem
- 3. Objekt XMLHttpRequest odešle požadavek na webový server
- 4. Server požadavek zpracuje
- 5. Server odešle odpověď zpět na webovou stránku
- 6. Odpověď je přečtena pomocí JavaScriptu
- 7. Správnou akci (jako aktualizaci stránky) provede JavaScript
Moderní prohlížeče (Fetch API)
Moderní prohlížeče mohou místo objektu XMLHttpRequest používat rozhraní Fetch API.
Rozhraní Fetch API umožňuje webovému prohlížeči odesílat požadavky HTTP na webové servery.
Pokud použijete objekt XMLHttpRequest, Fetch může udělat totéž jednodušším způsobem.