Około pół roku temu realizowałem referat akademicki o technologii Ajax. Dzisiaj przedstawiam pierwszą część tego opracowania.

Stworzenie bazowego projektu:

Zobacz prezentacje

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:

var http_request = new ActiveXObject("Msxml2.XMLHTTP");

pozostałe przeglądarki oraz IE 7.0:

var http_request = new XMLHttpRequest();

Dla zapewnienia działania w każdej przeglądarce można skorzystać z kodu:

var http_request = false;if (window.XMLHttpRequest) { // Mozilla, Safari, …
    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.onreadystatechange = function() { /* */ };
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:

  1. 0 = niezainicjalizowany
  2. 1 = połączenie otwarte (http_request.open)
  3. 2 = żądanie zostało wysłane (http_request.send)
  4. 3 = trwa odbieranie danych
  5. 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:

http_request.onreadystatechange = function() {
 if( http_request.readyState == 4) {
  // rób coś ciekawego
 }

};

Pełną implementacją funkcji zajmę się w dalszej części.

Polecenie

http_request.open(’GET’, url, true);

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)

open(in DOMString method, in DOMString url, in boolean async, in DOMString user, in DOMString password)
  • 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

http_request.send(null);

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”:

var dane = encodeURIComponent(’action’) + ‘=’ + encodeURIComponent(’test=?&;test’);

Taka postać danych powinna zostać odzwierciedlona w zmianie nagłówka “Content-Type”:

http_request.setRequestHeader(’Content-Type’, ‘application/x-www-form-urlenpred’);

Jest to wymagane w przypadku gdy method jest “POST”.

Ostatecznie, przykład wykorzystania obiektu XMLHttpRequest może wyglądać następująco:

var dane = encodeURIComponent(’action’) + ‘=’ + encodeURIComponent(’test=?&;test’);
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.

http_request.onreadystatechange = function() {
  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’);
  }

};

Zobacz prezentacje

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ść:

<?xml version="1.0"?>
<root>
    hello world
</root>

Można zawartość <root/> odczytać:

http_request.onreadystatechange = function() {
  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:

http_request.abort();

Przerywa ona połączenie na danym obiekcie i przywraca jego wartości początkowe.

Zobacz prezentacje

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.

Dodaj do:
  • del.icio.us
  • Digg
  • StumbleUpon
  • LinuxNewsPL
  • Gwar
  • Wykop

Pozostaw odpowiedź

Musisz być zalogowany, by móc komentować. Zaloguj się »