[ajax] Moje pierwsze starcie, czyli przewodnik dla całkowicieZielonych |
[ajax] Moje pierwsze starcie, czyli przewodnik dla całkowicieZielonych |
7.02.2006, 23:29:28
Post
#1
|
|
Grupa: Zarejestrowani Postów: 1 660 Pomógł: 13 Dołączył: 9.06.2004 Skąd: Wrocław i okolice Ostrzeżenie: (0%) |
Z topicu powstal artykuł
http://wortal.php.pl/phppl/wortal/artykuly...tarcie_z_ajaxem topic przeznaczony na dyskusję na jego temat ---- nospor Moje pierwsze starcie z AJAXem czyli przewodnik dla całkowicie zielonych. Na podstawie klasy advAJAX Łukasza Lacha. Zaskoczony sukcesem AJAXa w sieci, oraz problemami wielu użytkowników, postanowiłem zobaczyć z „czym to się je”, a moje doświadczenie przkazać innym. Zabieram się za googlowanie. Zaczynam od tego czym właściwie jest AJAX. Jest, już przeczytałem - ale nie będę się tutaj rozpisywał, że jest to ble, ble, ble….tylko tak na mój chłopski rozumek. Jest to zaprzężenie JavaScriptu do ingerencji w kod HTML strony. JavaScript wysyła żądanie do serwera i otrzymuje odpowiedź, na jej podstawie modyfikuje cały czas otwartą stronę HTML. Z technicznego punktu widzenia opiera się na „magicznej” właściwośći przeglądarki, która na zadane żądanie dostaje od serwera odpowiedź (XMLHttpRequest) w postaci tekstu (responseText) lub w postaci XML (responseXML). JavaScript „obrabia” odpowiedź i ingeruje w kod HTML (np. innerHTML lub window.write() ). Googluję dalej, aby dowiedzieć się jak się z tego kożysta. W moje ręce wpada jedna z lepszych klas (i chyba jedyna polska klasa) advAJAX (http://advajax.anakin.us/index-pl.htm) autorstwa Łukasza Lacha. Klasa ta pozwala w prosty sposób kontrolować stan, w jakim jest nasze zapytanie. W skrócie polega to na tym, że wywołujemy metodę get() lub post() obiektu advAJAX i otrzymujemu odpowiedź (obj): Kod advAJAX.get({ url: "http://www.example.com/page.html", onSuccess : function(obj) { alert(obj.responseText); } }); W przykładzie tym próbujemy wykonać zapytanie (metodą get() ) na adresie: http://www.example.com/page.html. Po zakończeniu (onSuccess) wyświetlamy cały tekst w okienku (alert). Równie dobrze mogłaby być tutaj dowolna funkcja JS: Kod advAJAX.get({ url: "http://www.example.com/page.html", onSuccess : function(obj) { dodajHTML(obj.responseText);} }); Możemy też przekazać w urlu jakieś zmienne: Kod page = parseInt(document.getElementById("page").value); advAJAX.get({ url: "http://www.example.com/page.php?p="+page, onSuccess : function(obj) { dodajHTML(obj.responseText);} }); Klasa ta pozwala nie tylko kontrolować sytuację, w której strona załadowała się pomyślnie (onSucces), ale również w kilkunastu innych przypadkach, min w momencie inicjalizacji, podczas ładowania, po zakończeniu, po zakończeniu błędem, po zakończeniu sukcesem (pełny spis na (link) ). Np. aby zrobić napis (proszę czekać – loading): Kod page = parseInt(document.getElementById("page").value); advAJAX.get({ url: "http://www.example.com/page.php?p="+page, onInitialization : function(obj) ( ShowLoading();}, onSuccess : function(obj) { dodajHTML(obj.responseText);}, onFinalization : function(obj) { HideLoading();} }); Wszystkie statusy polegają na interpretowaniu właściwości http_request.readyState odpowiedzi. Klasa ta obsługuje również ponawianie połączenia, pamięć tymczasową przeglądarki, obsługę formularzy i grupowanie wywołań. Myślę, że ciekawym przykładem, będzie przykład samego autora tej klasy. Będzie to stronicowanie. Do działania przykładu potrzebne są cztery pliki:2.html który zawiera cały kod html strony. Kod ten będzie modyfikowany przez JavaScript zawarty w pliku 2.js . W pliku 2.js jest funkcja getRecords() która wysyła proźbę (zapytanie) do pliku 2.php, który generuje odpowiedni XML. Działa to tak: - użytkownik wczytuje stronę 2.html - kod JS zawarty w pliku 2.js wysyła żądanie do pliku 2.php - plik 2.php generuje odpowiedni kod XML i wysyła go z powrotem do JS (plik 2.html jest ciągle otwarty w oknie przeglądarki) - kod JS otrzymuje odpowiedź w postaci obj.responseXML i funkcją parseXML modyfikuje kod strony 2.html (dodaje odpowiednie tagi do <tbody id="dataTable"> </tbody>. Oczywiście nie możemy zapomnieć o ostatnim, najważniejszym pliku – klasie advAJAX.js. Przykładowy kod generujący XML może wyglądać tak:
Oczywiście nic nie stoi na przeszkodzie kożystać z innch klas, lub samemu napisać dla siebie klasę obsługi AJAXa a w ostateczności używać „gołego” XMLHttpRequest. Ufff to by było na tyle. Może na sam koniec troszkę linków: Strona projektu advAJAX Ajax w „gołej” postaci Ajax wiki Klasa do obsługi AJAX Małe conieco o AJAX A oto co można zrobić przy pomocy AJAXa: https://www.paguna.com/ http://demo.script.aculo.us/ http://www.google.com/webhp?complete=1&hl=en http://www.clearnova.com/ajax/ http://24ways.org/advent/easy-ajax-with-prototype http://www.digitalmediaminute.com/article/...s-and-resources Mam nadzieję, że przybliżyłem problematykę związaną z technologią AJAX. Jednak jak każda technologia ma swoje wady i zalety, nie można jej używać do wszystkiego, jednak to pozostawiam już czytelnikom..... -------------------- |
|
|
8.02.2006, 04:39:09
Post
#2
|
|
TAO programowania Grupa: Zarejestrowani Postów: 340 Pomógł: 3 Dołączył: 25.03.2003 Skąd: ze słoika Ostrzeżenie: (30%) |
Boom
Wg. mnie nadaje sie to na artykul -------------------- |
|
|
8.02.2006, 08:59:00
Post
#3
|
|
Grupa: Przyjaciele php.pl Postów: 7 494 Pomógł: 302 Dołączył: 31.03.2004 Ostrzeżenie: (0%) |
Temat jest ostatnio popularny a ~TomASS napisał kilka ciekawych informacji.
Podpinam. (ewenualne dyskusje o AJAXie, oraz ciekawe spostrzeżenia czy porady proszę zamieszczać tutaj) A ja przeniosę z początkujący na poziom wyzej --- nospor |
|
|
8.02.2006, 14:38:28
Post
#4
|
|
Grupa: Przyjaciele php.pl Postów: 742 Pomógł: 0 Dołączył: 14.12.2003 Skąd: Gdańsk, Trójmiasto Ostrzeżenie: (0%) |
to zdecydowanie nadaje się na artykuł, tutaj kompletnie nie pasuje.
|
|
|
8.02.2006, 14:41:07
Post
#5
|
|
Grupa: Zarejestrowani Postów: 352 Pomógł: 0 Dołączył: 22.01.2006 Ostrzeżenie: (0%) |
Według mnie większość tych klas do ajaxa (a chodzi przecież o bardzo prosty w obsłudze, z raptem paroma metodami obiekt xmlHttp - szczerze nie lubię nazwy ajax) tylko zaciemnia i komplikuje całą idee.. a początkującym użytkownikom utrudnia zrozumienie jakie naprawdę ma możliwości obiekt xmlHttp i robi z całego obiektu jakiś trudny do ogarnięcia moloch.
Bardzo dobry artykuł o xmlHttp (po angielsku) jest też tutaj |
|
|
8.02.2006, 14:47:27
Post
#6
|
|
Grupa: Przyjaciele php.pl Postów: 2 196 Pomógł: 2 Dołączył: 17.01.2004 Skąd: Sosnowiec Ostrzeżenie: (0%) |
Tak czy inaczej artykuł bardzo dobry i pomocny dla osób zaczynających z AJAX'em. mariuszn3: Gdyby wszystkiego używało się łatwo i przyjemnie to nie powstawałyby takie rzeczy jak AJAX, ADoDB czy połowa PEAR'a. A z innej beczki: poprawiłem pare literówek w kodzie JS, żeby nie było, że coś nie działa.
-------------------- |
|
|
8.02.2006, 15:04:20
Post
#7
|
|
Grupa: Zarejestrowani Postów: 352 Pomógł: 0 Dołączył: 22.01.2006 Ostrzeżenie: (0%) |
Cytat(crash @ 2006-02-08 13:47:27) Tak czy inaczej artykuł bardzo dobry i pomocny dla osób zaczynających z AJAX'em. mariuszn3: Gdyby wszystkiego używało się łatwo i przyjemnie to nie powstawałyby takie rzeczy jak AJAX, ADoDB czy połowa PEAR'a. A z innej beczki: poprawiłem pare literówek w kodzie JS, żeby nie było, że coś nie działa. Crash a co to jest AJAX? W ogóle przeczytałeś uważnie to co napisałem, czy gdzieś w swoim poście wspomniałem, że pisanie bibliotek upraszczających korzystanie z narzędzi jest bez celowe? |
|
|
8.02.2006, 20:52:39
Post
#8
|
|
Grupa: Zarejestrowani Postów: 7 Pomógł: 0 Dołączył: 11.12.2005 Ostrzeżenie: (0%) |
Nic z tego nie zrozumialem. Pozaym co ten Ajax robi wogole?
|
|
|
8.02.2006, 21:31:01
Post
#9
|
|
Grupa: Przyjaciele php.pl Postów: 2 196 Pomógł: 2 Dołączył: 17.01.2004 Skąd: Sosnowiec Ostrzeżenie: (0%) |
Najprostrzy przykład użycia, na chłopski rozum: AJAX pozwala na zmianę treści części strony bez przeładowywania całej strony dając także dodatkowe możliwości jak np. wyświetlenie informacji o trwaniu przeładowywania danych etc.
-------------------- |
|
|
9.02.2006, 14:42:18
Post
#10
|
|
Grupa: Zarejestrowani Postów: 7 Pomógł: 0 Dołączył: 11.12.2005 Ostrzeżenie: (0%) |
Aha. Pożyteczne ;P
--- Nabijanie postów.! Kolejne takie posty będą karane. ~mike_mech |
|
|
9.02.2006, 20:05:01
Post
#11
|
|
Grupa: Zarejestrowani Postów: 1 660 Pomógł: 13 Dołączył: 9.06.2004 Skąd: Wrocław i okolice Ostrzeżenie: (0%) |
Witam. Aby jeszcze bardziej przybliżyć technologię AJAX, przedstawie jeszcze jeden przykład. Jest to ulepszona walidacja formularza do rejestracji użytkownika. Potrzebny będzie nam jak zwykle plik klasy advAJAX.js, plik z funkcjami js (register.js), oraz pliki: register.php oraz register2.php…… troszkę dużo się nazbierało, ale już wyjaśniam.
Ogólna idea jest taka: Wczytujemy formularz z pliku register.php, po wypełnieniu pól zaczyna się magia……ekhm, no nie zupełnie, zaczyna się AJAX, wywołuje odpowiednią funkcję JS, która przesyła odpowiednie dane (z formularza) do pliku register2.php, on daje odpowiedź i ajax na podstawie otrzymanej odpowiedzi wysyła bądź nie formularz. Ktoś może powiedzieć, że to można zrobić bez ajaxa – fakt, można, ale nie zamierzam nikogo do tego przekonywać, potraktujmy to jako ćwiczenie. Zaczniemy od pliku register.php. Równie dobrze, mógłby być to register.html, to bez różnicy:
Plik ten ma za zadanie wyświetlenie formularza, mamy 4 pola: Login, Hasło, Powtórz hasło oraz e-mail. Aby nie gmatwać przykładu zajmiemy się tylko „dodatkową” walidacją, czyli czy użytkownik lub e-mail istnieją już w bazie danych. Do przycisku Zarejestruj mnie…. Przypisana jest akcja „sprawdź dane()” która znajduje się w pliku register.js, który wygląda następująco:
Funkcja sprwawdz_dane pobiera wartości pól input text login oraz email I na ich podstawie generuje odpowiednie zapytanie do pliku register2.php. Zapytanie to jest wykonywane (url: zapytanie). Jako odpowiedź mamy trzy możliwości: albo jest to login – tzn „login” jest już w bazie danych, albo jest to „email” – znaczy się ze e-mail jest w bazie, oraz”OK” – wszystko w porządku (można wysyłać formularz - $("registerForm").submit(); ) i zostanie wysłany formularz do pliku register3.php. Plik, który generuje odpowiedź na zadane żądanie (register2.php) wygląda następująco:
Nic nadzwyczjanego – dwa zapytania i tyle. Oczywiście, można jeszcze kombinować z metodą assign klasy advAJAX:
ale to już pozostawiam do treningiu. Całe rozwiązanie można podpatrzeć tutaj http://advajax.anakin.us/phpsolutions/1.html Powodzenia drodzy forumowicze. ------------------------edit---------------------------------- Poprawiłem uwagi Marusza, sorki, nie wszystko można zauważyć pisząć, pewnie dlatego, że sam mam złe nawyki A co do mysql_num_rows() to nie za bardzo się mogę zgodzić, ponieważ tak czy siak będą potrzebne dwa zapytania.......a co się tyczy niekonsekwencji to? Ten post edytował TomASS 10.02.2006, 09:30:46 -------------------- |
|
|
9.02.2006, 22:00:22
Post
#12
|
|
Grupa: Zarejestrowani Postów: 188 Pomógł: 0 Dołączył: 23.05.2005 Ostrzeżenie: (0%) |
Nie jestem ekspertem od js ale takie cus widze po raz pierwszy.
Cytat var email = $("email").value; To jest w ogole poprawne? |
|
|
9.02.2006, 22:06:19
Post
#13
|
|
Grupa: Przyjaciele php.pl Postów: 2 196 Pomógł: 2 Dołączył: 17.01.2004 Skąd: Sosnowiec Ostrzeżenie: (0%) |
Ta... Tutaj $ to po prostu nazwa funkcji.
-------------------- |
|
|
9.02.2006, 23:45:39
Post
#14
|
|
Grupa: Zarejestrowani Postów: 188 Pomógł: 0 Dołączył: 23.05.2005 Ostrzeżenie: (0%) |
No to szyd niezly . Nie dziwie sie wiec, ze powstaja artykuly o takim tytule :
link . |
|
|
10.02.2006, 02:48:17
Post
#15
|
|
Grupa: Zarejestrowani Postów: 191 Pomógł: 0 Dołączył: 16.05.2003 Skąd: POLAND Ostrzeżenie: (0%) |
TomASS, jest juz pozno wiec bede sie streszal:
Cytat mysql_connect ("$dbhost","$dblogin","$dbhaslo") - Taki zapis jest nieprawidlowy. Uczysz poczatkujacych zlych nawykow... Cytat $login = addslashes($_GET['login']); $email = addslashes($_GET['email']); - Do zabezpieczenia stringow przed "zlymi" znakami w przypadku bazy danych sluzy funkcja mysql_escape_string(). Dlaczego nie powinno sie stosowac addslashes() znajdziesz na stronach php.net. Poza tym utworzenie tych dwoch zmiennych nie robi nic wiecej jak tylko zzera pamiec Cytat "SELECT count(*)AS Ile FROM uop_users WHERE Login='$login';" - Ten sam blad. Dziel stringi komponujac zmienne. Dzieki temu Twoj php ma mniej do myslenia. Procz tego masz wieksza kontrole nad tym co sie dzieje i skrypt jest bardziej czytelny. Dodatkowo w przypadku zapytan MySQL zalecane (ale nie wymagane) jest "ubieranie" nazw tabel i kolumn znaczkiem "`". Cytat count(*)AS Ile 2 zapytania stworzone niepotrzebnie. Zainteresuj sie funkcja mysql_num_rows(). Poza tym piszesz bardzo niekonsekwentnie. Niemniej dzieki za tekst, bo zawsze komus moze sie przydac. -------------------- |
|
|
13.02.2006, 16:53:57
Post
#16
|
|
Grupa: Zarejestrowani Postów: 17 Pomógł: 0 Dołączył: 28.07.2005 Skąd: 64-100 Leszno Ostrzeżenie: (0%) |
Marusz
pragnę tylko przypomnieć że używanie COUNT jest szybsze i to o wiele od mysql_num_rows , a zwlaszcza gdy rodzaj tabeli to MyIsam . Zwróć uwagę że select * a pozniej mysql_num_rows oznacza tyle co zwrocenie przez query calego select * itd. , a count (*) zwraca ci tylko jeden wiersz. Pozdrawiam -------------------- "Who controls the past controls the future. Who controls the present controls the past. "
|
|
|
15.02.2006, 13:59:09
Post
#17
|
|
Grupa: Zarejestrowani Postów: 135 Pomógł: 1 Dołączył: 5.10.2005 Skąd: Opole/Chorzów Ostrzeżenie: (0%) |
z tego co wywnioskowalem, to ajax sluzy do dynamicznego zmieniania zawartosci strony bez przeladowania, czyli np. te reklamy na onecie co sie zmieniaja tez sa zrobione ajaxem??
-------------------- |
|
|
15.02.2006, 14:32:39
Post
#18
|
|
Grupa: Zarejestrowani Postów: 1 660 Pomógł: 13 Dołączył: 9.06.2004 Skąd: Wrocław i okolice Ostrzeżenie: (0%) |
Cytat ajax sluzy do dynamicznego zmieniania zawartosci strony bez przeladowania Można by tak powiedzieć Cytat eklamy na onecie co sie zmieniaja tez sa zrobione ajaxem?? Chyba jest mało reklam które wymagają przeładowywania strony - one są prawdpodobnie napisane albo w "czystym JS" albo we flashu....tak mi się przynajmniej wydaje. -------------------- |
|
|
15.02.2006, 15:46:06
Post
#19
|
|
Grupa: Zarejestrowani Postów: 352 Pomógł: 0 Dołączył: 22.01.2006 Ostrzeżenie: (0%) |
Cytat(snipe @ 2006-02-15 12:59:09) z tego co wywnioskowalem, to ajax sluzy do dynamicznego zmieniania zawartosci strony bez przeladowania, czyli np. te reklamy na onecie co sie zmieniaja tez sa zrobione ajaxem?? Nie do końca, to znaczy mało precyzyjnie. Do zmieniania zawartości strony bez przeładowywania wystarczy sam javascript. Obiekt xmlHttp (na tym opiera się hasło ajax) jest owszem obiektem javascript (pominę kwestię ie<=6) ale to nie nim zmieniamy zawartość strony i wcale nie trzeba z niego korzystać by móc zmodyfikować zawartość strony. Obiekt xmlHttp, pozwala na komunikację z serwerem co daje możliwość szybkiej interakcji użytkownik -> serwer bez przeładowywania strony.. a to już coś dużo więcej. Możemy dzięki temu odpowiadać na wszystkie zapytania użytkownika, których nie da się przewidzieć na poziomie programowania. Przykładowo, w wyszukiwarce strony możemy podać użytkownikowi wyniki wyszukiwania nie przeładowując jej (na płaszczyźnie html+js bez korzystania z tego obiektu nie ma innej możliwości wymiany informacji z serwerem ) A portale takie jak onet.pl muszą się trochę obudzić by zacząć korzystać z możliwości xmlHttp.. na razie są parę lat do tyłu i w żadym wypadku nie należy się na nich wzorować Ten post edytował mariuszn3 15.02.2006, 15:48:20 |
|
|
15.02.2006, 19:09:15
Post
#20
|
|
Grupa: Zarejestrowani Postów: 44 Pomógł: 0 Dołączył: 11.06.2005 Skąd: Gostyń Ostrzeżenie: (0%) |
Hmm.. a co mają zrobić osoby, które wyłączają JS, albo są zmuszone wejść na stronę np. linksem? Czy takie ślepe zauroczenie AJAX-em nie wpłynie zgubnie na, już i tak olewaną, kwestię dostępności witryn (WCAG i te sprawy)?
-------------------- @nospor: trzymajcie się. Wszystko będzie dobrze!
|
|
|
Wersja Lo-Fi | Aktualny czas: 27.09.2024 - 00:33 |