AJAX – Odeslání požadavku na server
Objekt XMLHttpRequest se používá k výměně dat se serverem.
Odeslat požadavek na server
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();
| Method | Description |
|---|---|
| open(method, url, async) | Specifies the type of request method: the type of request: GET or POST url: the server (file) location async: true (asynchronous) or false (synchronous) |
| send() | Sends the request to the server (used for GET) |
| send(string) | Sends the request to the server (used for POST) |
GET nebo 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.
GET požadavky
Jednoduchý požadavek GET:
Příklad
xhttp.open("GET", "demo_get.asp", true);
xhttp.send();
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 k adrese URL jedinečné ID:
Příklad
xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();
Pokud chcete odeslat informace metodou GET, přidejte informace do adresy URL:
Příklad
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
xhttp.send();
Požadavky POST
Jednoduchý požadavek POST:
Příklad
xhttp.open("POST", "demo_post.asp", true);
xhttp.send();
Chcete-li POST data jako formulář HTML, přidejte hlavičku HTTP pomocí setRequestHeader(). V metodě send() zadejte data, která chcete odeslat:
Příklad
xhttp.open("POST", "demo_post2.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford");
| Method | Description |
|---|---|
| setRequestHeader(header, value) | Adds HTTP headers to the request header: specifies the header name value: specifies the header value |
Adresa URL – Soubor na serveru
Parametr url metody open() je adresa souboru na serveru:
xhttp.open("GET", "ajax_test.asp", true);
Soubor může být libovolný 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).
Asynchronní – pravda nebo ne?
Požadavky serveru by měly být odesílány asynchronně.
Parametr async metody open() by měl být nastaven na hodnotu true:
xhttp.open("GET", "ajax_test.asp", true);
Při asynchronním odesílání nemusí JavaScript č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
Vlastnost onreadystatechange
Pomocí objektu XMLHttpRequest můžete definovat funkci, která se má provést, když požadavek obdrží odpověď.
Funkce je definována ve vlastnosti onreadystatechange objektu XMLHttpResponse:
Příklad
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();
Soubor „ajax_info.txt“ použitý ve výše uvedeném příkladu je jednoduchý textový soubor a vypadá takto:
<h1>AJAX</h1>
<p>AJAX is not a programming language.</p>
<p>AJAX is a
technique for accessing web servers from a web page.</p>
<p>AJAX stands for
Asynchronous JavaScript And XML.</p>
Více o onreadystatechange se dozvíte v pozdější kapitole.
Synchronní požadavek
Chcete-li provést synchronní požadavek, změňte třetí parametr v metodě open() na hodnotu false:
xhttp.open("GET", "ajax_info.txt", false);
Někdy se pro rychlé testování používá async = false. Synchronní požadavky najdete také ve starším kódu JavaScript.
Protože kód bude čekat na dokončení serveru, není potřeba funkce onreadystatechange:
Příklad
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;
Synchronní XMLHttpRequest (async = false) se nedoporučuje, protože JavaScript se zastaví, dokud nebude připravena odpověď serveru. Pokud je server zaneprázdněn nebo pomalý, aplikace přestane reagovat nebo se zastaví.
Synchronní XMLHttpRequest je v procesu odstraňování z webového standardu, ale tento proces může trvat mnoho let.
Moderní vývojářské nástroje se vyzývají, aby varovaly před používáním synchronních požadavků a mohou vyvolat výjimku InvalidAccessError, když nastane.