AJAX – XMLHttpRequest
Objekt XMLHttpRequest se používá k vyžádání dat ze serveru.
Odeslat požadavek na server
K odeslání požadavku na server používáme metody open() a send() XMLHttpRequestobjektu:
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) |
Adresa URL – Soubor na serveru
Parametr url open()metody 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
Výchozí hodnota parametru async je async = true.
Třetí parametr můžete z kódu bezpečně odebrat.
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í.
GET nebo POST?
GETje jednodušší a rychlejší než POSTa 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á GETžádost:
Příklad
xhttp.open("GET", "demo_get.asp");
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());
xhttp.send();
Pokud chcete odeslat informace pomocí GETmetody, přidejte informace do adresy URL:
Příklad
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford");
xhttp.send();
Jak server používá vstup a jak server odpovídá na požadavek, je vysvětleno v další kapitole.
Požadavky POST
Jednoduchá POSTžádost:
Příklad
xhttp.open("POST", "demo_post.asp");
xhttp.send();
Chcete-li POST data jako formulář HTML, přidejte záhlaví HTTP s setRequestHeader(). Zadejte data, která chcete odeslat v send()metodě:
Příklad
xhttp.open("POST", "ajax_test.asp");
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 |
Synchronní požadavek
Chcete-li provést synchronní požadavek, změňte třetí parametr v open()metodě na 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 žádná onreadystatechange
funkce:
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í.
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.