AJAX Úvod

Obsah

    Zobrazit obsah

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

Nechte AJAX změnit tento text



Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<div id="demo">
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Change Content</button>
</div>

<script>
function loadDoc() {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("demo").innerHTML =
    this.responseText;
  }
  xhttp.open("GET", "ajax_info.txt");
  xhttp.send();
}
</script>

</body>
</html>

Vysvětlení příkladu AJAX

Stránka HTML

<!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>.

<div> sekce slouží k zobrazení informací ze serveru.

volá funkci (pokud na ni kliknete).

Funkce vyžaduje data z webu server a zobrazí jej:

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=Asynchronní Javascript And XML.

AJAX není programovací jazyk.

AJAX používá pouze kombinaci:

  • Objekt XMLHttpRequest zabudovaný v prohlížeči (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 používat XML k přenosu dat, 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.