Technologia Ajax
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
Download & View Technologia Ajax as PDF for free.
More details
- Words: 1,388
- Pages: 26
Technologia AJAX Łukasz Karpuć
Co to jest AJAX? AJAX - Asynchronous Javascript and XML, czyli Asynchroniczny Javascript i XML (AJiX). Nazwa wymyślona zapewne w celach marketingowych, gdyż podobne techniki obsługi stron internetowych istniały już wcześniej. Nie były co prawda tak sprawne jak to, co obecnie nazywamy technologią AJAX, jednakże umożliwiały w jakiś sposób komunikację asynchroniczną z serwerem.
Technologia? AJAX hucznie nazywany jest mianem technologii. Po bliższym przyjrzeniu się AJAX-owi można jednak stwierdzić, że poprawniejsze by było mówienie o technice. Słownikowo technologia i technika są praktycznie tym samym [za sjp.pwn.pl]:
technologia 1. «metoda przeprowadzania procesu produkcyjnego lub przetwórczego» 2. «dziedzina techniki zajmująca się opracowywaniem nowych metod produkcji wyrobów lub przetwarzania surowców» technika 1. «wiedza na temat praktycznego wykorzystania osiągnięć nauki w przemyśle, transporcie, medycynie itp.; też: praktyczne wykorzystanie tej wiedzy» 2. «metoda» 3. «wyuczona i wyćwiczona umiejętność wykonywania jakichś czynności»
Technologie składowe AJAX W powszechnym mniemaniu słowo "technologia" jest mocniejsze od "techniki". Jak się dalej przekonamy, nie bez powodu wspomniałem, iż to drugie słowo jest bliższe AJAX-owi. Przyjrzyjmy się technologiom, bez których AJAX nie mógłby istnieć: XML (model DOM) JavaScript HTTP technologie server-side
DOM i XML Nazwy te bynajmniej nie mają związku z domatorstwem, ani nowym serialem dla dzieci o przygodach przyjaciół Doma i Xmla. Są to nazwy dla sposobu zapisu danych. DOM jest logicznym standardem organizacji danych, XML natomiast jego tekstową reprezentacją (niejedyną zresztą). Na modelu DOM opierają się najnowsze przeglądarki internetowe. Porządkują one dane strony według tego standardu, nawet jeśli wykonano je w języku nie-XML-owym. Co więcej, robią to w miarę podobnie, dzięki czemu programiści JS nie muszą już liczyć na łut szczęścia przy tworzeniu skryptów (co często bywało niezbędne "w starych czasach").
JavaScript Język skryptowy, którego specyfikacja tak naprawdę nosi nazwę ECMAScriptu. Poszczególne implementacje ECMAScriptu (w np. różnych przeglądarkach) różnią się nieznacznie od siebie i noszą też inne nazwy: Javascript (Mozilla), JScript (MS-IE), linear_b (? - Opera), JavaScriptCore (Safari). Standard ECMAScript określa składnię - dodatkowe obiekty, w tym ten, który umożliwia stosowanie technologii AJAX, udostępniany jest przez przeglądarkę.
HTTP i Server-side Bez protokołu HTTP nie byłoby możliwe przeglądanie stron WWW w ogóle, nie mówiąc już o stosowaniu na nich AJAX-a. Warto jedynie wspomnieć o tym, że do samego AJAX-a nie są potrzebne żadne specjalne serwery. Wystarczy, że użytkownik będzie używał odpowiedniej przeglądarki. Server-side - pod tym zwrotem kryją się wszelkiego rodzaju technologie operujące po stronie serwera. Są one ważne, gdy chcemy generować dynamiczne strony WWW. Oczywiście AJAX-a można użyć bez nich, ale co to za przyjemność.
Tajemniczy obiekt XMLHttpRequest Parę lat temu Microsoftowi coś się udało. Jako część Outlook Web Access 2000 stworzył obiekt o nazwie XMLHTTP, który również się nazywa XMLHttpRequest (w innych implementacjach). Dzięki niemu możliwa jest komunikacja między przeglądarką a serwerem HTTP bez konieczności przeładowania całej strony. Dane dostarczone przez serwer mogą być przetworzone i zaprezentowane za pomocą JavaScriptu. Wcześniej takie cuda możliwe były do uzyskania za pomocą m.in. niewidzialnych IFRAME (zresztą do dzisiaj są stosowane do ładowania plików) albo appletów. Brak standardów i trudność w implementacji sprawiły jednak, że nie zyskały one uznania u programistów.
Jak to działa? bez AJAX-a
z AJAX-em
klient: żądanie strony (czekanie) serwer: przesłanie duuużej strony klient: żądanie strony (czekanie) serwer: przesłanie duuużej strony
klient: żądanie strony (czekanie) serwer: przesłanie duuużej strony "jednocześnie": ((klient: operacje na stronie wspomagane javascriptem, wysyłanie żądań HTTP i przetwarzanie wyników serwer: przetworzenie żądania HTTP i przesłanie małej porcji danych bez przeładowywania strony))
Jak to dokładniej wygląda w AJAXie? 1. Strona jest standardowo ładowana 2. Javascirptowy silnik strony reaguje na akcje podejmowane przez użytkownika i za pomocą obiektu XMLHttpRequest wysyła normalne żądania do serwera HTTP 3. Skrypty na serwerze przetwarzają żądania HTTP i wysyłają standardową odpowiedź - odpowiednio spreparowaną. Może być to zestaw danych zapisany w standardzie XML, JSON, bądź zwykły tekst. 4. Silnik Javascript reaguje na odpowiedź serwera przetwarzając otrzymane dane - odpowiednio modyfikuje zawartość wyświetlanej strony. Strona
Obiekt XMLHttpRequest w.. Internet Exploderze (wersja < 7.0) try { hr = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { hr = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} }
Obiekt XMLHttpRequest w.. normalnej przeglądarce (i, o dziwo, IE7.0) W innych przeglądarkach obsługujących AJAX, obiekt XMLHttpRequest tworzy się poprzez zwyczajne hr = new XMLHttpRequest(); Sprawdzić dostępność tego obiektu można przez if (window.XMLHttpRequest) { /*...*/
Kto i co obsługuje AJAX? Podając za stroną w3schools.com: "The XMLHttpRequest object is supported in Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0 / Firefox, Opera 8+, and Netscape 7.", czyli teoretycznie wszystkie najnowsze graficzne przeglądarki oparte o model DOM posiadają zaimplementowany obiekt XMLHttpRequest.
Jak wysłać żądanie? Wysłaniem żądania zajmują się dwie funkcje: open( typ_zadania, url, zawsze_TRUE ) oraz wywoływana po niej send( dane_dla_posta ). Przy czym, korzystając z żądania metodą POST należy jeszcze zdefiniować nagłówek 'Content-Type' za pomocą metody: setRequestHeader( typ_naglowka, zawartosc_naglowka ). Plików nie da się przesyłać za pomocą AJAX-a. Przynajmniej na razie. Żądanie można wycofać (przerwać) za pomocą: abort().
Przykłady żądań GET i POST GET hr.open( 'GET', 'skrypt.php?a=1', true ); hr.send( null ); POST hr.open( 'POST', 'skrypt.php', true ); hr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); hr.send( 'a=1' );
Obsługa odpowiedzi serwera W celu obsługi odpowiedzi serwera definiuje się jedną funkcję (przed wysłaniem żądania), która reaguje na kolejne stany przetwarzania żądania HTTP. Referencję na nią przypisuje się do XMLHttpRequest.onreadystatechange. Jest ona wywoływana za każdym razem, gdy zmieni się atrybut XMLHttpRequest.readyState. Definiuje się ją np. w taki sposób: hr.onreadystatechange = function() { /*.. coś tam .. */ };
Stany wykonania żądania Jak wspomniałem, funkcja onreadystatechange() wywoływana jest, gdy zmieni się stan wykonania żądania. Przechowywany jest on w atrybucie readyState i jest to zmienna typu numeric (znaczy całkowita). Oznacza ona: 0 - niezainicjowane (not initialized), 1 - w trakcie pobierania (loading), 2 - pobrano (loaded), 3 - interaktywne (interactive), 4 - gotowe (complete). Takie stany osiąga ładowanie strony jedynie w teorii, albowiem w praktyce...
Rzeczywiste stany wykonania żądania W praktyce wszystko zależy od przeglądarki. Testując Firefoksa, Operę i Explorera można zauważyć, że cykl wykonania żądania prezentuje się następująco: FF: 0-1-1-2-3-4 IE7: 0-1-1-2-3-4 Opera: 0-1-3-4 Jak widać: 1. FF i IE7 dwa razy znajdują się w stanie "Loading" czemu? Zagadka. 2. Opera w stan "Loading" wchodzi raz, ale całkiem pomija "Loaded" - dlaczego? Zagadka numer 2.
Wnioski z testów cyklu stanów (...) Nie należy ufać obiektowi XMLHttpRequest jeśli wskazuje, że żądanie znajduje się w stanie innym niż "Init" (0) albo "Complete" (4). Właściwie tylko to ostatnie nas obchodzi. Wtedy to dostajemy odpowiedź z serwera. Oczywiście dostajemy też status odpowiedzi - jeśli nie było błędów będzie to "200 OK". W funkcji onreadystatechange() sprawdzamy warunek: if ( hr.readyState == 4 && hr.status == 200 ) i - jeśli jest spełniony - możemy przetworzyć dane przesłane przez serwer.
Jak się dostać do danych? Dane przechowywane są przez obiekt XMLHttpRequest w sposób dwojaki. W atrybucie responseText jako czysty teskt oraz w responseXML jako drzewo DOM, o ile wynik zwrócony przez serwer był poprawnym kodem XML (wraz z nagłówkiem). Kodowanie tekstu to UTF8. Przykład: alert( hr.responseText );
Słowo (niejedno) o popularności AJAX stał się bardzo popularną techniką. Teoretycznie ułatwia życie, powinien zmniejszać obciążenie sieci, strony internetowe dzięki niemu bardziej przypominają aplikacje nie-WWW. Słabym punktem AJAX-a jest wydajność serwerów i przeglądarek - niewątpliwym atutem dostępność na wielu platformach. Praktycznie wszystkie tzw. strony Web 2.0 (cokolwiek to znaczy) korzystają z AJAX-a, a jego zalety pomagają również w obsłudze np. GMail-a, czy pakietów biurowych od choćby Google.
Kilka słów o JSON JSON, zapis fonetyczny polskimi znakami to Dżejson, to JavaScript Object Notation, czyli JavaScriptowa Notacja Obiektów. Jest to jedna z najlepszych rzeczy jakie pojawiły się w JS. Umożliwia bardzo prosty zapis obiektów, np.: var o = { "k1" : [ 0, 1, 2], "k2" : { "k2_1" : "string", "k2_2" : 180483 }, "foo(serio)" : function() { alert('HAHA!'); } };
Jeszcze parę słów o JSON Dostęp w JS do obiektu jest bardzo prosty, np: alert( o.k2.k21 ); // notacja kropkowa o['foo (serio)'](); // notacja tablicowa alert( o.k1[0] ); // mix Można stosować notację kropkową lub odwoływać się do atrybutów jak do pól tablicy. Wspominam o tym dlatego, że w AJAX-ie dzięki JSON-owi..
Ostatnie słowa o JSON ..cuda stają się prostsze. hr = new XMLHttpRequest(); hr.onreadystatechange = function() { eval( 'var o = ' + hr.responseText ); alert( o.msg ); }; hr.open( 'POST', 'scr.php', true ); hr.send(); echo '{ "msg" : "Ecoute-moi.." }'; output: Ecoute-moi.. [OK]
Dodatkowe materiały Materiały uzupełniające: http://blog.lukaszk.net Przykłady: http://czat.lukaszk.net - prosty czat http://fo.lukaszk.net - wspomaganie edycji http://ajax13.com - pakiet biurowy http://eyeos.org - "system operacyjny" http://picasaweb.google.com - album zdjęć http://gmail.com - poczta elektroniczna
FIN
Co to jest AJAX? AJAX - Asynchronous Javascript and XML, czyli Asynchroniczny Javascript i XML (AJiX). Nazwa wymyślona zapewne w celach marketingowych, gdyż podobne techniki obsługi stron internetowych istniały już wcześniej. Nie były co prawda tak sprawne jak to, co obecnie nazywamy technologią AJAX, jednakże umożliwiały w jakiś sposób komunikację asynchroniczną z serwerem.
Technologia? AJAX hucznie nazywany jest mianem technologii. Po bliższym przyjrzeniu się AJAX-owi można jednak stwierdzić, że poprawniejsze by było mówienie o technice. Słownikowo technologia i technika są praktycznie tym samym [za sjp.pwn.pl]:
technologia 1. «metoda przeprowadzania procesu produkcyjnego lub przetwórczego» 2. «dziedzina techniki zajmująca się opracowywaniem nowych metod produkcji wyrobów lub przetwarzania surowców» technika 1. «wiedza na temat praktycznego wykorzystania osiągnięć nauki w przemyśle, transporcie, medycynie itp.; też: praktyczne wykorzystanie tej wiedzy» 2. «metoda» 3. «wyuczona i wyćwiczona umiejętność wykonywania jakichś czynności»
Technologie składowe AJAX W powszechnym mniemaniu słowo "technologia" jest mocniejsze od "techniki". Jak się dalej przekonamy, nie bez powodu wspomniałem, iż to drugie słowo jest bliższe AJAX-owi. Przyjrzyjmy się technologiom, bez których AJAX nie mógłby istnieć: XML (model DOM) JavaScript HTTP technologie server-side
DOM i XML Nazwy te bynajmniej nie mają związku z domatorstwem, ani nowym serialem dla dzieci o przygodach przyjaciół Doma i Xmla. Są to nazwy dla sposobu zapisu danych. DOM jest logicznym standardem organizacji danych, XML natomiast jego tekstową reprezentacją (niejedyną zresztą). Na modelu DOM opierają się najnowsze przeglądarki internetowe. Porządkują one dane strony według tego standardu, nawet jeśli wykonano je w języku nie-XML-owym. Co więcej, robią to w miarę podobnie, dzięki czemu programiści JS nie muszą już liczyć na łut szczęścia przy tworzeniu skryptów (co często bywało niezbędne "w starych czasach").
JavaScript Język skryptowy, którego specyfikacja tak naprawdę nosi nazwę ECMAScriptu. Poszczególne implementacje ECMAScriptu (w np. różnych przeglądarkach) różnią się nieznacznie od siebie i noszą też inne nazwy: Javascript (Mozilla), JScript (MS-IE), linear_b (? - Opera), JavaScriptCore (Safari). Standard ECMAScript określa składnię - dodatkowe obiekty, w tym ten, który umożliwia stosowanie technologii AJAX, udostępniany jest przez przeglądarkę.
HTTP i Server-side Bez protokołu HTTP nie byłoby możliwe przeglądanie stron WWW w ogóle, nie mówiąc już o stosowaniu na nich AJAX-a. Warto jedynie wspomnieć o tym, że do samego AJAX-a nie są potrzebne żadne specjalne serwery. Wystarczy, że użytkownik będzie używał odpowiedniej przeglądarki. Server-side - pod tym zwrotem kryją się wszelkiego rodzaju technologie operujące po stronie serwera. Są one ważne, gdy chcemy generować dynamiczne strony WWW. Oczywiście AJAX-a można użyć bez nich, ale co to za przyjemność.
Tajemniczy obiekt XMLHttpRequest Parę lat temu Microsoftowi coś się udało. Jako część Outlook Web Access 2000 stworzył obiekt o nazwie XMLHTTP, który również się nazywa XMLHttpRequest (w innych implementacjach). Dzięki niemu możliwa jest komunikacja między przeglądarką a serwerem HTTP bez konieczności przeładowania całej strony. Dane dostarczone przez serwer mogą być przetworzone i zaprezentowane za pomocą JavaScriptu. Wcześniej takie cuda możliwe były do uzyskania za pomocą m.in. niewidzialnych IFRAME (zresztą do dzisiaj są stosowane do ładowania plików) albo appletów. Brak standardów i trudność w implementacji sprawiły jednak, że nie zyskały one uznania u programistów.
Jak to działa? bez AJAX-a
z AJAX-em
klient: żądanie strony (czekanie) serwer: przesłanie duuużej strony klient: żądanie strony (czekanie) serwer: przesłanie duuużej strony
klient: żądanie strony (czekanie) serwer: przesłanie duuużej strony "jednocześnie": ((klient: operacje na stronie wspomagane javascriptem, wysyłanie żądań HTTP i przetwarzanie wyników serwer: przetworzenie żądania HTTP i przesłanie małej porcji danych bez przeładowywania strony))
Jak to dokładniej wygląda w AJAXie? 1. Strona jest standardowo ładowana 2. Javascirptowy silnik strony reaguje na akcje podejmowane przez użytkownika i za pomocą obiektu XMLHttpRequest wysyła normalne żądania do serwera HTTP 3. Skrypty na serwerze przetwarzają żądania HTTP i wysyłają standardową odpowiedź - odpowiednio spreparowaną. Może być to zestaw danych zapisany w standardzie XML, JSON, bądź zwykły tekst. 4. Silnik Javascript reaguje na odpowiedź serwera przetwarzając otrzymane dane - odpowiednio modyfikuje zawartość wyświetlanej strony. Strona
Obiekt XMLHttpRequest w.. Internet Exploderze (wersja < 7.0) try { hr = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { hr = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} }
Obiekt XMLHttpRequest w.. normalnej przeglądarce (i, o dziwo, IE7.0) W innych przeglądarkach obsługujących AJAX, obiekt XMLHttpRequest tworzy się poprzez zwyczajne hr = new XMLHttpRequest(); Sprawdzić dostępność tego obiektu można przez if (window.XMLHttpRequest) { /*...*/
Kto i co obsługuje AJAX? Podając za stroną w3schools.com: "The XMLHttpRequest object is supported in Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0 / Firefox, Opera 8+, and Netscape 7.", czyli teoretycznie wszystkie najnowsze graficzne przeglądarki oparte o model DOM posiadają zaimplementowany obiekt XMLHttpRequest.
Jak wysłać żądanie? Wysłaniem żądania zajmują się dwie funkcje: open( typ_zadania, url, zawsze_TRUE ) oraz wywoływana po niej send( dane_dla_posta ). Przy czym, korzystając z żądania metodą POST należy jeszcze zdefiniować nagłówek 'Content-Type' za pomocą metody: setRequestHeader( typ_naglowka, zawartosc_naglowka ). Plików nie da się przesyłać za pomocą AJAX-a. Przynajmniej na razie. Żądanie można wycofać (przerwać) za pomocą: abort().
Przykłady żądań GET i POST GET hr.open( 'GET', 'skrypt.php?a=1', true ); hr.send( null ); POST hr.open( 'POST', 'skrypt.php', true ); hr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); hr.send( 'a=1' );
Obsługa odpowiedzi serwera W celu obsługi odpowiedzi serwera definiuje się jedną funkcję (przed wysłaniem żądania), która reaguje na kolejne stany przetwarzania żądania HTTP. Referencję na nią przypisuje się do XMLHttpRequest.onreadystatechange. Jest ona wywoływana za każdym razem, gdy zmieni się atrybut XMLHttpRequest.readyState. Definiuje się ją np. w taki sposób: hr.onreadystatechange = function() { /*.. coś tam .. */ };
Stany wykonania żądania Jak wspomniałem, funkcja onreadystatechange() wywoływana jest, gdy zmieni się stan wykonania żądania. Przechowywany jest on w atrybucie readyState i jest to zmienna typu numeric (znaczy całkowita). Oznacza ona: 0 - niezainicjowane (not initialized), 1 - w trakcie pobierania (loading), 2 - pobrano (loaded), 3 - interaktywne (interactive), 4 - gotowe (complete). Takie stany osiąga ładowanie strony jedynie w teorii, albowiem w praktyce...
Rzeczywiste stany wykonania żądania W praktyce wszystko zależy od przeglądarki. Testując Firefoksa, Operę i Explorera można zauważyć, że cykl wykonania żądania prezentuje się następująco: FF: 0-1-1-2-3-4 IE7: 0-1-1-2-3-4 Opera: 0-1-3-4 Jak widać: 1. FF i IE7 dwa razy znajdują się w stanie "Loading" czemu? Zagadka. 2. Opera w stan "Loading" wchodzi raz, ale całkiem pomija "Loaded" - dlaczego? Zagadka numer 2.
Wnioski z testów cyklu stanów (...) Nie należy ufać obiektowi XMLHttpRequest jeśli wskazuje, że żądanie znajduje się w stanie innym niż "Init" (0) albo "Complete" (4). Właściwie tylko to ostatnie nas obchodzi. Wtedy to dostajemy odpowiedź z serwera. Oczywiście dostajemy też status odpowiedzi - jeśli nie było błędów będzie to "200 OK". W funkcji onreadystatechange() sprawdzamy warunek: if ( hr.readyState == 4 && hr.status == 200 ) i - jeśli jest spełniony - możemy przetworzyć dane przesłane przez serwer.
Jak się dostać do danych? Dane przechowywane są przez obiekt XMLHttpRequest w sposób dwojaki. W atrybucie responseText jako czysty teskt oraz w responseXML jako drzewo DOM, o ile wynik zwrócony przez serwer był poprawnym kodem XML (wraz z nagłówkiem). Kodowanie tekstu to UTF8. Przykład: alert( hr.responseText );
Słowo (niejedno) o popularności AJAX stał się bardzo popularną techniką. Teoretycznie ułatwia życie, powinien zmniejszać obciążenie sieci, strony internetowe dzięki niemu bardziej przypominają aplikacje nie-WWW. Słabym punktem AJAX-a jest wydajność serwerów i przeglądarek - niewątpliwym atutem dostępność na wielu platformach. Praktycznie wszystkie tzw. strony Web 2.0 (cokolwiek to znaczy) korzystają z AJAX-a, a jego zalety pomagają również w obsłudze np. GMail-a, czy pakietów biurowych od choćby Google.
Kilka słów o JSON JSON, zapis fonetyczny polskimi znakami to Dżejson, to JavaScript Object Notation, czyli JavaScriptowa Notacja Obiektów. Jest to jedna z najlepszych rzeczy jakie pojawiły się w JS. Umożliwia bardzo prosty zapis obiektów, np.: var o = { "k1" : [ 0, 1, 2], "k2" : { "k2_1" : "string", "k2_2" : 180483 }, "foo(serio)" : function() { alert('HAHA!'); } };
Jeszcze parę słów o JSON Dostęp w JS do obiektu jest bardzo prosty, np: alert( o.k2.k21 ); // notacja kropkowa o['foo (serio)'](); // notacja tablicowa alert( o.k1[0] ); // mix Można stosować notację kropkową lub odwoływać się do atrybutów jak do pól tablicy. Wspominam o tym dlatego, że w AJAX-ie dzięki JSON-owi..
Ostatnie słowa o JSON ..cuda stają się prostsze. hr = new XMLHttpRequest(); hr.onreadystatechange = function() { eval( 'var o = ' + hr.responseText ); alert( o.msg ); }; hr.open( 'POST', 'scr.php', true ); hr.send(); echo '{ "msg" : "Ecoute-moi.." }'; output: Ecoute-moi.. [OK]
Dodatkowe materiały Materiały uzupełniające: http://blog.lukaszk.net Przykłady: http://czat.lukaszk.net - prosty czat http://fo.lukaszk.net - wspomaganie edycji http://ajax13.com - pakiet biurowy http://eyeos.org - "system operacyjny" http://picasaweb.google.com - album zdjęć http://gmail.com - poczta elektroniczna
FIN
