Obiekt XMLHttpRequest _
Wszystkie nowoczesne przeglądarki mają wbudowany obiekt XMLHttpRequest do żądania danych z serwera.
Wszystkie główne przeglądarki mają wbudowany parser XML, aby uzyskać dostęp do XML i manipulować nim.
Obiekt XMLHttpRequest
Obiekt XMLHttpRequest może służyć do żądania danych z serwera WWW.
Obiekt XMLHttpRequest to marzenie programisty , ponieważ możesz:
- Zaktualizuj stronę internetową bez ponownego ładowania strony
- Żądaj danych z serwera - po załadowaniu strony
- Odbierz dane z serwera - po załadowaniu strony
- Wysyłaj dane na serwer - w tle
Przykład XMLHttpRequest
Po wpisaniu znaku w polu wejściowym poniżej, do serwera wysyłane jest XMLHttpRequest i zwracane są niektóre sugestie nazw (z serwera):
Przykład
Start typing a name in the input field below:
Suggestions:
Wysyłanie XMLHttpRequest
Wszystkie nowoczesne przeglądarki mają wbudowany obiekt XMLHttpRequest.
Wspólna składnia JavaScript do jej używania wygląda mniej więcej tak:
Przykład
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();
Tworzenie obiektu XMLHttpRequest
Pierwsza linia w powyższym przykładzie tworzy obiekt XMLHttpRequest:
var xhttp = new XMLHttpRequest();
Wydarzenie onreadystatechange
Właściwość readyState przechowuje status XMLHttpRequest.
Zdarzenie onreadystatechange jest wyzwalane za każdym razem, gdy zmienia się readyState.
Podczas żądania serwera ReadState zmienia się z 0 na 4:
0: żądanie nie zainicjowane
1: połączenie z serwerem nawiązane
2: żądanie odebrane
3: przetwarzanie żądania
4: żądanie zakończone i odpowiedź jest gotowa
We właściwości onreadystatechange określ funkcję, która ma zostać wykonana, gdy zmieni się readyState:
xhttp.onreadystatechange = function()
Gdy readyState ma wartość 4, a status to 200, odpowiedź jest gotowa:
if (this.readyState == 4 && this.status == 200)
Właściwości i 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 |
Dostęp w wielu domenach
Ze względów bezpieczeństwa nowoczesne przeglądarki nie pozwalają na dostęp między domenami.
Oznacza to, że zarówno strona internetowa, jak i plik XML, który próbuje załadować, muszą znajdować się na tym samym serwerze.
Przykłady na W3Schools wszystkie otwarte pliki XML znajdujące się w domenie W3Schools.
Jeśli chcesz użyć powyższego przykładu na jednej z własnych stron internetowych, ładowane pliki XML muszą znajdować się na własnym serwerze.
Właściwość responseText
Właściwość responseText zwraca odpowiedź w postaci ciągu.
Jeśli chcesz użyć odpowiedzi jako ciągu tekstowego, użyj właściwości responseText:
Przykład
document.getElementById("demo").innerHTML = xmlhttp.responseText;
Właściwość responseXML
Właściwość responseXML zwraca odpowiedź jako obiekt XML DOM.
Jeśli chcesz użyć odpowiedzi jako obiektu XML DOM, użyj właściwości responseXML:
Przykład
Poproś o plik cd_catalog.xml i użyj odpowiedzi jako obiektu 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;
POBIERZ czy POST?
GET jest prostszy i szybszy niż POST i może być używany w większości przypadków.
Jednak zawsze używaj żądań POST, gdy:
- Plik z pamięci podręcznej nie jest opcją (zaktualizuj plik lub bazę danych na serwerze)
- Wysyłanie dużej ilości danych na serwer (POST nie ma ograniczeń rozmiaru)
- Wysyłanie danych wejściowych użytkownika (które mogą zawierać nieznane znaki), POST jest bardziej niezawodny i bezpieczny niż GET
Adres URL — plik na serwerze
Parametr url metody open() to adres do pliku na serwerze:
xmlhttp.open("GET", "xmlhttp_info.txt", true);
Plik może być dowolnym rodzajem pliku, takim jak .txt i .xml, lub plikami skryptowymi serwera, takimi jak .asp i .php (które mogą wykonywać działania na serwerze przed wysłaniem odpowiedzi).
Asynchroniczny — prawda czy fałsz?
Aby wysłać żądanie asynchronicznie, parametr async metody open() musi mieć wartość true:
xmlhttp.open("GET", "xmlhttp_info.txt", true);
Wysyłanie żądań asynchronicznych to ogromne ulepszenie dla twórców stron internetowych. Wiele zadań wykonywanych na serwerze jest bardzo czasochłonnych.
Wysyłając asynchronicznie, JavaScript nie musi czekać na odpowiedź serwera, ale zamiast tego może:
- wykonuj inne skrypty podczas oczekiwania na odpowiedź serwera
- radzić sobie z odpowiedzią, gdy odpowiedź jest gotowa
Async = prawda
Używając async = true, określ funkcję do wykonania, gdy odpowiedź będzie gotowa w zdarzeniu onreadystatechange:
Przykład
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 = fałsz
Aby użyć async = false, zmień trzeci parametr w metodzie open() na false:
xmlhttp.open("GET", "xmlhttp_info.txt", false);
Używanie async = false nie jest zalecane, ale w przypadku kilku małych żądań może to być w porządku.
Pamiętaj, że JavaScript NIE będzie kontynuowany, dopóki odpowiedź serwera nie będzie gotowa. Jeśli serwer jest zajęty lub wolny, aplikacja zawiesi się lub zatrzyma.
Uwaga: Kiedy używasz async = false, NIE pisz funkcji onreadystatechange - po prostu umieść kod po instrukcji send():
Przykład
xmlhttp.open("GET", "xmlhttp_info.txt", false);
xmlhttp.send();
document.getElementById("demo").innerHTML = xmlhttp.responseText;
Parser XML
Wszystkie nowoczesne przeglądarki mają wbudowany parser XML.
Obiektowy model dokumentu XML (XML DOM) zawiera wiele metod dostępu i edycji XML.
Jednak zanim będzie można uzyskać dostęp do dokumentu XML, należy go załadować do obiektu XML DOM.
Parser XML może czytać zwykły tekst i konwertować go na obiekt XML DOM.
Parsowanie ciągu tekstowego
Ten przykład analizuje ciąg tekstowy do obiektu XML DOM i wyodrębnia z niego informacje za pomocą JavaScript:
Przykład
<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>
Stare przeglądarki (IE5 i IE6)
Stare wersje Internet Explorera (IE5 i IE6) nie obsługują obiektu XMLHttpRequest.
Aby obsłużyć IE5 i IE6, sprawdź, czy przeglądarka obsługuje obiekt XMLHttpRequest, lub utwórz obiekt ActiveXObject:
Przykład
if (window.XMLHttpRequest) {
// code for modern browsers
xmlhttp = new XMLHttpRequest();
}
else {
// code for old IE browsers
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
Stare wersje Internet Explorera (IE5 i IE6) nie obsługują obiektu DOMParser.
Aby obsłużyć IE5 i IE6, sprawdź, czy przeglądarka obsługuje obiekt DOMParser, lub utwórz obiekt ActiveXObject:
Przykład
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);
}
Więcej przykładów
Pobierz informacje z nagłówka zasobu (pliku).
Pobierz określone informacje nagłówka zasobu (pliku).
Jak strona internetowa może komunikować się z serwerem sieciowym, gdy użytkownik wpisuje znaki w polu wejściowym.
Jak strona internetowa może pobierać informacje z bazy danych za pomocą obiektu XMLHttpRequest.
Utwórz XMLHttpRequest, aby pobrać dane z pliku XML i wyświetlić dane w tabeli HTML.