XML DOM - HttpRequest obiektów
Poprzez obiektu XMLHttpRequest, można zaktualizować sekcję strony internetowej bez przeładowywania całej strony.
Obiekt XMLHttpRequest
Obiekt XMLHttpRequest jest wykorzystywany do wymiany danych z serwerem za kulisami.
Obiekt XMLHttpRequest jestmarzeniem każdego dewelopera,ponieważ można:
- Aktualizacja strony internetowej, bez przeładowania strony
- Po załadowaniu strony z danymi żądania serwer
- Po załadowaniu strony dane otrzymane z serwera
- Wysyłanie danych do serwera w tle
Tworzenie obiektu XMLHttpRequest
Wszystkie nowoczesne przeglądarki (IE7 +, Firefox, Chrome, Safari i Opera) posiada wbudowany obiekt XMLHttpRequest.
Tworzenie składni obiektu XMLHttpRequest
Starsze wersje programu Internet Explorer (IE5 i IE6) z użyciem obiektów ActiveX:
Do obsługi wszystkich nowoczesnych przeglądarek, w tym IE5 i IE6, należy sprawdzić, czy przeglądarka obsługuje obiekt XMLHttpRequest. Jeśli tak, to stworzyć obiekt XMLHttpRequest, jeśli tak nie jest, należy utworzyć obiekt ActiveX:
Przykłady
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
Spróbuj »
Wyślij zapytanie do serwera
W celu wysłania żądania do serwera, używamy otworzyć obiekt XMLHttpRequest jest () i send () metodę:
xmlhttp.send();
| 方法 | 描述 |
|---|---|
| open(method,url,async) | 规定请求的类型，URL，请求是否应该进行异步处理。 method：请求的类型：GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步） |
| send(string) | 发送请求到服务器。 string：仅用于 POST 请求 |
GET lub POST?
GET prostsze POST i szybkie i można je stosować w wielu przypadkach.
Jednak zawsze używać POST wniosek w następujących okolicznościach:
- pliki buforowane nie jest rozwiązaniem (lub pliku bazy danych na serwerze aktualizacji)
- Ilość danych przesyłanych do serwera (post Brak limitu wielkości) duża
- Przesyłanie danych wejściowych użytkownika (może zawierać nieznane znaki), POST mocniejsze i bardziej bezpieczne niż GET
URL - plik na serwerze
Argument url metody open (), to adres pliku na serwerze:
Plik może być dowolny typ pliku (takich jak .txt i .xml) lub pliki skryptów (takie jak serwer i .php .html, może wykonywać czynności na serwerze przed odesłaniem odpowiedzi).
Asynchroniczne - Prawda czy fałsz?
Na żądanie transmisji asynchronicznej, sposób asynchroniczny argumentem open () musi być ustawiona na wartość true:
Wyślij asynchronicznego żądania web developer to ogromny krok naprzód. Na serwerze do wykonywania wielu zadań są bardzo czasochłonne.
Poprzez wysłane asynchronicznie, JavaScript nie trzeba czekać na odpowiedź serwera, ale może być zastąpiony przez:
- Podczas oczekiwania na odpowiedź z serwera, wykonać dodatkowe skrypty
- Gotowy do obsługi odpowiedzi, gdy odpowiedź
Async = true
Przy użyciu asynchronicznie = prawdziwe, gdy w odpowiedzi na określone zdarzenie funkcja onreadystatechange gotowe do realizacji:
Przykłady
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","xmlhttp_info.txt",true);
xmlhttp.send();
Spróbuj »
Asynchroniczny = false
Na trzecim async parametru = false, zmień open () Metoda jest fałszywe:
Nie zaleca asynchroniczny = false, ale przy stosowaniu kilku małą prośbę lub puszkę.
Pamiętaj, że JavaScript w odpowiedzi serwera nie będzie kontynuowana, dopóki nie są gotowe. Jeśli serwer jest zajęty lub wolny, aplikacja zostanie zawieszone lub przerwane.
Uwaga: W przypadku korzystania z asynchronicznie = false, nie pisz onreadystatechange funkcji - wystarczy umieścić kod po send () oświadczenia, aby:
Przykłady
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
Spróbuj »
Odpowiedź serwera
Aby uzyskać odpowiedź od serwera, należy responseText lub responseXML własność obiekt XMLHttpRequest jest.
| 属性 | 描述 |
|---|---|
| responseText | 获取响应数据作为字符串 |
| responseXML | 获取响应数据作为 XML 数据 |
Obiekt responseText
Jeśli odpowiedź z serwera nie jest XML, należy użyć właściwości responseText.
Obiekt responseText zwraca odpowiedź jako ciąg znaków, można go użyć odpowiednio:
Obiekt responseXML
Jeśli odpowiedź nie jest XML z serwera i chcesz go rozwiązać do obiektu XML, należy użyć właściwości responseXML:
Przykłady
Prośba plików cd_catalog.xml i analizowania odpowiedzi:
var txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "
";
}
document.getElementById("myDiv").innerHTML=txt;
Spróbuj »
onreadystatechange wydarzenie
Jeżeli wniosek jest wysyłany do serwera, musimy wykonać pewne działania na podstawie odpowiedzi.
onreadystatechange zdarzenie jest wywoływane za każdym razem z readyState zmian.
Obiekt XMLHttpRequest readyState posiada status.
Trzy ważne właściwości obiektu XMLHttpRequest:
| 属性 | 描述 |
|---|---|
| onreadystatechange | 存储函数（或函数的名称）在每次 readyState 属性变化时被自动调用 |
| readyState | 存放了 XMLHttpRequest 的状态。从 0 到 4 变化： 0：请求未初始化 1：服务器建立连接 2：收到的请求 3：处理请求 4：请求完成和响应准备就绪 |
| status | 200："OK" 404：找不到页面 |
W onreadystatechange razie możemy określić, co się stanie, gdy czas jest gotowy do przetwarzania odpowiedzi serwera.
Gdy readyState jest 4 lub 200 stan, reakcja przygotowane:
Przykłady
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
Spróbuj »
Uwaga: onreadystatechange zdarzenie jest wywoływane za każdym razem, gdy zmienia readyState, wyzwalane w sumie cztery razy.
Więcej przykładów
Przez getAllResponseHeaders () do pobierania informacji z nagłówka
Aby pobrać zasób (document) informacje nagłówka.
() Pobiera określony informacje nagłówka getResponseHeader
Aby pobrać zasobu (pliku) w celu określenia informacji nagłówka.
pobieranie zawartości pliku ASP
Gdy użytkownicy wpisać znaki w polu tekstowym, jak strony internetowe komunikują się z serwerem WWW.
Pobieranie treści z bazy danych
Strona internetowa, jak wydobyć informacje z bazy danych za pomocą obiektu XMLHttpRequest.
pobieranie zawartości pliku XML
Załóż XMLHttpRequest do pobierania danych z pliku XML i wyświetlać dane w tabeli HTML.