AJAX – Objekt XMLHttpRequest
Základním kamenem AJAX je objekt XMLHttpRequest.
- Vytvořte objekt XMLHttpRequest
- Definujte funkci zpětného volání
- Otevřete objekt XMLHttpRequest
- Odeslat požadavek na server
Objekt XMLHttpRequest
Všechny moderní prohlížeče XMLHttpRequestobjekt podporují.
Objekt XMLHttpRequestlze použít k výměně dat s webovým serverem v zákulisí. To znamená, že je možné aktualizovat části webové stránky, aniž by bylo nutné znovu načítat celou stránku.
Vytvořte objekt XMLHttpRequest
Všechny moderní prohlížeče (Chrome, Firefox, IE, Edge, Safari, Opera) mají vestavěný XMLHttpRequestobjekt.
Syntaxe pro vytvoření XMLHttpRequestobjektu:
variable = new XMLHttpRequest();
Definujte funkci zpětného volání
Funkce zpětného volání je funkce předaná jako parametr jiné funkci.
V tomto případě by funkce zpětného volání měla obsahovat kód, který se má provést, když je odpověď připravena.
xhttp.onload = function() {
// What to do when the response is ready
}
Odeslat žádost
Chcete-li odeslat požadavek na server, můžete použít metody open() a send()
XMLHttpRequestobjektu:
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Příklad
// Create an XMLHttpRequest object
const xhttp = new XMLHttpRequest();
// Define a callback function
xhttp.onload = function() {
// Here you can use the Data
}
// Send a request
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Přístup napříč doménami
Moderní prohlížeče z bezpečnostních důvodů neumožňují přístup napříč doménami.
To znamená, že webová stránka i soubor XML, který se pokouší načíst, musí být umístěny na stejném serveru.
Příklady na W3Schools všechny otevřené soubory XML umístěné v doméně W3Schools.
Pokud chcete výše uvedený příklad použít na jedné ze svých vlastních webových stránek, soubory XML, které načtete, musí být umístěny na vašem vlastním serveru.
Metody objektu XMLHttpRequest
| Method | Description |
|---|---|
| new XMLHttpRequest() | Creates a new XMLHttpRequest object |
| abort() | Cancels the current request |
| getAllResponseHeaders() | Returns header information |
| getResponseHeader() | Returns specific header information |
| open(method, url, async, user, psw) | Specifies the request method: the request type GET or POST url: the file location async: true (asynchronous) or false (synchronous) user: optional user name psw: optional password |
| send() | Sends the request to the server Used for GET requests |
| send(string) | Sends the request to the server. Used for POST requests |
| setRequestHeader() | Adds a label/value pair to the header to be sent |
Vlastnosti objektu XMLHttpRequest
| Property | Description |
|---|---|
| onload | Defines a function to be called when the request is recieved (loaded) |
| onreadystatechange | Defines a function to be called when the readyState property changes |
| readyState | Holds the status of the XMLHttpRequest. 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready |
| responseText | Returns the response data as a string |
| responseXML | Returns the response data as XML data |
| status | Returns the status-number of a request 200: "OK" 403: "Forbidden" 404: "Not Found" For a complete list go to the Http Messages Reference |
| statusText | Returns the status-text (e.g. "OK" or "Not Found") |
Vlastnost načtení
Pomocí XMLHttpRequestobjektu můžete definovat funkci zpětného volání, která se má provést, když požadavek obdrží odpověď.
Funkce je definována ve onloadvlastnosti XMLHttpRequestobjektu:
Příklad
xhttp.onload = function() {
document.getElementById("demo").innerHTML = this.responseText;
}
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
Více funkcí zpětného volání
Pokud máte na webu více než jednu úlohu AJAX, měli byste vytvořit jednu funkci pro spuštění XMLHttpRequestobjektu a jednu funkci zpětného volání pro každou úlohu AJAX.
Volání funkce by mělo obsahovat URL a jakou funkci zavolat, když je odpověď připravena.
Příklad
loadDoc("url-1", myFunction1);
loadDoc("url-2", myFunction2);
function loadDoc(url, cFunction) {
const xhttp = new XMLHttpRequest();
xhttp.onload = function() {cFunction(this);}
xhttp.open("GET", url);
xhttp.send();
}
function myFunction1(xhttp) {
// action goes here
}
function myFunction2(xhttp) {
// action goes here
}
Vlastnost onreadystatechange
Vlastnost readyStatemá stav XMLHttpRequest.
Vlastnost onreadystatechangedefinuje funkci zpětného volání, která se má provést, když se readyState změní.
Vlastnost statusa statusTextvlastnosti drží stav objektu XMLHttpRequest.
| Property | Description |
|---|---|
| onreadystatechange | Defines a function to be called when the readyState property changes |
| readyState | Holds the status of the XMLHttpRequest. 0: request not initialized 1: server connection established 2: request received 3: processing request 4: request finished and response is ready |
| status | 200: "OK" 403: "Forbidden" 404: "Page not found" For a complete list go to the Http Messages Reference |
| statusText | Returns the status-text (e.g. "OK" or "Not Found") |
Funkce onreadystatechangeje volána pokaždé, když se readyState změní.
Když readyStateje 4 a stav je 200, odpověď je připravena:
Příklad
function loadDoc() {
const xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "ajax_info.txt");
xhttp.send();
}
Událost onreadystatechangese spustí čtyřikrát (1-4), jednou pro každou změnu stavu readyState.