[ajax] Moje pierwsze starcie, czyli przewodnik dla całkowicieZielonych Opcje

[TomASS]

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:

[PHP] pobierz, plaintext 
<?
header("Content-type: text/xml; charset=UTF-8");  
$query="SELECT count(*)AS total FROM zamowienia_old;";
$result = mysql_query($query); 
$row = mysql_fetch_assoc($result);
$total = $row['total'];
  
$query="SELECT * FROM zamowienia ORDER BY Z.ID LIMIT 0,10";
$result = mysql_query($query); 
echo '<?xml version="1.0" encoding="UTF-8"?><records total="'.$total.'" max_per_page="'.$per_page.'" page="'.$page.'" count="'.mysql_affected_rows().'">';
   while ($row = mysql_fetch_assoc($result)){
  echo '<record>';
    while(list($Index,$Value)=each($row)){
      echo '<'.$Index.'>'.convert($Value).'</'.$Index.'>';
    }
    echo '</record>';
    }
 echo '</records>';?>
[PHP] pobierz, plaintext 

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.....

[mariuszn3]

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ć (IMG:http://forum.php.pl/style_emoticons/default/smile.gif)

Ten post edytował mariuszn3 15.02.2006, 15:48:20