Co je AJAX?
AJAX je snem vývojáře, protože můžete:
- Čtení dat z webového serveru - po načtení webové 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
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();
}
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 pomocí JavaScriptu
- 7. Správnou akci (jako aktualizaci stránky) provede JavaScript
Kompletní výukový program AJAX
Toto byl krátký popis AJAX.
Úplný výukový program AJAX naleznete na W3Schools AJAX Tutorial .
Další příklady AJAX najdete na W3Schools AJAX Příklady .