Witaj, Gościu O nas | Kontakt | Mapa
Wortal Forum PHPEdia.pl Planeta Kubek IRC Przetestuj się!
Kategorie

Kategorie

Kategoria wyżej
O autorze

O autorze

Tomasz (TomASS) Łosek
Reklama

Reklama

Moje pierwsze starcie z AJAXem

...czyli przewodnik dla całkowicie zielonych :)

Zaskoczony sukcesem AJAXa w sieci, oraz problemami wielu użytkowników, postanowiłem zobaczyć co kryje się za tajemniczym słowem AJAX, a zebrane informacje zebrać i przekazać innym.

Na podstawie klasy advAJAX Łukasza Lacha.

Zaczynam od tego czym właściwie jest AJAX. Wygooglowałem i... coś skomplikowanie jest to opisane - a tak po prostu, 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, technologia ta, opiera się na "magicznym" obiekcie przeglądarki - XMLHttpRequest, który na zadane żądanie dostaje od serwera odpowiedź w postaci tekstu (responseText) lub w postaci XML (responseXML). JavaScript "obrabia" odpowiedź i ingeruje w kod HTML (np. innerHTML lub window.write() ). Implementacja obiektu XMLHttpRequest zależy od przeglądarki (np. w FF jest to obiekt JavaScritp, a w IE jest to obiekt ActiveX). Spokojnie - na szczęście nie musimy się martwić o to jak jest u nas - zrobią to za nas odpowiednie klasy.

Googluję dalej, aby dowiedzieć się jak się z tego korzysta. W moje ręce wpada jedna z lepszych (chyba jedyna polska) klasa advAJAX 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 otrzymujemy odpowiedź (obj):

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 (wywołanie metody onSuccess) wyświetlamy cały tekst w okienku (alert).

Równie dobrze mogłaby być tutaj dowolna funkcja JS:

advAJAX.get({
   url: "http://www.example.com/page.html",   
   onSuccess : function(obj) { dodajHTML(obj.responseText);}
});

Możemy też przekazać w urlu jakieś zmienne:

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 http://advajax.anakin.us/index-pl.htm#a6). Np. aby dodać loadera:

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 obiektu http_request.readyState odpowiedzi, ale znowu nie musimy się o to martwić, bo martwi się za nas omawiana klasa.

Klasa advAJAX 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 dancyh. 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
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>';
?>

Oczywiście nic nie stoi na przeszkodzie by korzystać z innych klas, lub samemu napisać dla siebie klasę obsługi AJAXa, a nawet - w ostateczności używać "gołego" XMLHttpRequest.

Uff to by było na tyle.

Może na sam koniec troszkę linków:

A oto co można zrobić przy pomocy AJAXa:

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

Informacje na podobny temat:
Wasze opinie
Wszystkie opinie użytkowników: (6)
do bani
Czwartek 13 Grudzień 2007 11:57:43 pm - slawek_master

ten atykul jak dla mnie mial jeden plus, fakt iz chcialem to zobaczyc u siebie na localhoscie, musialem sie duzo naszukac i nameczyc z przerobkami, ale dzieki temu sie czegos naucyzlem, ogolnie nie widze sensu skryptu php ktory tutaj jest zamieszczony, co z zapytaniem

"2.php?p="+currentPage+"&s="+currentSort+"%20"+currentSortOrder

gdzie skrypt php odbeira zmienna $_GET['s] oraz $_GET['p'] ?? ogolnie artykul na 1+ jak dla mnie

Czarna magia
Środa 17 Październik 2007 4:22:27 pm - damians1

Z tego artykułu dowiedziałem sie naprawde niewiele, szukam czego wyjasnionego w prosty sposob

Cos ten przyklad nie dziala.
Poniedziałek 17 Wrzesień 2007 12:29:25 pm - Sokrates <sobinet_at_o2.pl>

Coś to nie do końca działa w pliku 2.php jak nie wstawie
<?php header("Content-type: text/xml; charset=UTF-8"); ?> i nie skasuje <?xml version="1.0" encoding="UTF-8" ?> to sie wysypuje strona z błedem
syntax error, unexpected T_STRING in ... on line 1.
A zkolei jak juz wypisze na ekran dane to nie sortuje ani nie przechodzi miedzy stronami 1-2 (nastepna). Czy wogle ktos sprawdzal ten kod czy to dziala? A moze to cos z serwerem , trzeba ustawic jakies parsowanie XML'a ?
Ktos moze wytlumaczyc mi w czym moze bys problem ?
Dzieki...

krzysztof
Czwartek 12 Kwiecień 2007 8:49:34 pm - kaniagandzowski

do bani nic nie kapuje nic nie wyjasnia jak sie tym poslugiwac wsumie to samo co na stronie autora i tam tez mi nic nie wyjasnia moze to nie jest dla laika co nie zna wogule ajax

Moja Pochlebna Opinia
Środa 23 Sierpień 2006 12:32:42 pm - jastu <jastu_at_o2.pl>

Text przystępny (jeśli chodzi o Ajaxa podobnych textów jest już sporo) , podany bardzo dobry przykład - budowanie xml i parsowanie przez js po czym podanie na stronce.
A o nauce programowania obiektowego arty też są ;)

Artykuł
Poniedziałek 31 Lipiec 2006 11:26:31 pm - cadavre

Dla mnie artykuł kompletnie niezrozumiały. Ni z gruszki, ni z pietruszki pojawia się kod advAJAX.get, w którym opsianego mamy wyłącznie gotowca. Może jakiś opis wszystkich tych: "responseXML, responseText, innerHTML"? Jestem laikiem w dziedzinach OOP JSa i AJAXu - a ponoć tekst ten kierowany jest do tegoż przedziału użytkowników.

Mentax.pl    NQ.pl- serwery z dodatkiem świętego spokoju...   
O nas | Kontakt | Mapa serwisu
Copyright (c) 2003-2017 php.pl    Wszystkie prawa zastrzeżone    Powered by eZ publish Content Management System eZ publish Content Management System