Wszystkie nowoczesne przeglądarki mają wbudowany obiekt XMLHttpRequest do żądania danych z serwera.
Wszystkie główne przeglądarek posiada wbudowany parser XML na dostęp i manipulowanie XML.
Obiekt XMLHttpRequest
Obiekt XMLHttpRequest może być użyty do żądania danych z serwera WWW.
Obiekt XMLHttpRequest jest a developers dream , ponieważ można:
- Aktualizacja strony internetowej, bez przeładowania strony
- Dane zażądać od serwera - po załadowaniu strony
- Odbieranie danych z serwera - po załadowaniu strony
- Wysyłanie danych do serwera - w tle
Przykład XMLHttpRequest
Po wpisaniu znaku w polu tekstowym poniżej XMLHttpRequest jest wysyłana do serwera, a niektóre propozycje nazwy są zwracane (from the server) :
Przykład
Start typing a name in the input field below:
Suggestions:
Wysyłanie XMLHttpRequest
Wszystkie nowoczesne przeglądarki mają wbudowany obiekt XMLHttpRequest.
Częstym składni JavaScript za korzystanie z niego wygląda podobnie jak ta:
Przykład
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
// Action to be performed when the
document is read;
}
};
xhttp.open("GET", " filename ", true);
xhttp.send(); Spróbuj sam " Tworzenie obiektu XMLHttpRequest
Pierwsza linia w powyższym przykładzie tworzy objet XMLHttpRequest:
var xhttp = new XMLHttpRequest();
Onreadystatechange Event
Właściwość readyState posiada status XMLHttpRequest.
Impreza onreadystatechange jest uruchamiany za każdym razem gdy readyState zmian.
Podczas żądanie serwera, readyState zmienia się od 0 do 4:
0: nie wymagać zainicjowany
1: Połączenie z serwerem ustanowione
2: wniosek otrzymał
3: Wniosek przetwarzania
4: Prośba wykończone i odpowiedź jest gotowa
W obiekcie onreadystatechange określić funkcję być wykonywane, gdy readyState zmienia:
xhttp.onreadystatechange = function()
Gdy readyState jest 4 i status jest 200, odpowiedź jest gotowa:
if (xhttp.readyState == 4 && xhttp.status == 200)
XMLHttpRequest właściwości i metody
| metoda | Opis |
|---|---|
| new XMLHttpRequest() | Tworzy nowy obiekt XMLHttpRequest |
| open( method, url, async ) | Określa typ zamówienie method : typ żądania GET lub POST url : lokalizacja pliku async : true (asynchronous) lub fałsz (synchronous) |
| send() | Wysyła żądanie do serwera (used for GET) |
| send( string ) | Wysyła ciąg żądania do serwera (used for POST) |
| onreadystatechange | Funkcja do wywołania kiedy zmiany własności readyState |
| readyState | Stan XMLHttpRequest 0: nie wymagać zainicjowany 1: Połączenie z serwerem ustanowione 2: wniosek otrzymał 3: Wniosek przetwarzania 4: Prośba wykończone i odpowiedź jest gotowa |
| status | 200: OK Nie znaleziono strony: 404 |
| responseText | Dane odpowiedzi jako ciąg |
| responseXML | Dane odpowiedzi jako dane XML |
Dostęp między domenami
Ze względów bezpieczeństwa, nowoczesne przeglądarki nie umożliwiają dostępu między domenami.
Oznacza to, że zarówno strona internetowa, a plik XML próbuje załadować, musi znajdować się na tym samym serwerze.
Przykłady na w3ii wszystkie otwarte pliki XML znajdujących się w domenie w3ii.
Jeśli chcesz skorzystać z powyższego przykładu na jednej z własnych stron internetowych, pliki XML, obciążenie musi być położony na własnym serwerze.
ResponseText obiektu
Nieruchomość responseText zwraca odpowiedź w postaci łańcucha.
Jeśli chcesz użyć odpowiedź jako ciąg tekstu, należy użyć właściwości responseText:
ResponseXML nieruchomości
Nieruchomość responseXML zwraca odpowiedź jako obiekt XML DOM.
Jeśli chcesz użyć odpowiedź jako obiekt XML DOM, należy użyć właściwości responseXML:
Przykład
Żąda plików cd_catalog.xml i używać odpowiedź jako obiekt 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; Spróbuj sam " GET lub POST?
GET jest prostsze i szybsze, niż POST i mogą być używane w większości przypadków.
Jednak zawsze używać żądania POST, kiedy:
- Buforowane plik nie jest opcją (update a file or database on the server)
- Wysyłanie dużej ilości danych do serwera (POST nie ma ograniczenia rozmiaru)
- Przesyłanie danych wprowadzanych przez użytkownika (which can contain unknown characters) , POST jest bardziej wytrzymałe i bezpieczne niż GET
Url - plik na serwerze
Parametr url z open() metoda, to adres do pliku na serwerze:
xmlhttp.open("GET", "xmlhttp_info.txt", true);
Plik może być dowolny rodzaj pliku, podobnie jak .txt i .xml lub pliki skryptów serwerowych jak .asp i .php (który może wykonywać czynności na serwerze przed wysłaniem odpowiedzi do tyłu).
Asynchroniczne - Prawda czy fałsz?
Aby wysłać żądanie asynchronicznie, parametr asynchroniczny z open() metody musi być ustawiona na wartość true:
xmlhttp.open("GET", "xmlhttp_info.txt", true);
Wysłanie zapytania asynchronicznie jest ogromny postęp dla twórców stron internetowych. Wiele zadań wykonywanych na serwerze są bardzo czasochłonne.
Wysyłając asynchronicznie, JavaScript nie trzeba czekać na odpowiedź serwera, ale może zamiast:
- wykonywanie innych skryptów podczas oczekiwania na odpowiedź serwera
- czynienia z odpowiedzi, jeśli odpowiedź jest gotowy
Async = true
Podczas korzystania asynchronicznie = true, określ funkcję do wykonania, gdy odpowiedź jest gotowa w onreadystatechange imprezy:
Przykład
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("demo").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET", "xmlhttp_info.txt", true);
xmlhttp.send(); Spróbuj sam " Asynchroniczny = false
Aby korzystać asynchronicznie = false, zmień trzeci parametr w open() metoda na false:
xmlhttp.open("GET", "xmlhttp_info.txt", false);
Korzystanie asynchronicznie = false nie jest zalecana, ale dla kilku małych wniosków może to być ok.
Pamiętaj, że JavaScript nie będzie w dalszym ciągu wykonywać, dopóki odpowiedź serwera jest gotowy. Jeśli serwer jest zajęty lub wolny, aplikacja będzie zawiesić lub przerwać.
Note: W przypadku korzystania asynchroniczny = false, nie pisz funkcję onreadystatechange - wystarczy umieścić kod po send() oświadczenie:
Przykład
xmlhttp.open("GET", "xmlhttp_info.txt", false);
xmlhttp.send();
document.getElementById("demo").innerHTML = xmlhttp.responseText; Spróbuj sam " XML Parser
Wszystkie nowoczesne przeglądarki mają wbudowany parser XML.
Model obiektowy XML dokumentu (the XML DOM) zawiera wiele metod, aby otwierać i edytować XML.
Jednak zanim można uzyskać dokument XML, to musi być załadowany do obiektu XML DOM.
Parser XML może czytać zwykły tekst i przekształcić go w obiekt XML DOM.
Parsowania ciąg tekstowy
Ten przykład przetwarza ciąg tekstu do obiektu XML DOM i wydobywa z niego informacje z 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>
Spróbuj sam " Starymi przeglądarkami (IE5 and IE6)
Stare wersje Internet Explorer (IE5 and IE6) nie obsługują obiekt XMLHttpRequest.
Aby obsłużyć IE5 i IE6, należy sprawdzić, czy przeglądarka obsługuje obiekt XMLHttpRequest, albo utworzyć ActiveXObject:
Przykład
if (window.XMLHttpRequest) {
// code for modern browsers
xmlhttp = new XMLHttpRequest();
}
else {
// code for old IE browsers
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} Spróbuj sam " Stare wersje Internet Explorer (IE5 and IE6) nie obsługują obiekt DOMParser.
Aby obsłużyć IE5 i IE6, należy sprawdzić, czy przeglądarka obsługuje obiekt DOMParser, albo utworzyć 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);
}
Spróbuj sam " 
Więcej przykładów
Pobieranie informacji nagłówka z getAllResponseHeaders()
Pobieranie informacji nagłówka zasobu (file) .
Pobieranie szczegółowych informacji nagłówka z getResponseHeader()
Pobieranie szczegółowych informacji nagłówka zasobu (file) .
Pobieranie zawartości pliku ASP
Jak strona internetowa może komunikować się z serwerem WWW, podczas gdy typ użytkownika znaków w polu wprowadzania.
Pobieranie treści z bazy danych
Jak strona internetowa może pobierać informacje z bazy danych z obiektu XMLHttpRequest.
Pobieranie zawartości pliku XML
Załóż XMLHttpRequest do pobierania danych z pliku XML i wyświetlać dane w tabeli HTML.