Úvod do AJAX
AJAX je snem vývojáře, protože můžete:
- Aktualizujte webovou stránku bez opětovného načítání stránky
- Vyžádat si data ze serveru - po načtení stránky
- Přijímat data ze serveru - po načtení stránky
- Odesílejte data na server - na pozadí
Vyzkoušejte si to sami Příklady v každé kapitole
V každé kapitole můžete upravovat příklady online a kliknutím na tlačítko zobrazíte výsledek.
Příklad AJAX
Let AJAX change this text
Příklad AJAX vysvětlen
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() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
}
Soubor „ajax_info.txt“ použitý ve výše uvedeném příkladu je jednoduchý textový soubor a vypadá takto:
<h1>AJAX</h1>
<p>AJAX is not a programming language.</p>
<p>AJAX is a
technique for accessing web servers from a web page.</p>
<p>AJAX stands for
Asynchronous JavaScript And XML.</p>
Co je AJAX?
AJAX = synchronní J avaScript a X ML .
AJAX není programovací jazyk.
AJAX používá pouze kombinaci:
- Objekt XMLHttpRequest vestavěný do 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 JavaScriptem
- 7. Správnou akci (jako aktualizaci stránky) provede JavaScript