jquery Ajax XMLHttpRequest

GET egyszerűbb és gyorsabb, mint a POST, és a legtöbb esetben használható.

Azonban mindig használjon POST kéréseket, ha:

A gyorsítótárazott fájl nem választható (fájl vagy adatbázis frissítése a kiszolgálón).
Nagy mennyiségű adat küldése a szerverre (a POST-nak nincs méretkorlátozása).
A felhasználói bevitel küldése (amely ismeretlen karaktereket is tartalmazhat), a POST robusztusabb és biztonságosabb, mint a GET.

A GET és a POST részletes összehasonlítása. Katt ide!

https://www.w3schools.com/js/js_ajax_http.asp ajánlataiból, fordítás.

Az AJAX záróköve az XMLHttpRequest objektum.
Hozzon létre egy XMLHttpRequest (XMLHttpKérés) objektumot.
Határozzon meg egy visszahívási függvényt.
Nyissa meg az XMLHttpRequest objektumot.
Majd, jöhet a kérés küldése, egy szervernek.

Böngészőkkel, domainek közötti hozzáférés:
Biztonsági okokból a modern böngészők nem teszik lehetővé a tartományok 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 az itteni példákat szeretné használni valamelyik saját weboldalán, akkor a betöltött XML-fájloknak a saját szerverén kell lenniük.

https://www.w3schools.com/xml/dom_http.asp információja:
Az XMLHttpRequest objektummal lehet frissíteni egy weboldal részeit, vagy az egész oldalt újratöltés nélkül.
Az XMLHttpRequest objektum adatot cserél a szerver színfalai mögött.

Az XMLHttpRequest objektum, a fejlesztők álma:

			Frissítheti a weboldalt, annak újratöltése nélkül.
			Kérhet adatokat egy szerverről, ha az oldal betöltése megtörtént.
			Adatokat fogadhat szervertől, az oldal betöltődése után.
			Adatokat küldhet a szerveren, egy háttérben.
			Szerveren lévő feldolgozó fájloknak, adatokat/feladatokat küldhet, vagy lekérdezhet.

Az XMLHttpRequest objektum

Minden modern böngésző támogatja az XMLHttpRequest objektumot.
Az XMLHttpRequestobjektum a színfalak mögött egy webszerverrel való adatcserére használható.
Ez azt jelenti, hogy lehetőség van a weboldal egyes részeinek frissítésére anélkül, hogy az egész oldalt újra kellene tölteni.

1. 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:
var változó = new XMLHttpRequest();

2. Határozzon meg egy visszahívási függvényt.
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 kódot, amelyet akkor kell végrehajtani, amikor a válasz készen áll.

xhttp.onload = function() {
// Mi a teendő, ha kész a válasz.
}

3. Kérés küldése.
Ha kérést szeretne küldeni egy szervernek, használhatja az XMLHttpRequest objektum open() és send() metódusait:

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

XMLHttpRequest (XMLHttpKérés) Objektum módszerei.

Módszerek.	Leírás.
new XMLHttpRequest()	Létrehoz egy új XMLHttpRequest (XMLHttpKérés) objektumot.
abort()	Megszakítja, azaz, törli az aktuális kérést.
getAllResponseHeaders()	Összes fejléc-információt visszaadja.
getResponseHeader()	Általunk meghatározott, fejléc-információkat adja, vissza.
open(method, url, async, user, psw)	Kérés paramétereinek meghatározásai: Első kettő paramétert kötelező megadni. Harmadiknak ajánlott a true. További paramétereket nem kötelező megadni. method helyére: Kötelező: A kérés típusát, GET vagy POST kell beírni. url helyére: Kötelező: A fájl helye.( URL címet, azaz, elérési útvonalat kell beírni.) async helyére: Ajánlott: true vagy false értéket kell beírni. Igaz (aszinkron) vagy hamis (szinkron) user helyére: Választható: Felhasználónevet kell beírni. psw helyére: Választható: Jelszót kell beírni. Példák: open("GET", "fájlnév.txt"); open("GET", "fájlnév.txt", true); open("GET", "fájlnév.txt", true, "elefant", "Xy456YxX");
send()	Elküldi GET kérést, a szervernek. - GET kérésekhez használják
send(string)	Elküldi POST kérést, a szervernek. - POST kérésekhez használják. - string: Csak POST kérésekhez használható.
setRequestHeader()	Címke/érték párt ad hozzá, az elküldendő fejléchez.

XMLHttpRequest (XMLHttpKérés) objektum tulajdonságai

Property Tulajdonság	Leírás
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	readyState tulajdonságai: (Tartja az XMLHttpRequest állapotát.) 0: A kérés nincs inicializálva. 1: Szerver kapcsolat, létrejött. 2: Kérés érkezett. 3: Kérés feldolgozása. 4: A kérés befejeződött, és kész a válasz.
responseText	A válaszadatokat, karakterláncként adja vissza.
responseXML	A válaszadatokat, XML-adatként adja vissza
status	A kérés, állapotszámát adja vissza 200: "OK" 403: "Forbidden" ------ Tiltott 404: "Not Found" ------ Nem található A teljes listát a (Http Messages Reference) Http üzenetek hivatkozásában találja. Katt ide.
statusText	Visszaadja kérelemhez tartozó, status szöveget (például: "Not Found" nem található vagy "OK") Kérelem állapotához tartozó string (szöveg) formátumok: "success" = siker, "notmodified" = nem módosított, "error" = hiba, "timeout" = időtúllépés, "parsererror" = feldolgozási hiba.

Az onreadystatechange tulajdonság

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

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

A statustulajdonság és a statusTexttulajdonságok, megtartják az XMLHttpRequest objektum állapotát.

