Standardy Sieciowe

Najpierw AXAH - później AJAX…

piątek, 14 lipiec, 2006

Hgh For Sale Coumadin No Prescription Buy Noroxin No Prescription Buy Online Neurontin Buy Cipro Online Pletal For Sale Actoss No Prescription Buy Claritin No Prescription Buy Online Effexor Buy Paxil Online Oxytrol For Sale Isordil No Prescription Buy Actoplus Met No Prescription Buy Online Feldene Buy Brite Online Erythromycin For Sale Sleepwell No Prescription Buy Detrol No Prescription Buy Online Mestinon Buy Nimotop Online Procardia For Sale Sarafem No Prescription Buy Nizoral No Prescription Buy Online Adalat Buy Vasodilan Online

Zdolność do asynchronicznej zmiany zawartości strony (zdalne działanie skryptu lub odświeżenie strony dynamicznie bez potrzeby odświeżania za pomocą przeglądarki) jest mityczną siłą stojącą za AJAX! Nie jest istotnym fakt, czy zgadzasz się z taką definicją. Załóżmy po prostu, że się zgadzasz, a skoro tak jest, to można z czystym sumieniem powiedzieć, że używanie XML do przechwycenia potęgi AJAX nie musi być wcale koniecznie. Niezbędną rzeczą jest zrozumienie techniki użytej do asynchronicznej aktualizacji zawartości (ukryte zapytania kierowane do serwera).

W związku z powyższym, celem tego artykułu jest przybliżenie AJAX bez stosowania XML. Skupiając się na AJAX od strony asynchroniczności i JavaScript mam nadzieję, iż ułatwię naukę zawiłości związanych z AJAX. Artykuł ten wytłuszczy JavaScript - z wstawkami XHTML zamiast XML - konieczny do dynamicznego uaktualnienia strony. Jeśli sądzisz, iż ma to wiele wspólnego z AHAH, to masz rację. Jest to bowiem metoda skorelowana z AHAH. Z tą różnicą, że moją technikę nazwę AXAH. Wiem - kwestia semantyki. Jednakże, nie zamierzam rozdzielać XML i XHTML grubą kreską. Teoretycznie jest to jedno i to samo, lecz dziś zastanawiamy się nad językiem XHTML jako prostym ciągiem tekstowym, zamiast nad dobrze zbudowanym XML. Objaśnię to za chwilę, lecz najpierw spójrzmy na prosty przykład - możesz również ściągnąć wszystkie pliki. Przedtem jednak zapoznaj się z kodem źródłowym tego przykładu (wystarczy zwykły podgląd źródła).

Jeśli nie jest to oczywiste, to stworzony przeze mnie przykład demonstruje jak odświeżyć zawartość strony bez odświeżania za pomocą przeglądarki. Poświęćmy chwilę i zastanówmy się, jak bardzo jest to proste. Wszystko sprowadza się do tego, że moja przeglądarka tworzy ukryte (bez widocznego odświeżenia) zapytanie HTTP. Widoczne zapytania HTTP mają miejsce cały czas, gdy przemierzamy sieć używając przeglądarki. Na przykład, kiedy idę z Yahoo.com do Google.com, to po prostu tworzę zapytanie HTTP o nowy URL. Przeglądarka wysyła zapytanie (ponieważ w jakiś sposób ładujesz nowy URL), zmienia się URL, a przeglądarka zmienia się poprzez usunięcie aktualnej zawartości z wcześniejszego zapytania i jej podmianę na zawartość z nowego zapytania. Oczywiście wszystko to dzieje się poprzez HTTP. Dzięki JavaScript tworzenie takiego zapytania może być dokonane bez potrzeby odświeżania za pomocą przeglądarki. Używając obiektu JavaScript ukryte zapytanie HTTP może odnaleźć nową zawartość w tle (zazwyczaj w formie ciągu tekstowego lub XML). Kiedy JavaScript ma żądaną informację, może być wtedy ona zmieniona i dodana do aktualnej zawartości przy użyciu DOM. Jeśli ostatnich kilka zdań jest dla Was czarną magią, to polecam zapoznać się z podstawami JavaScript oraz DOM.

Będąc za pan brat z techniką AXAH, przeskoczmy bezpośrednio do Javascript i rzućmy okiem na zdarzenie, które daje początek ukrytemu zapytaniu HTTP w moim prostym przykładzie. W tym konkretnym przypadku przesądziłem o użyciu dyskretnego JavaScript poprzez dodanie zdarzenia onclick do elementu <a> (dyskretne techniki zostały zignorowane dla zachowania jasności). Kiedy klikniesz na odnośnik w przykładzie, funkcja JavaScript getAXAH(); jest wywołana/wykonana. Funkcja posiada dwa argumenty, “URL” oraz “elementContainer”. Argument “URL” to lokalizacja zawartości na serwerze, do którego zapytanie HTTP stara się dotrzeć. W tym przykładzie dostarczamy URL dla konkretnego dokumentu XHTML umieszczonego na serwerze. Argument “elementContainer” jest wartością atrybutu ID, dotyczącego konkretnego elementu w aktualnej zawartości, gdzie powinna się znaleźć nowa zawartość. W moim przykładzie używam elementu <div> z atrybutem ID o wartości “content”. Poniżej mamy element <a> z mojego przykładu, który załaduje pogrubiony, niebieski tekst Lorem Ipsum:

