AJAX umożliwia zmianę zawartości załadowanej strony bez jej odświeżania. Poniżej sposób użycia technologii AJAX na prostym przykładzie, który powinien działać w części przeglądarek (IE7+, Firefox, Chrome, Opera, Safari). Kod nie posiada zabezpieczeń i jest obcięty tak, aby w minimalnej objętości pokazać funkcjonalność bez wnikania w obsługę XMLa.
Uproszczony kod powstał na podstawie przykładów stąd.
<html> <head> <script src="echo.js"></script> <!-- ladujemy skrypt z zewnetrznego pliku --> </head> <body> <form> <input type="text" id="txt1" onkeyup="show(this.value)" /> <!-- polu tekstowemu nadajemy id=txt1 i ustawiamy obsluge zdarzenia onkeyup --> </form> <p><span id="echo"></span></p> <!-- opisujemy wydzielony znacznikami SPAN obszar o id=echo --> </body> </html>
Na początek tworzymy prosty dokument HTML. Standardowe znaczniki nie wymagają tłumaczenia. W nagłówku ładujemy kod javascript z pliku echo.js. Dla wygody trzymamy go poza plikiem HTML. W sekcji body tworzymy pole tekstowe o id=”txt1″, dodatkowo na zdarzenie onkeyup (zdarzenie wywoływane w momencie puszczenia klawisza) wywołujemy funkcję show() znajdującą się w pliku echo.js. Funkcje show() w momencie puszczenia klawisza w polu tekstowym wywołujemy z parametrem this.value – wartość wpisana w polu tekstowym. Sekcja SPAN o identyfikatorze id=”echo” umożliwi dalszą interakcję z kodem javascript. W skrócie ten kod udostępnia nam pole tekstowe id=”txt1″ i obsługę zdarzenia onkeyup oraz obszar id=”echo”, który będzie się zmieniał po wprowadzania tekstu w polu tekstowym.
Zawartość pliku echo.js.
var xmlhttp = new XMLHttpRequest(); // tworzymy obiekt xmlhttp klasy XMLHttpRequest function show(str) { var url="getanswer.php?q="+str; //tworzymy adres do zapytania z parametrem q xmlhttp.onreadystatechange=stateChanged; //laczymy zmiane stanu obiektu xmlhttp z wywolaniem funkcji stateChanged xmlhttp.open("GET",url,true); //tworzymy zapytanie metoda GET na adres url i czekamy na metode send() xmlhttp.send(null); //wywolujemy metode send } function stateChanged() { if (xmlhttp.readyState==4) //czy dane sa juz gotowe? { document.getElementById("echo").innerHTML=xmlhttp.responseText; //jesli tak to w pole o id=echo wpisz zawartosc xmlhttp.responseText } }
Tworzymy obiekt klasy XMLHttpRequest. Umożliwi on wysyłanie żądań do serwera. Następnie definiujemy funkcję show (wywoływaną na zdarzenie onkeyup w pliku HTML). Kolejno definiujemy string postaci getanswer?q=cos, zwykłe wywołanie tego adresu przez przeglądarkę miałoby postać http://twojadomena.pl/ – pobieramy odpowiedź metodą GET.
Obiekt xmlhttp posiada pięć stanów – 0 (zapytanie niezainicjowane), 1 (cel otwarty), 2 (zapytanie wysłane), 3 (odbieranie odpowiedzi), 4 (żądanie zakończone). Za pomocą xmlhttp.onreadystatechange=stateChanged; łączymy wykonanie funkcji stateChanged() z dowolną zmianą aktualnego stanu obiektu xmlhttp.
Wysyłamy zapytanie metodą GET na określony adres. Trzeci parametr oznacza przetwarzanie po wywołaniu metody send(). W następnej lini wywołujemy metodę send().
Funkcja powiązana ze zmianą stanu stateChanged() sprawdza czy żądanie zostało zakończone xmlhttp.readyState==4, jeśli tak to element o id=”echo” z dokumentu HTML uzyskuje wartość zwróconą w polu responseText – w polu tym znajduje się wynik działania skryptu z parametrem q=cos. Na stronie w miejscu objętym znacznikami SPAN pojawia się odpowiedź ze skryptu PHP.
<?php echo $_GET["q"]; //wyswietl zawartosc, ktora przyszla w wywolaniu getanswer.php?q=test ?>
Ostatecznie skrypt PHP ma za zadanie wyświetlić zawartość zmiennej q przekazanej do niego metodą GET.
Kolejno:
- wprowadzamy dane w pole tekstowe
- po każdym wpisanym znaku, javascript wywołuje funkcję show()
- funkcja show() wywołuje skrypt PHP z parametrem q
- PHP zwraca nam wartość
- javascript wrzuca wartość zwróconą przez PHP na stronę do obszaru o id=”echo”
Poniżej kilka przykładów z użyciem znaczników HTML – w podobny sposób można dynamicznie wyświetlić na stronie tabele, sformatowany tekst itd.
Proste echo
Wywołanie ze znacznikiem H1
Wywołanie ze znacznikiem H1 i Center
Nazywam się 