Około pół roku temu realizowałem referat akademicki o technologii Ajax. Dzisiaj przedstawiam pierwszą część tego opracowania.
Stworzenie bazowego projektu:
XMLHttpRequest jest podstawowym obiektem języka JavaScript służącym do asynchronicznej komunikacji klienta z serwerem.
Pierwotnie obiekt pojawił się w przeglądarce Internet Explorer, a precyzyjniej w dołączanej do niej bibliotece MSXML. Z czasem został zaimportowany do innych przeglądarek, aż wreszcie został zatwierdzony przez organizację W3 w ramy standardowego elementu JavaScript (http://www.w3.org/TR/XMLHttpRequest/).
Tworzenie obiektu:
Internet Explorer 6.0 i wcześniejsze:
pozostałe przeglądarki oraz IE 7.0:
Dla zapewnienia działania w każdej przeglądarce można skorzystać z kodu:
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType(’text/xml’);
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
Zapytanie do serwera (typu “get”):
http_request.open(’GET’, url, true);
http_request.send(null);
W pierwszej linii ustawiamy funkcję, która będzie wykonana za każdym razem gdy obiekt http_request zmieni stan (tzw. callback). Stan przechowywany jest w zmiennej http_request.readyState
- Może on przyjmować następujące wartości:
- 0 = niezainicjalizowany
- 1 = połączenie otwarte (http_request.open)
- 2 = żądanie zostało wysłane (http_request.send)
- 3 = trwa odbieranie danych
- 4 = odbieranie zakończone
Stany te następuje po sobie w kolejności. W praktyce sprawdza się tylko kiedy wystąpił stan 4.
Tak więc funkcję można zaimplementować następująco:
if( http_request.readyState == 4) {
// rób coś ciekawego
}
};
Pełną implementacją funkcji zajmę się w dalszej części.
Polecenie
otwiera połączenie z serwerem podanym jako adres “url”. Warto nadmienić, że musi być to połączenie wykorzystujące protokół HTTP, połączenia lokalne (file://) nie działają poprawnie.
Funkcja open może przyjmować pięć parametrów (dwa pierwsze są niezbędne)
- method - najczęściej “GET” lub “POST”
- url - adres docelowy
- async - true jeżeli połączenie ma być asynchroniczne (domyślnie)
- user, password - dane autentyfikacyjne (domyślnie null)
Polecenie
wysyła żądanie do serwera.
Jako parametr podaje się najczęściej null gdy żądanie jest typu “GET” lub ciąg parametrów (na przykład “action=remove&id=10&time=1000000″) dla „POST’.
W celu zapewnienia poprawności przesyłanych danych powinny być one sformatowanie przy pomocy funkcji “encodeURIComponent”:
Taka postać danych powinna zostać odzwierciedlona w zmianie nagłówka “Content-Type”:
Jest to wymagane w przypadku gdy method jest “POST”.
Ostatecznie, przykład wykorzystania obiektu XMLHttpRequest może wyglądać następująco:
http_request.onreadystatechange = function() {
if( http_request.readyState == 4) {
alert(http_request.responseText);
}
};
http_request.open(’POST’, ’serwer’, true);
http_request.setRequestHeader(’Content-Type’, ‘application/x-www-form-urlenpred’);
http_request.send(dane);
Jeżeli teraz na serwerze utworzymy plik tekstowy o nazwie “serwer”, to po wywołaniu żądania pojawi się okienko z zawartością pliku.
Co się jednak stanie gdy plik “serwer” nie istnieje?
Zostanie zwrócony błąd o numerze 404.
W przypadku powodzenia zwrócona zostanie wartość 200.
if( http_request.readyState == 4) {
if( http_request.status == 200 ) {
alert(http_request.responseText);
} else if ( http_request.status == 404 ) alert(’Plik nie istnieje’);
else alert(’inny błąd’);
}
};
Obok właściwości http_request.responseText występuje druga http_request.responseXML, użyteczna wówczas, gdy do komunikacji używany jest język XML.
Przykładowo jeżeli plik “serwer” będzie miał zawartość:
<root>
hello world
</root>
Można zawartość <root/> odczytać:
if( http_request.readyState == 4) {
if( http_request.status == 200 ) {
var xml = http_request.responseXML;
alert(xml.firstChild.firstChild.data);
} else alert(’błąd’);
}
};
Aby zakończyć opis obiektu XMLHttpRequest należy wspomnieć o jeszcze jednej instrukcji:
Przerywa ona połączenie na danym obiekcie i przywraca jego wartości początkowe.
Pozostałe metody i właściwości klasy nie są często używane. Ich opis znajduje się w (http://www.w3.org/TR/XMLHttpRequest/).
XMLHttpRequest domyślnie używa kodowania znaków UTF-8.
Wpisy (RSS)