Tutorial Hello World!
styczeń 17, 2007 – 9:07 po południuPierwszym przykładem będzie pobranie pliku z serwera i wyświetlanie jego zawartości, czyli Hello World! Taki prosty przykład, aby zrozumieć zasadę działania AJAX-a.
Utworzymy teraz plik tekstowy (.txt), wpiszmy w nim: Hello World!, a następnie zapiszmy pod nazwą: powitanie.txt
To ten plik będziemy później pobierać i wyświetlać jego treść.
Teraz zajmijmy stworzeniem strony, na której to będzie wyświetlany tekst z pobranego pliku z serwera.
<html> <head> <title>Przykładowy skrypt AJAX - Hello World!</title> </head> <body> <div id=”a1″></div> <a href=”#” onclick=”getMsg(’powitanie.txt’, ‘a1′)”>pobierz komunikat</a> </body> </html>
Jeszcze niestety ale nie będzie to działało, musimy teraz zająć się napisaniem w JavaScript-cie kawałka kodu.
W tym miejscu deklarujemy obiekt ObiektXMLHttp, który będzie najważniejszy w komunikacji.
var ObiektXMLHttp = false;
Sprawdzamy czy przeglądarka obsługuje XMLHttpRequest, pierwszy warunek dotyczy większości przeglądarek, zarówno w Firefox-ie i Operze zaimplementowano żądanie XML HTTP pod nazwą XMLHttpRequest. Internet Explorer potrzebuje ActiveX do zainicjowania tego obiektu.
if (window.XMLHttpRequest) { ObiektXMLHttp = new XMLHttpRequest(); } else if (window.ActiveXObject) { ObiektXMLHttp = new ActiveXObject(”Microsoft.XMLHTTP”); }
Już nie wiele pozostało do napisania. Funkcja getMsg() pozwoli nam na wysłanie zapytania o plik powitanie.txt, pobranie jego zawartości i na końcu wyświetlanie. Posiada dwa atrybuty, pierwszy określa adres, z jakiego ma być pobrany plik, a drugi określa do jakiego elementu na stronie ma zostać ‘wklejona’ odpowiedź.
Metoda open() otwiera żądanie, które ma zostać wysłane. Wywołuje się ją z trzema atrybutami, wskazując na rodzaj wysyłanego żądania (GET, POST lub dowolną inną metodę http obsługiwaną przez serwer), URL.
function getMsg(src, content) { if(ObiektXMLHttp) { ObiektXMLHttp.open(”GET”, src); ObiektXMLHttp.onreadystatechange = function() { if (ObiektXMLHttp.readyState == 4) { document.getElementById(content).innerHTML = ObiektXMLHttp.responseText; } } ObiektXMLHttp.send(null); } }
Zawartość pliku może być przetworzona dopiero wówczas, gdy ObiektXMLHttp.readyState będzie miał wartość 4. Czyli wszystkie dane zostały pobrane i można działać dalej. Jak już łatwo się domyślić, to w następnej linijce zmieniamy zawartość diva na tekst pobrany z serwera.
Metodę send() musimy podać, choć wykorzystywana jest szerzej przy przesyłaniu POST-em.
Kod JavaScriptu powinniśmy umieścić teraz w znacznikach
<script type = “text/javascript”></script>
, pomiędzy tagami
<head></head>
.
Tutaj możesz zobaczyć efekt końcowy.
Jak widać pobranie danych za pomocą AJAX-a nie jest takie trudne. Jest to najprostszy przykład, bez dodatkowych ‘śmieci’, który dobrze pokazuje istotę działania AJAX-a.
Ten skrypt nie jest idealny, chodziło mi jedynie o to, aby jak najprościej było to napisane. Mogą pojawić się problemy z wcześniejszymi wersjami IE starszymi od IE 6. Ale tymi i innymi problemami zajmiemy się w kolejnych artykułach.
7 Responses to “Tutorial Hello World!”
Warto wspomnieć o łapaniu wyjątków podczas tworzenia obiektu XMLHttp, ponieważ niektóre przeglądarki mogą tego nie łyknąć!
By sphinxB on stycznia 4, 2009
Tak, wypadałoby zastosować try catcha dla użytkowego kodu, zawsze mogą wystąpić nieprzewidziane sytuacje. Chciałem jak najprościej przedstawić zasadę działania AJAX’a i myślę że jednak lepiej wykorzystywać gotowe biblioteki np. jQuery, gdzie to jest dużo bardziej rozwinięte.
By Jarek on stycznia 5, 2009
fdsdfsdf
By fgh on kwietnia 15, 2009
sdfsd
By fgh on kwietnia 15, 2009
hej, wiem że pewnie uznacie mnie za głupią, ale jeśli się nie zapytam, to nie zmądrzeję:
co z div id=a1? Czy w pliku powitanie.txt mam przygotować coś takiego:
#a1 {Hello world;}
?
Próbowałam, też nie chce działać.
Rozumiem mniej więcej cały tutorial, tylko nadal nie wiem jak wyświetlić plik txt w div-ie.
By Ewa on października 9, 2009
Zaczynam naukę Ajaxa i napisałem prawie identyczny kod jak ten powyżej, ale jednak mi nie działa. Ani w IE, ani Operze i Firefoxie.
Kod na pewno napisałem bez błędów. Nie wiem czy coś mam źle ustawione??
Byłbym wdzięczny jeśli ktoś by mi pomógł z tym problemem.
By Prasol on grudnia 7, 2009
@Ewa jak widzisz funkcja getMsg() przyjmuje dwa parametry src-zrodlo pliku ktory ma pobrac ajax i content-zawartosc ktora ma sie wypelnic danymi zwracanymi przez ajax. Wywolanie tej funcji wyglada tak:getMsg(’powitanie.txt’, ‘a1′) wiec zostanie pobrany plik powitanie.txt i wypelniony obiekt o id a1.
@ sprawdz czy twoj serwer www obsluguje ajaxa. A tak wogole skad wiesz napewno ze nie popelniles bledu?? nawet najlepszym sie to zdarza
By sredni on grudnia 9, 2009