Objekt XMLHttpRequest _
Všechny moderní prohlížeče mají vestavěný objekt XMLHttpRequest pro vyžádání dat ze serveru.
Všechny hlavní prohlížeče mají vestavěný analyzátor XML pro přístup a manipulaci s XML.
Objekt XMLHttpRequest
Objekt XMLHttpRequest lze použít k vyžádání dat z webového serveru.
Objekt XMLHttpRequest je snem vývojáře , protože můžete:
- Aktualizujte webovou stránku bez opětovného načítání stránky
- Vyžádat si data ze serveru - po načtení stránky
- Přijímat data ze serveru - po načtení stránky
- Odesílejte data na server - na pozadí
Příklad XMLHttpRequest
Když do vstupního pole níže zadáte znak, na server se odešle požadavek XMLHttpRequest a vrátí se některé návrhy jmen (ze serveru):
Příklad
Start typing a name in the input field below:
Suggestions:
Odeslání požadavku XMLHttpRequest
Všechny moderní prohlížeče mají vestavěný objekt XMLHttpRequest.
Běžná syntaxe JavaScriptu pro jeho použití vypadá asi takto:
Příklad
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
// Action to be performed when the
document is read;
}
};
xhttp.open("GET", "filename", true);
xhttp.send();
Vytvoření objektu XMLHttpRequest
První řádek ve výše uvedeném příkladu vytváří objekt XMLHttpRequest:
var xhttp = new XMLHttpRequest();
Událost onreadystatechange
Vlastnost readyState uchovává stav XMLHttpRequest.
Událost onreadystatechange se spustí pokaždé, když se readyState změní.
Během požadavku serveru se readyState změní z 0 na 4:
0: požadavek není inicializován
1: připojení k serveru navázáno
2: požadavek přijat
3: zpracování požadavku
4: požadavek dokončen a odpověď je připravena
Ve vlastnosti onreadystatechange zadejte funkci, která se má provést, když se readyState změní:
xhttp.onreadystatechange = function()
Když je readyState 4 a stav 200, odpověď je připravena:
if (this.readyState == 4 && this.status == 200)
Vlastnosti a metody XMLHttpRequest
| Method | Description |
|---|---|
| new XMLHttpRequest() | Creates a new XMLHttpRequest object |
| open(method, url, async) | Specifies the type of request method: the type of request: GET or POST url: the file location async: true (asynchronous) or false (synchronous) |
| send() | Sends a request to the server (used for GET) |
| send(string) | Sends a request string to the server (used for POST) |
| onreadystatechange | A function to be called when the readyState property changes |
| readyState | 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 404: Page not found |
| responseText | The response data as a string |
| responseXML | The response data as XML data |
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.
Vlastnost responseText
Vlastnost responseText vrací odpověď jako řetězec.
Pokud chcete použít odpověď jako textový řetězec, použijte vlastnost responseText:
Příklad
document.getElementById("demo").innerHTML = xmlhttp.responseText;
Vlastnost responseXML
Vlastnost responseXML vrací odpověď jako objekt XML DOM.
Pokud chcete použít odpověď jako objekt XML DOM, použijte vlastnost responseXML:
Příklad
Vyžádejte si soubor cd_catalog.xml a použijte odpověď jako objekt XML DOM:
xmlDoc = xmlhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
txt += x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt;
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
Adresa URL – Soubor na serveru
Parametr url metody open() je adresa souboru na serveru:
xmlhttp.open("GET", "xmlhttp_info.txt", 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?
Chcete-li odeslat požadavek asynchronně, parametr async metody open() musí být nastaven na hodnotu true:
xmlhttp.open("GET", "xmlhttp_info.txt", true);
Asynchronní odesílání požadavků je pro webové vývojáře velkým zlepšením. Mnoho úloh prováděných na serveru je časově velmi náročných.
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í, když je odpověď připravena
Async = pravda
Při použití async = true zadejte funkci, která se má provést, když je odpověď připravena v události onreadystatechange:
Příklad
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "xmlhttp_info.txt", true);
xmlhttp.send();
Async = nepravda
Chcete-li použít async = false, změňte třetí parametr v metodě open() na hodnotu false:
xmlhttp.open("GET", "xmlhttp_info.txt", false);
Použití async = false se nedoporučuje, ale pro několik malých požadavků to může být v pořádku.
Pamatujte, že JavaScript NEBUDE pokračovat v provádění, dokud nebude připravena odpověď serveru. Pokud je server zaneprázdněn nebo pomalý, aplikace přestane reagovat nebo se zastaví.
Poznámka: Když použijete async = false, NEPIŠTE funkci onreadystatechange – pouze vložte kód za příkaz send():
Příklad
xmlhttp.open("GET", "xmlhttp_info.txt", false);
xmlhttp.send();
document.getElementById("demo").innerHTML = xmlhttp.responseText;
XML Parser
Všechny moderní prohlížeče mají vestavěný XML parser.
Objektový model dokumentu XML (XML DOM) obsahuje mnoho metod pro přístup a úpravu XML.
Než však bude možné přistupovat k dokumentu XML, musí být načten do objektu XML DOM.
Analyzátor XML může číst prostý text a převádět jej na objekt XML DOM.
Analýza textového řetězce
Tento příklad analyzuje textový řetězec do objektu XML DOM a extrahuje z něj informace pomocí JavaScriptu:
Příklad
<html>
<body>
<p id="demo"></p>
<script>
var text, parser,
xmlDoc;
text = "<bookstore><book>" +
"<title>Everyday
Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book></bookstore>";
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</script>
</body>
</html>
Staré prohlížeče (IE5 a IE6)
Staré verze aplikace Internet Explorer (IE5 a IE6) nepodporují objekt XMLHttpRequest.
Chcete-li zpracovat IE5 a IE6, zkontrolujte, zda prohlížeč podporuje objekt XMLHttpRequest, nebo vytvořte ActiveXObject:
Příklad
if (window.XMLHttpRequest) {
// code for modern browsers
xmlhttp = new XMLHttpRequest();
}
else {
// code for old IE browsers
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
Staré verze Internet Exploreru (IE5 a IE6) nepodporují objekt DOMParser.
Chcete-li pracovat s IE5 a IE6, zkontrolujte, zda prohlížeč podporuje objekt DOMParser, nebo vytvořte ActiveXObject:
Příklad
if (window.DOMParser) {
// code for modern browsers
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
}
else {
// code for old IE browsers
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.loadXML(text);
}
Další příklady
informací záhlaví zdroje (souboru).
Načtení konkrétních informací záhlaví zdroje (souboru).
Jak může webová stránka komunikovat s webovým serverem, zatímco uživatel zadává znaky do vstupního pole.
Jak může webová stránka načíst informace z databáze pomocí objektu XMLHttpRequest.
Vytvořte požadavek XMLHttpRequest pro načtení dat ze souboru XML a zobrazení dat v tabulce HTML.