AJAX Objekt XMLHttpRequest

Obsah

Základním kamenem AJAX je objekt XMLHttpRequest.

Vytvořte objekt XMLHttpRequest
Definujte funkci zpětného volání
Otevřete objekt XMLHttpRequest
Odeslat požadavek na server

Objekt XMLHttpRequest

Všechny moderní prohlížeče podporují objekt XMLHttpRequest.

Objekt XMLHttpRequest lze použít k výměně dat s webovým serverem za scény. To znamená, že je možné aktualizovat části webové stránky bez znovu načtení celé stránky.

Vytvořte objekt XMLHttpRequest

Všechny moderní prohlížeče (Chrome, Firefox, IE, Edge, Safari, Opera) mají vestavěný objekt XMLHttpRequest.

Syntaxe pro vytvoření objektu XMLHttpRequest:

variable = new XMLHttpRequest();

Definujte funkci zpětného volání

Funkce zpětného volání je funkce předaná jako parametr jiné funkci.

V tomto případě by funkce zpětného volání měla obsahovat kód, který se má spustit, když je odpověď je připravena.

xhttp.onload = function() {
   // What to do when the response is ready
}

Odeslat žádost

Chcete-li odeslat požadavek na server, můžete použít metody open() a send(). Objekt XMLHttpRequest:

xhttp.open("GET", "ajax_info.txt");
xhttp.send();

Příklad

// Create an XMLHttpRequest object
const xhttp = new XMLHttpRequest();

// Define a callback function
xhttp.onload = function() {
  // Here you can use the Data
}

// Send a request
xhttp.open("GET", "ajax_info.txt");
xhttp.send();

Zkuste to sami →

<!DOCTYPE html>
<html>
<body>

<h2>The XMLHttpRequest Object</h2>

<div id="demo">
<p>Let AJAX change this text.</p>
<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>

Přístup napříč doménami

Moderní prohlížeče z bezpečnostních důvodů neumožňují přístup napříč doménami.

To znamená, že webová stránka i soubor XML, který se pokouší načíst, musí být umístěny na stejném serveru.

Příklady na W3Schools všechny otevřené soubory XML umístěné v doméně W3Schools.

Pokud chcete výše uvedený příklad použít na jedné ze svých webových stránek, soubory XML, které načtete, musí být umístěny na vašem vlastním serveru.

Metody objektu XMLHttpRequest

new XMLHttpRequest(): Vytvoří nový objekt XMLHttpRequest
abort(): Zruší aktuální požadavek
getAllResponseHeaders(): Vrátí informace v záhlaví
getResponseHeader(): Vrátí konkrétní informace záhlaví
open(method, url, async, user, psw): Určuje

metodu požadavku: typ požadavku GET nebo POST
url: umístění souboru
asynchronní: true (asynchronní) nebo false (synchronní)
user: volitelné uživatelské jméno
psw: volitelné heslo
send(): Odešle požadavek na server
Používá se pro požadavky GET
send(string): Odešle požadavek na server.
Používá se pro požadavky POST
setRequestHeader(): Přidá do hlavičky k odeslání dvojici štítek/hodnota

Vlastnosti objektu XMLHttpRequest

onload: Definuje funkci, která se má zavolat, když je požadavek přijat (načten)
onreadystatechange: Definuje funkci, která se má volat, když se změní vlastnost readyState
readyState: Uchovává stav XMLHttpRequest.
0: požadavek není inicializován
1: Navázáno připojení k serveru
2: žádost přijata
3: zpracování požadavku
4: požadavek dokončen a odpověď je připravena
responseText: Vrátí data odpovědi jako řetězec
responseXML: Vrátí data odpovědi jako data XML
status: Vrátí stavové číslo požadavku
200: "OK"
403: "Zakázáno"
404: "Nenalezeno"
Úplný seznam najdete na Http Odkaz na zprávy
statusText: Vrátí text stavu (např. „OK“ nebo „Nenalezeno“)

Vlastnost načtení

Pomocí objektu XMLHttpRequest můžete definovat funkci zpětného volání, která se má spustit, když žádost obdrží odpověď.

Funkce je definována ve vlastnosti onload objektu XMLHttpRequest:

Příklad

xhttp.onload = function() {
  document.getElementById("demo").innerHTML = this.responseText;
 }
 xhttp.open("GET", "ajax_info.txt");
 xhttp.send();

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>

Více funkcí zpětného volání

Pokud máte na webu více než jednu úlohu AJAX, měli byste pro ni vytvořit jednu funkci spuštění objektu XMLHttpRequest a jednu funkci zpětného volání pro každý Úloha AJAX.

Volání funkce by mělo obsahovat URL a jakou funkci volat, když je odpověď je připravena.

Příklad

loadDoc("url-1", myFunction1);

loadDoc("url-2", myFunction2);

function loadDoc(url, cFunction) {
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {cFunction(this);}
  xhttp.open("GET", url);
  xhttp.send();
}

function myFunction1(xhttp) {
  // action goes here
}

function myFunction2(xhttp) {
  // action goes here
}

Vlastnost onreadystatechange

Vlastnost readyState uchovává stav XMLHttpRequest.

Vlastnost onreadystatechange definuje funkci zpětného volání, která se má provést, když se readyState změní.

Vlastnosti status a statusText obsahují stav objektu XMLHttpRequest.

onreadystatechange: Definuje funkci, která se má volat, když se změní vlastnost readyState
readyState: Uchovává stav XMLHttpRequest.
0: požadavek není inicializován
1: Navázáno připojení k serveru
2: žádost přijata
3: zpracování požadavku
4: požadavek dokončen a odpověď je připravena
status: 200: "OK"
403: "Zakázáno"
404: "Stránka nenalezena"
Úplný seznam najdete na Odkaz na zprávy HTTP
statusText: Vrátí text stavu (např. „OK“ nebo „Nenalezeno“)

Funkce onreadystatechange se volá pokaždé, když se readyState změní.

Když je readyState 4 a stav je 200, odpověď je připravena:

Příklad

function loadDoc() {
  const 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");
  xhttp.send();
}

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.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt");
  xhttp.send();
}
</script>

</body>
</html>

Událost onreadystatechange se spustí čtyřikrát (1-4), jednou pro každou změnu v readyState.