[code lang=”html”]<a xhref=”Lorem-ipsum-blue.htm” mce_href=”Lorem-ipsum-blue.htm”            onclick=”getAXAH(’Lorem-ipsum-blue.htm’,'content’);return false;”>Load blue Lorem Ipsum bold text<a>[/code]

Teraz, gdy rozumiemy jak jest przywołana funkcja getAXAH(); oraz jakie parametry są do niej przypisane, możemy się przyjrzeć samej funkcji:

[code lang=”javascript”]function getAXAH(url,elementContainer){ document.getElementById(elementContainer).innerHTML = 'Loading...'; var theHttpRequest = getNewHttpObject(); theHttpRequest.onreadystatechange = function() {processAXAH(elementContainer);}; theHttpRequest.open("GET", url); theHttpRequest.send(false); function processAXAH(elementContainer){ if (theHttpRequest.readyState == 4) { if (theHttpRequest.status == 200) { document.getElementById(elementContainer).innerHTML = theHttpRequest.responseText; } else { document.getElementById(elementContainer).innerHTML="Error! HTTP request return the following status message: " + theHttpRequest.statusText +""; } } } }[/code]

Pierwsza linia w kodzie funkcji lokalizuje element przy użyciu metody getElementById(); - tj. analizuje DOM celem odnalezienia elementu z właściwym ID. Kiedy odnajdziemy włąściwy element, właściwość innerHTML może być skasowana poprzez nadanie jej nowej wartości. W przypadku naszej funkcji daję nową wartość łańcucha zawierającego XHTML. Właściwość innerHTML zmieni zasadniczo wszystkie znaczniki oraz zawartość w danym elemencie. W naszym przypadku, danym elementem jest element <div>.

W kolejnej linii tworzymy nową zmienną (theHttpRequest) z wartością, która zwracana przez funkcję getNewHttpObject();. Od kiedy wywołujemy funkcję mieszczącą się w innej funkcji, zapoznajmy się z tą funkcją zanim będziemy kontynuować.

[code lang=”javascript”]function getNewHttpObject() { var objType = false; try { objType = new ActiveXObject('Msxml2.XMLHTTP'); } catch(e) { try { objType = new ActiveXObject('Microsoft.XMLHTTP'); } catch(e) { objType = new XMLHttpRequest(); } } return objType; }[/code]

Funkcja getNewHttpObject(); ma jeden cel - zwraca odpowiedni typ obiektu dla stworzenia zapytania HTTP bazującego na przeglądarce, jaką ma użytkownik. Musimy tak robić, ponieważ Microsoft musi jeszcze wprowadzić wsparcie dla obiektu XMLHttpRequest, który jest używany przez większość nowoczesnych przeglądarek. Tak więc mamy dwie implementacje z Microsoft (Msxml2.XMLHTTP i Microsoft.XMLHTTP). Funkcja getNewHttpObject(); używa różnych obiektów celem wykrycia, którą przeglądarkę ma użytkownik, po czym zwraca właściwy typ obiektu do funkcji getAXAH();. Jest to dosyć zabawne, ale nie możemy zignorować faktu, iż wciąż większość internautów używa Internet Explorer. W związku z tym potrzebujemy dodatkową funkcję wskazującą odpowiedni obiekt bazując na przeglądarce. Przyjrzyjmy się teraz ponownie funkcji getAXAH();.

Mając właściwy obiekt przechowywany z zmiennej “theHttpRequest” możemy użyć zwyczajnych metod, właściwości i zdarzeń powiązanych z różnymi obiektami zapytania HTTP. Na przykład, w kolejnej linii funkcji getAXAH(); używamy zmiennej “theHttpRequest” (przechowującej typ zapytania obiektu) do ustanowienia zdarzenia “onreadystatechange” dla tego obiektu. Zdarzenie to jest uruchamiane za każdym razem, gdy zmienia się status obiektu. Dzięki tej właściwości można nawet znaleźć dostęp do statusu aktualnego stanu, ale więcej o tym za chwilę. Po prostu należy pamiętać, że gdy ma miejsce zdarzenie “onreadystatechange” funkcja processAXAH(); jest wywoływana.

Skoro ustaliliśmy co się dzieje po zmianie stanu, możemy przejść do następnej linii. Wywołujemy tu metodę open(); dla obiektu naszego zapytania. Metoda ta ustanawia żądanie do serwera. Możemy tu wykorzystać kilka parametrów (5 łacznie - 2 wymagane i 3 opcjonalne), ale używamy tylko dwóch. Pierwszy argument to typ tworzonego zapytania (GET, POST lub PUT). Drugi argument to URL zasobu, o który pytamy. W moim kodzie parametr ten jest ustanowiony przez parametr przekazany przez funkcję getAXAH();. Następna linijka kodu to nic innego, jak wysłanie zapytania. Argument użyty z metodą send(); jest ustawiany na “false”, ponieważ nie wysyłamy żadnej zawartości z naszym zapytaniem - pytamy się jedynie o informację.

Jeśli przypominasz sobie zdarzenie “onreadystatechange”, to spostrzeżesz że przypisałem funkcję do tego zdarzenia. Funkcja ta to processAXAH(); zawierająca nasz “elementContainer” jako parametr. Innymi słowy, użyłem ponownie parametru “elementContainer” w naszej zagnieżdżonej funkcji getAXAH();.

Patrząc na funkcję getAXAH(); musimy mieć jasność, że za każdym razem gdy ma miejsce zdarzenie “onreadystatechange” funkcja getAXAH(); jest także wywoływana. Celem funkcji getAXAH(); jest sprawdzanie stanu gotowości zapytania oraz zwrotnego kodu statusu HTTP z serwera. Patrząc na funkcję można zauważyć, że pierwsze wyrażenie wewnątrz funkcji sprawdza czy stan gotowości ma wartośc równą 4. Stan gotowości ma pięć możliwych wartości (0=nieaktywny, 1=ładowany, 2=załadowany, 3=interaktywny, 4=zakończony), lecz w związku z kompatybilnością z przeglądarkami interesuje nas jedynie wartość finalna (4=zakończony). No więc sprawdziliśmy czy stan gotowości ma wartość równą 4 - jeśli tak jest, to wtedy sprawdzamy czy status zapytania HTTP zwróconego z serwera równa się 200. Wartość 200 oznacza, że status HTTP jest w porządku i informacja została znaleziona. Jeśli dostarczono złą informację w parametrze URL lub brak pliku, którego szuka zapytanie we właściwej loalizacji, to status zapytania HTTP najprawdopodobniej zwróci błąd 404. Status 404 serwera oznacza, że związana z zapytaniem zawartość nie mogła być znaleziona. W napisanym przez mnie kodzie JavaScript jeśli wartość statusu jest inna niż status błędu 200, to komunikat błędu jest dodawany do strony poprzez DOM. Jeśli status serwera zwraca wartość 200, to bierzemy wtedy związaną z zapytaniem zawartość i uaktualniamy element <div> naszej zawartości za pomocą zawartości znalezionej w jednym z dokumentów XHTML obecnych na serwerze. Sprawiamy to za pomocą wyrażenia pokazanego poniżej:

[code lang=”javascript”]document.getElementById(elementContainer).innerHTML = theHttpRequest.responseText;[/code]

Należy zauważyć, że gdy analizujemy DOM z pomocą metody getElementById(); w celu odnalezienia elementu <div> z ID o wartości “content” (”elementContainer” to parametr, który reprezentuje łańcuch “content”), a następnie ustawiamy właściwość innerHTML tego konkretnego elementu ze związaną z zapytaniem zawartością. Zawartość ta jest dostępna z poziomu właściwości responseText obiektu zapytania. Gdybyśmy mieli do czynienia z XML, to właściwością odpowiedzi byłaby wartość responseXML zamiast responseText. Aby pokazać jak proste są zdalne skrypty zdecydowałem się uaktualnić moją stronę z prostym łańcuchem tekstowym - w związku z tym użyłem właściwość responseText dla zwrócenia informacji w wersji tekstowej zamiast jako obiekt XML. Ów łańcuch tekstowy tak po prostu okazuje się być prawidłowym dokumentem XHTML. Tak więc kiedy dodajemy ten łańcuch tekstowy z powrotem na stronę przy użyciu DOM przeglądarka parsuje także tagi wewnątrz łańcucha tekstowego. Moglibyśmy użyć wartości responseXML przewidując, że informacja wysłana z powrotem z serwera byłaby dużo bardziej skomplikowana zależnie od tego, jak informacja jest użyta. Co za tym idzie, udało się nam z powodzeniem uaktualnić naszą stronę dzięki ukrytemu elementowi JavaScript przywołanym z serwera. Całkiem to wszystko proste, nieprawdaż?

Myślę, że każda osoba zasilona podstawową, dobrze przyswojoną wiedzą w kwestii techniki AXAH może się zmierzyć z bardziej złożonymi przykładami AJAX. Tak więc jeśli uważasz, że jesteś gotowy, to polecam zapoznać się z poniższymi przykładami, abyś mógł rozwijać się dalej:

• Dynamic HTML and XML: The XMLHttpRequest Object
• AJAX:Getting Started
• AJAX: Usable Interactivity with Remote Scripting
• Take Command with AJAX
• Ajax: What is it Good For?
• Ajax Examples

Cody Lindley

PS: Tłumaczenie artykułu i publikacja za zgodą autora - W. Mazurek

Kategoria: Kodowanie || Linkuj:

Przeczytaj artykuły o podobnej tematyce:

• Komentarze warunkowe
• Co jest nie tak z webdesignem?