Obiekt XMLHttpRequest
- Poprzednia strona Klonowanie węzłów DOM
- Następna strona Spis treści podręcznika DOM
Obiekt XMLHttpRequest zapewnia metody komunikacji z serwerem po załadowaniu strony.
Co to jest obiekt XMLHttpRequest?
Obiekt XMLHttpRequest jestMarzenie dewelopera, ponieważ możesz:
- Aktualizacja strony bez ponownego ładowania strony
- Żądanie danych z serwera po załadowaniu strony
- Pobieranie danych z serwera po załadowaniu strony
- Wysyłanie danych do serwera w tle
Wszystkie nowoczesne przeglądarki wspierają obiekt XMLHttpRequest.
Przykład:Komunikacja XML HTTP z serwerem podczas wpisywania tekstu.
Tworzenie obiektu XMLHttpRequest
Możemy utworzyć obiekt XMLHttpRequest za pomocą jednego prostego wiersza kodu JavaScript.
W wszystkich nowoczesnych przeglądarkach (w tym IE 7):
xmlhttp=new XMLHttpRequest()
W Internet Explorer 5 i 6:
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
Przykład
<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
{ kod dla wszystkich nowych przeglądarek}
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{ kod dla IE5 i IE6}
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp!=null)
{
xmlhttp.onreadystatechange=state_Change;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
else
{
alert("Twoja przeglądarka nie obsługuje XMLHTTP.");
}
}
function state_Change()
{
if (xmlhttp.readyState==4)
{ 4 = "załadowany"}
if (xmlhttp.status==200)
{ 200 = OK}
// ...nasz kod tutaj...
}
else
{
alert("Problem z pobraniem danych XML");
}
}
}
</script>
Komentarz:onreadystatechange jest handlerem wydarzenia. Jego wartość (state_Change) to nazwa funkcji, która jest wywoływana, gdy stan obiektu XMLHttpRequest zmienia się. Stan zmienia się od 0 (niezainicjowany) do 4 (kompletny). Kod jest wykonywany tylko w stanie 4.
Dlaczego używać Async=true ?
Nasze przykłady używają "true" jako trzeciego parametru w metodzie open().
Ten parametr określa, czy żądanie jest przetwarzane asynchronicznie.
True oznacza, że skrypt będzie kontynuował wykonywanie po metodzie send(), bez czekania na odpowiedź z serwera.
Zdarzenie onreadystatechange upraszcza kod. Ale to jest najbezpieczniejszy sposób, aby zapobiec zatrzymaniu się kodu bez odpowiedzi serwera.
Ustawiając ten parametr na "false", można zrezygnować z dodatkowego kodu onreadystatechange. Jeśli nie ma znaczenia, czy reszta kodu będzie wykonywana w przypadku niepowodzenia żądania, można użyć tego parametru.
Więcej przykładów
Wgraj plik textfile do elementu div za pomocą XML HTTP
Wykonaj żądanie HEAD za pomocą XML HTTP
XML / ASP
Możesz również otworzyć dokument XML i wysłać go na stronę ASP na serwerze, przeanalizować ten żądanie i zwrócić wynik.
<html>
<body>
<script type="text/javascript">
xmlHttp=null;
if (window.XMLHttpRequest)
// kod dla IE7, Firefox, Opera, itp.
xmlHttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
// kod dla IE6, IE5
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlHttp!=null)
{
xmlHttp.open("GET", "note.xml", false);
xmlHttp.send(null);
xmlDoc=xmlHttp.responseText;
xmlHttp.open("POST", "demo_dom_http.asp", false);
xmlHttp.send(xmlDoc);
document.write(xmlHttp.responseText);
}
else
{
alert("Twoja przeglądarka nie obsługuje XMLHTTP.");
}
</script>
</body>
</html>
Strona ASP napisana w VBScript:
<%
ustaw xmldoc = Server.CreateObject("Microsoft.XMLDOM")
xmldoc.async=false
xmldoc.load(request)
dla każdego x w xmldoc.documentElement.childNodes
jeśli x.NodeName = "to" to name=x.text
next
response.write(name)
%>
Przez użycie właściwości response.write przekazuj wyniki z powrotem do klienta.
Czy obiekt XMLHttpRequest jest standardem W3C?
Żadna z rekomendowanych standardów W3C nie określa obiektu XMLHttpRequest.
Jednak specyfikacja "Load and Save" poziomu 3 W3C DOM zawiera niektóre podobne funkcje, ale jeszcze żadna przeglądarka ich nie zaimplementowała.
- Poprzednia strona Klonowanie węzłów DOM
- Następna strona Spis treści podręcznika DOM
