Objekt XMLHttpRequest se používá k vyžádání dat ze serveru.
K odeslání požadavku na server používáme metody open() a send() objektu XMLHttpRequest:
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();Určuje typ požadavku
metoda: typ požadavku: GET nebo POST
url: umístění serveru (souboru)
asynchronní: true (asynchronní) nebo false (synchronní)
Odešle požadavek na server (používá se pro GET)
Odešle požadavek na server (používá se pro POST)
Parametr url metody open() je adresa souboru na serveru:
xhttp.open("GET", "ajax_test.asp", true);Soubor může být jakýkoli soubor, například .txt a .xml nebo serverové skriptovací soubory jako .asp a .php (které mohou provádět akce na serveru před odesláním odpovědi zpět).
Požadavky serveru by měly být odesílány asynchronně.
Async parametr open() metoda by měla být nastavena na true:
xhttp.open("GET", "ajax_test.asp", true);Odesláním asynchronně se JavaScript nemusí čekat na odpověď serveru, ale může:
spouštět další skripty při čekání na odpověď serveru
zabývat se odpovědí poté, co je odpověď připravena
Výchozí hodnota parametru async je async=true.
Třetí parametr můžete ze svého kódu bezpečně odebrat.
Synchronní XMLHttpRequest (async=false) se nedoporučuje, protože JavaScript ano zastavte provádění, dokud nebude připravena odpověď serveru. Pokud je server zaneprázdněn nebo pomalý, aplikace se zasekne nebo zastaví.
GET nebo požadavek POST?GET je jednodušší a rychlejší než POST a lze jej použít ve většině případů.
Požadavky POST však vždy používejte, když:
Soubor v mezipaměti není možnost (aktualizace souboru nebo databáze na serveru).
Odesílání velkého množství dat na server (POST nemá žádná omezení velikosti).
Odesílání uživatelského vstupu (který může obsahovat neznámé znaky), POST je robustnější a bezpečnější než GET.
Jednoduchý požadavek GET:
xhttp.open("GET", "demo_get.asp");
xhttp.send();Zkuste to sami →
<!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>
Ve výše uvedeném příkladu můžete získat výsledek uložený v mezipaměti. Chcete-li se tomu vyhnout, přidejte do adresy URL jedinečné ID:
xhttp.open("GET", "demo_get.asp?t=" + Math.random());
xhttp.send();Zkuste to sami →
<!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>
Pokud chcete odeslat informace metodou GET, přidejte informace do adresy URL:
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford");
xhttp.send();Zkuste to sami →
<!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>
Jak server používá vstup a jak server odpovídá na požadavek, je vysvětleno v další kapitole.
Jednoduchý požadavek POST:
xhttp.open("POST", "demo_post.asp");
xhttp.send();Zkuste to sami →
<!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>
Chcete-li POST data jako formulář HTML, přidejte záhlaví HTTP pomocí setRequestHeader(). Pomocí metody send() zadejte data, která chcete odeslat:
xhttp.open("POST", "ajax_test.asp");
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");Zkuste to sami →
<!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>
Přidá k požadavku HTTP hlavičky
header: určuje název záhlaví
hodnota: určuje hodnotu záhlaví
Chcete-li provést synchronní požadavek, změňte třetí parametr v metodě open() na false:
xhttp.open("GET", "ajax_info.txt", false);Někdy se pro rychlé testování používá async=false. Také najdete synchronní požadavky ve starším kódu JavaScript.
Protože kód bude čekat na dokončení serveru, není potřeba onreadystatechange funkce:
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;Zkuste to sami →
<!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>
Synchronní XMLHttpRequest (async=false) se nedoporučuje, protože JavaScript ano zastavte provádění, dokud nebude připravena odpověď serveru. Pokud je server zaneprázdněn nebo pomalý, aplikace se zasekne nebo zastaví.
Moderní vývojářské nástroje se vyzývají, aby varovaly před používáním synchronní požadavky a může vyvolat výjimku InvalidAccessError, když nastane.