AJAX Az XMLHttpRequest objektum

Tartalomjegyzék

Az AJAX záróköve az XMLHttpRequest objektum.

Hozzon létre egy XMLHttpRequest objektumot
Határozzon meg egy visszahívási függvényt
Nyissa meg az XMLHttpRequest objektumot
Kérés küldése egy szervernek

Az XMLHttpRequest objektum

Minden modern böngésző támogatja az XMLHttpRequest objektumot.

Az XMLHttpRequest objektum használható adatcserére a mögötte lévő webszerverrel. jelenetek. Ez azt jelenti, hogy lehetséges a weboldal egyes részei anélkül is frissíteni az egész oldal újratöltése.

Hozzon létre egy XMLHttpRequest objektumot

Minden modern böngésző (Chrome, Firefox, IE, Edge, Safari, Opera) rendelkezik beépített XMLHttpRequest objektummal.

Szintaxis egy XMLHttpRequest objektum létrehozásához:

variable = new XMLHttpRequest();

Határozzon meg egy visszahívási funkciót

A visszahívási függvény egy másik függvénynek paraméterként átadott függvény.

Ebben az esetben a visszahívási függvénynek tartalmaznia kell a végrehajtandó kódot, amikor a kész a válasz.

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

Kérés küldése

Ha kérést szeretne küldeni egy szervernek, használhatja az open() és send() metódusokat XMLHttpRequest objektum:

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

Példa

// 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();

Próbálja ki Ön is →

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

Domainek közötti hozzáférés

Biztonsági okokból a modern böngészők nem teszik lehetővé a domainek közötti hozzáférést.

Ez azt jelenti, hogy a weboldalnak és a betölteni próbált XML-fájlnak is ugyanazon a szerveren kell lennie.

A W3Schools példáiban az összes nyitott XML fájl a W3Schools tartományban található.

Ha a fenti példát szeretné használni valamelyik saját weboldalán, a betöltött XML-fájloknak a saját szerverén kell lenniük.

XMLHttpRequest Object Methods

new XMLHttpRequest(): Létrehoz egy új XMLHttpRequest objektumot
abort(): Törli az aktuális kérést
getAllResponseHeaders(): Fejléc-információkat ad vissza
getResponseHeader(): Adott fejléc-információkat ad vissza
open(method, url, async, user, psw): Megadja a kérés

módszerét: a kérés típusát GET vagy POST
url: a fájl helye
aszinkron: igaz (aszinkron) vagy hamis (szinkron)
user: opcionális felhasználónév
psw: opcionális jelszó
send(): Elküldi a kérést a szervernek
GET kérésekhez használatos
send(string): Elküldi a kérést a szervernek.
POST kérésekhez használatos
setRequestHeader(): Címke/érték párt ad hozzá az elküldendő fejléchez

XMLHttpRequest objektum tulajdonságai

onload: Meghatározza a kérés fogadásakor (betöltésekor) meghívandó függvényt.
onreadystatechange: Meghatároz egy függvényt, amelyet akkor kell meghívni, amikor a readyState tulajdonság megváltozik
readyState: Tartja az XMLHttpRequest állapotát.
0: a kérés nincs inicializálva
1: szerverkapcsolat létrejött
2: kérelem érkezett
3: kérelem feldolgozása
4: a kérés befejeződött, és a válasz kész
responseText: A válaszadatokat karakterláncként adja vissza
responseXML: A válaszadatokat XML-adatként adja vissza
status: Egy kérés állapotszámát adja vissza
200: "OK"
403: "Tiltott"
404: "Nem található"
A teljes listát a Http oldalon találja Üzenetek referencia
statusText: Az állapotszöveget adja vissza (pl. "OK" vagy "Nem található")

A betöltési tulajdonság

Az XMLHttpRequest objektummal megadhat egy visszahívási függvényt, amelyet akkor kell végrehajtani, ha a kérés választ kap.

A függvény az XMLHttpRequest objektum onload tulajdonságában van definiálva:

Példa

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

Próbálja ki Ön is →

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

Több visszahívási funkció

Ha egy webhelyen egynél több AJAX feladat van, akkor létre kell hoznia egy funkciót az XMLHttpRequest objektum végrehajtása, és mindegyikhez egy visszahívási függvény AJAX feladat.

A függvényhívásnak tartalmaznia kell az URL-t és azt, hogy milyen függvényt kell meghívni, amikor a kész a válasz.

Példa

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
}

Az onreadystatechange tulajdonság

A readyState tulajdonság rendelkezik az XMLHttpRequest állapotával.

Az onreadystatechange tulajdonság egy visszahívási függvényt határoz meg, amelyet akkor kell végrehajtani, ha a readyState módosul.

A status és a statusText tulajdonságok tartják fenn az XMLHttpRequest objektum állapotát.

onreadystatechange: Meghatároz egy függvényt, amelyet akkor kell meghívni, amikor a readyState tulajdonság megváltozik
readyState: Tartja az XMLHttpRequest állapotát.
0: a kérés nincs inicializálva
1: szerverkapcsolat létrejött
2: kérelem érkezett
3: kérelem feldolgozása
4: a kérés befejeződött, és a válasz kész
status: 200: "OK"
403: "Tiltott"
404: "Az oldal nem található"
A teljes listát a Http üzenetek hivatkozása
statusText: Az állapotszöveget adja vissza (pl. "OK" vagy "Nem található")

Az onreadystatechange függvény minden alkalommal meghívásra kerül, amikor a readyState módosul.

Ha a readyState értéke 4, az állapot pedig 200, a válasz készen áll:

Példa

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();
}

Próbálja ki Ön is →

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

Az onreadystatechange esemény négyszer (1-4) aktiválódik, a readyState minden egyes változása esetén egyszer.