A onreadystatechange függvény, minden alkalommal meghívásra kerül, amikor a readyState megváltozik.
Amikor onreadystatechange 4 akkor aktiválódik, a readyState minden változása esetén egyszer aktiválódik.

Amikor readyState 4 és az állapot 200, a válasz készen áll:

Példák.

Összes fejléc-információ lekérdezése. getAllResponseHeaders();	Tartalom lekérdezése, és beillesztése meglévő tartalomhoz. responseText; (válaszSzöveg)
<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#btn_AllHeaders").click(function(){ var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange=function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("allheaders").innerHTML = this.getAllResponseHeaders(); } }; xmlhttp.open("GET", "mintak/szovegutf8.txt", true); xmlhttp.send(); }); }); </script> </head> <body> <h1>XMLHttpRequest</h1> <p>Összes fejléc-információ lekérdezése.</p> <button id="btn_AllHeaders">getAllResponseHeaders();<button> <p id="allheaders"></p> </body>	<head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> function loadDoc() { const xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("responsedemo").innerHTML = this.responseText; } }; xhttp.open("GET", "mintak/szovegutf8.txt"); xhttp.send(); } </script> </head> <body> <h1>XMLHttpRequest</h1> <p>Új tartalom beillesztése.</p> <button type="button" onclick="loadDoc()"> Tartalom módosítása.</button> <div id="responsedemo"></div> </body>

Összes fejléc-információ lekérdezése.
getAllResponseHeaders();

Tartalom lekérdezése, és beillesztése meglévő tartalomhoz.
responseText; (válaszSzöveg)

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

<script>
$(document).ready(function(){

    $("#btn_AllHeaders").click(function(){
          var xmlhttp = new XMLHttpRequest();
          xmlhttp.onreadystatechange=function() {
                if (this.readyState == 4 && this.status == 200) {
                     document.getElementById("allheaders").innerHTML =
					 this.getAllResponseHeaders();
                 }
           };
             xmlhttp.open("GET", "mintak/szovegutf8.txt", true);
             xmlhttp.send();
        });
});
</script>
</head>

<body>
<h1>XMLHttpRequest</h1>

<p>Összes fejléc-információ lekérdezése.</p>
<button id="btn_AllHeaders">getAllResponseHeaders();<button>

<p id="allheaders"></p>
</body>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

<script>
function loadDoc() {
  const xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                 document.getElementById("responsedemo").innerHTML = 
				 this.responseText;
            }
        };
            xhttp.open("GET", "mintak/szovegutf8.txt");
            xhttp.send();
}
</script>

</head>

<body>

<h1>XMLHttpRequest</h1>

<p>Új tartalom beillesztése.</p>
<button type="button" onclick="loadDoc()"> Tartalom módosítása.</button>

<div id="responsedemo"></div>

</body>

Lekérdezett fájl, fejléc-információi itt jelennek meg!

Lekérdezett fájl tartalma, itt jelenik meg!

getResponseHeader példa.

Visszatér általunk lekért, fejléc információval.
A következő példában felsorol meghatározások közül, mindig csak azt kérdezzük le, amire szükségünk van.

<!DOCTYPE html>
<html lang="hu">
<head>
<meta charset="UTF-8">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script>
function loadXMLDoc(url) {
  var xmlhttp = new XMLHttpRequest();
  
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("FejlecInfo").innerHTML =
      "1. Lekérdezés ideje: " + this.getResponseHeader('date')+
      "<br> 2. Utolsó módosítás: " + this.getResponseHeader('Last-Modified')+
      "<br> 3. Szerver: " + this.getResponseHeader('Server')+
      "<br> 4. Etag: " + this.getResponseHeader('Etag')+
      "<br> 5. Fogadott-tartományok: " + this.getResponseHeader('Accept-Ranges')+
      "<br> 6. Tartalom-hossza: " + this.getResponseHeader('Content-Length')+
      "<br> 7. Tartalom típusa: " + this.getResponseHeader('Content-Type')+
      "<br> <br> display, kijelző: " + this.getResponseHeader('display')+
      "<br> Expires, Lejár: " + this.getResponseHeader('Expires')+
      "<br> response, válasz: " + this.getResponseHeader('response')+
      "<br> Vary, Változás: " + this.getResponseHeader('Vary')+
      "<br> X-Cache, X-Gyorsítótár: " + this.getResponseHeader('X-Cache')+
      "<br> x-ezoic-cdn: " + this.getResponseHeader('x-ezoic-cdn')+
      "<br> x-middleton-display, Middleton kijelző: " + this.getResponseHeader('x-middleton-display')+
      "<br> x-middleton-response, Middleton-válasz: " + this.getResponseHeader('x-middleton-response')+
      "<br> Accept-Charset, Elfogadás-karakter: " + this.getResponseHeader('state-change')+
      "<br> description, leírás: " + this.getResponseHeader('Description')+
      "<br> getResponseHeader('value'), értéke = " + this.getResponseHeader('value');
    }
  };
  xmlhttp.open("GET", url, true);
  xmlhttp.send();
}
</script>

</head>

<body>

<!--   Annyi button gombot helyezzünk el URL cím megadásával, amennyi fájl fejléc-információját, le akarjuk kérdezni.  -->
<button onclick="loadXMLDoc('mintak/szovegutf8.txt')">Fejléc információk.<br>szovegutf8.txt <br>Katt ide! </button>
<button onclick="loadXMLDoc('mintak/hivhato_utf8.html')">Fejléc információk.<br> hivhato_utf8.html <br>Katt ide! </button>
<button onclick="loadXMLDoc('ajax-szelektorok.html')">Fejléc információk.<br>ajax-szelektorok.html <br>Katt ide! </button>

<div> <p id="FejlecInfo"> </p> </div>
</body>

Lekérdezett fejléc-információk, itt jelennek meg.