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); }
});
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);}
});
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);}
});
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();}
});
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:
<? $query="SELECT count(*)AS total FROM zamowienia_old;"; $total = $row['total']; $query="SELECT * FROM zamowienia ORDER BY Z.ID LIMIT 0,10"; echo '<?xml version="1.0" encoding="UTF-8"?><records total="'.$total.'" max_per_page="'.$per_page.'" page="'.$page.'" count="'.mysql_affected_rows().'">'; } }
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.....