Az XMLHttpRequest objektum adatok kérésére szolgál egy szervertől.
Ha kérést szeretnénk küldeni egy szervernek, akkor az XMLHttpRequest objektum open() és send() metódusait használjuk:
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();Megadja a kérés típusát
módszer: a kérés típusa: GET vagy POST
url: a szerver (fájl) helye
aszinkron: igaz (aszinkron) vagy hamis (szinkron)
Elküldi a kérést a szervernek (a GET-hez használatos)
Elküldi a kérést a szervernek (a POST-hoz használatos)
Az open() metódus url paramétere egy szerveren lévő fájl címe:
xhttp.open("GET", "ajax_test.asp", true);A fájl bármilyen típusú lehet, például .txt és .xml, vagy szerver szkriptfájlok, például .asp és .php (amely képes végrehajtani műveletek a szerveren a válasz visszaküldése előtt).
A szerverkéréseket aszinkron módon kell elküldeni.
Az open() aszinkron paramétere a metódust igazra kell állítani:
xhttp.open("GET", "ajax_test.asp", true);Aszinkron küldéssel a A JavaScript-nek nem kell várnia a szerver válaszára, de ehelyett:
futtasson más szkripteket, miközben a szerver válaszára vár
kezelje a választ, miután a válasz elkészült
Az async paraméter alapértelmezett értéke async=true.
A harmadik paramétert nyugodtan eltávolíthatja a kódból.
A szinkron XMLHttpRequest (async=false) nem ajánlott, mert a JavaScript leállítja a végrehajtást, amíg a kiszolgáló válasza készen nem áll. Ha a szerver foglalt vagy lassú, a az alkalmazás lefagy vagy leáll.
GET kérés vagy POST kérés?A 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.
Egy egyszerű GET kérés:
xhttp.open("GET", "demo_get.asp");
xhttp.send();Próbálja ki Ön is →
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "demo_get.asp");
xhttp.send();
}
</script>
</body>
</html>
A fenti példában gyorsítótárazott eredményt kaphat. Ennek elkerülése érdekében adjon hozzá egyedi azonosítót az URL-hez:
xhttp.open("GET", "demo_get.asp?t=" + Math.random());
xhttp.send();Próbálja ki Ön is →
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "demo_get.asp?t=" + Math.random());
xhttp.send();
}
</script>
</body>
</html>
Ha a GET metódussal szeretne információkat küldeni, adja hozzá az információt az URL-hez:
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford");
xhttp.send();Próbálja ki Ön is →
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford");
xhttp.send();
}
</script>
</body>
</html>
Hogy a szerver hogyan használja a bemenetet, és hogyan válaszol a kérésre, azt egy későbbi fejezet ismerteti.
Egy egyszerű POST kérés:
xhttp.open("POST", "demo_post.asp");
xhttp.send();Próbálja ki Ön is →
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("POST", "demo_post.asp");
xhttp.send();
}
</script>
</body>
</html>
Az adatok, például egy HTML-űrlap POST-hoz adjon hozzá egy HTTP-fejlécet a setRequestHeader()-val. Adja meg a küldeni kívánt adatokat a send() metódussal:
xhttp.open("POST", "ajax_test.asp");
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");Próbálja ki Ön is →
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<button type="button" onclick="loadDoc()">Request data</button>
<p id="demo"></p>
<script>
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("POST", "demo_post2.asp");
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
}
</script>
</body>
</html>
HTTP-fejléceket ad hozzá a kéréshez
fejléc: megadja a fejléc nevét
érték: a fejléc értékét adja meg
Szinkron kérés végrehajtásához módosítsa az open() metódus harmadik paraméterét false-ra:
xhttp.open("GET", "ajax_info.txt", false);Néha az async=false értéket használják gyors teszteléshez. Azt is meg fogja találni szinkron kérések régebbi JavaScript-kódban.
Mivel a kód megvárja a szerver befejezését, nincs szükség readystatechange funkció:
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;Próbálja ki Ön is →
<!DOCTYPE html>
<html>
<body>
<h2>The XMLHttpRequest Object</h2>
<p id="demo">Let AJAX change this text.</p>
<button type="button" onclick="loadDoc()">Change Content</button>
<script>
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
}
</script>
</body>
</html>
A szinkron XMLHttpRequest (async=false) nem ajánlott, mert a JavaScript leállítja a végrehajtást, amíg a kiszolgáló válasza készen nem áll. Ha a szerver foglalt vagy lassú, a az alkalmazás lefagy vagy leáll.
A modern fejlesztői eszközök használata figyelmeztetést javasol szinkron kéréseket, és előfordulásakor InvalidAccessError kivételt adhat.