Kiedy chcemy odświeżyć pewien element na stronie bez konieczności jej przeładowania, z pomocą przychodzi AJAX. Dzięki niemu użytkownik nie musi przerywać pracy na stronie – połączenie z serwerem następuje w tle, zaś dane są aktualizowane niezwłocznie po jego zakończeniu.
Bardzo dobrym przykładem zastosowania tej technologii jest Gmail – nie musisz przerywać pisania maila, żeby przeładować stronę i sprawdzić czy w tym czasie coś przyszło – strona sama łączy się z serwerem w tle co jakiś odstęp czasu, dzięki czemu o nowej poczcie zostaniesz poinformowany niezwłocznie bez konieczności przerywania pracy.

Załóżmy, że mamy DIVa i chcemy odświeżać jego wnętrze co sekundę. Poniżej przedstawiam kod JavaScript konieczny do wykonania tego zadania. JavaScript potrafi łączyć się z serwerem w tle dzięki obiektowi XMLHttpRequest.

Poniższy kod wrzucamy do sekcji HEAD naszej strony.

<script language=javascript>
// tworzymy zmienna
var object = false;
 
// tworzymy obiekt XMLHttpRequest (dla IE jest troche inaczej, stad funkcja warunkowa)
if (window.XMLHttpRequest) object = new XMLHttpRequest();
else if (window.ActiveXObject) object = new ActiveXObject("Microsoft.XMLHTTP");
 
// ponizsza funkcja pobiera dane ze wskazanego zrodla (pliku lub skryptu php) do wskazanego 
// DIVa poprzez obiekt XMLHttpRequest    
function getData(dataSource, divID)
{
    // kontynuuje wylacznie gdy obiekt nie jest zajety
    if (object.readyState==4 || object.readyState==0) 
    {
        // tworzy zmienna odpowiadajaca konkretnemu obiektowi na stronie
        var obj = document.getElementById(divID);
 
        // czyta z pliku lub wykonuje skrypt
        object.open("GET", dataSource);
 
        // definiuje metode obslugi odpowiedzi serwera
        object.onreadystatechange = function()
        {
            // kontynuuje jesli transmisja zostala zakonczona powodzeniem
            if (object.readyState == 4 && object.status == 200) 
            obj.innerHTML= object.responseText;
        }
        // wysyla zadanie do serwera
         object.send(null);
      }
}
 
// w ponizszej funkcji wywolujemy funkcje getData z odpowiednimi parametrami
// oraz wywolujemy ja sama rekurencyjnie po co okreslony czas (w naszym wypadku 1000 ms)
function odswiezaj()
{
      getData('ajax.php','mojDIVIK');
      setTimeout("odswiezaj()", 1000);
}
 
</script>

Teraz pozostaje nam utworzenie DIVa o nazwie mojDIVIK gdziekolwiek w “ciele” strony oraz wywołać funkcję odswiezaj().

<html>
<head>
<!-- tutaj powinien sie znalezc powyzszy kod javascript -->
</head>
<body>
 
<div id="mojDIVIK">
</div>
 
<script language=javascript>
odswiezaj();
</script>
 
</body>
</html>

Na koniec pozostawiłem utworzenie skryptu ajax.php, który będzie zwracał żądane przez nas dane. Może on łączyć się z bazą danych czy też czytać z pliku. W naszym przypadku będzie zwracał losową liczbę od 1 do 10.

<?
srand(time());
$numer = rand(1, 10);
echo $numer; 
?>

I to już wszystko :) Nasz div będzie aktualizowany w tle co sekundę losową liczbą z przedziału (1,10).

Dodano 28/12/2008 o 18:49
Kategoria: AJAX, HTML, JavaScript, PHP
Tagi: ,