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

[TomASS]

Witam ponownie wszystkich forumowiczów

Postanowiłem opisać jeszcze jeden przykład na wykorzystanie AJAXa oraz na rozwiązanie popularnego problemu od czasu do czasu poruszanego na tym forum.

Chodzi tutaj o dwa selecty <span style="font-style: italic;">"sprzężone"</span> ze sobą w ten sposób, że wybór odpowiedniej pozycji na <span style="font-weight: bold;">selekcie1</span> wpływa na zawartość <span style="font-weight: bold;">selecta2</span> - np. mamy wybrać ze spisu jedną wieś w Polsce. Przeszukując selectem cały spis wszystkich miejscowości moglibyśmy się zaszukać na śmierć . Wygodniej byłoby wybierać po kolei: Województwo -> Powiat -> Gmina -> Miejscowość.

Przedstawie tuta tylko pierwszy etap (Województwo -> Powiat) - dorobienie reszty jest już dziecinnie proste.

Noto zaczynamy.
Na początek podam definicję bazy danych abyście nie musieli się trudzić - oczywiście ktoś może ją wypełnić swoimi danymi:

[SQL] pobierz, plaintext 
#
# Struktura tabeli dla  `powiaty`
#
 
CREATE TABLE `powiaty` (
  `ID` int(10) NOT NULL AUTO_INCREMENT,
  `ID_wojewodztwo` int(10) DEFAULT NULL,
  `Powiat` varchar(20) DEFAULT NULL,
  UNIQUE KEY `ID` (`ID`)
) TYPE=MyISAM AUTO_INCREMENT=15 ;
 
#
# Zrzut danych tabeli `powiaty`
#
 
INSERT 
INTO `powiaty` VALUES (1, 1, 'Wroclawski');
INSERT 
INTO `powiaty` VALUES (2, 1, 'Sroda Slaska');
INSERT 
INTO `powiaty` VALUES (3, 1, 'Miekinia');
INSERT 
INTO `powiaty` VALUES (4, 1, 'Legnica');
INSERT 
INTO `powiaty` VALUES (5, 1, 'Lubin');
INSERT 
INTO `powiaty` VALUES (6, 2, 'Opole');
INSERT 
INTO `powiaty` VALUES (7, 2, 'Brzezie');
INSERT 
INTO `powiaty` VALUES (8, 2, 'Grodkow');
INSERT 
INTO `powiaty` VALUES (9, 2, 'Brzeg');
INSERT 
INTO `powiaty` VALUES (10, 2, 'Nysa');
INSERT 
INTO `powiaty` VALUES (11, 3, 'Szczecin');
INSERT 
INTO `powiaty` VALUES (12, 3, 'Szczecinek');
INSERT 
INTO `powiaty` VALUES (13, 3, 'Gryfow');
INSERT 
INTO `powiaty` VALUES (14, 3, 'Miedzyzdroje');
[SQL] pobierz, plaintext 

Jak zwykle mamy 4 pliki. Pierwszy z nich to dobrze wszystkim znay plik <span style="font-weight: bold;">advajax.js</span>. Kolejnym plikiem jest <span style="font-weight: bold;">dzialaj.html</span> (plik który uruchamia użytkownik), plik <span style="font-weight: bold;">odpowiedz.php </span>- generujący odpowiedź z serwera w postaci XML oraz plik z funkcjami JS - <span style="font-weight: bold;">function.js</span>.

Plik uruchamiany przez użytkownika nie jest wielce skomplikowany:

[HTML] pobierz, plaintext 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
 
<select name="wojewodztwa" id="wojewodztwa" onchange="getRecords();">
<option></option>
<option value="1">Dolnośląskie</option>
<option value="2">Opolskie</option>
<option value="3">Zachodnio Pomorskie</option>
</select>
 
<select name="gminy" id="gminy" style="width: 200px;">
</select>
 
<script type="text/javascript" src="advajax.js"></script>
<script type="text/javascript" src="function.js"></script>
</body>
</html>
[HTML] pobierz, plaintext 

Składa się on z dwóch selectów (wojewodztwa - z wypełnioną listą) oraz gminy (będzie dopiero wypełniany)

Plik odpowiedz.php jest bardzo ładny :

[PHP] pobierz, plaintext 
<?
header("Content-type: text/xml; charset=UTF-8"); 
echo '<?xml version="1.0" encoding="UTF-8"?>';
 
$dbhost = localhost;
$dblogin = root;
$dbhaslo = '';
$db = uop;
mysql_connect (localhost,root,'') or die ("Nie masz uprawnien");
mysql_select_db (uop);
 
 
$wojewodztwo = (int)$_GET['wojewodztwo'];
if(!$wojewodztwo) $wojewodztwo = 1;
 
echo '<records>';
  $query = "SELECT ID, Powiat FROM powiaty WHERE ID_wojewodztwo='$wojewodztwo'";
  $result = mysql_query($query);
  echo mysql_error();
  while ($row = mysql_fetch_array($result)){
	  echo '<record>';
	  echo '<ID>'.$row['ID'].'</ID>';
	  echo '<nazwa>'.$row['Powiat'].'</nazwa></record>';
  }
 
echo '</records>';
?>
[PHP] pobierz, plaintext 

Bardzo ważny jest nagłówek - aby był to plik XML:

[PHP] pobierz, plaintext 
header("Content-type: text/xml; charset=UTF-8"); 
echo '<?xml version="1.0" encoding="UTF-8"?>';
[PHP] pobierz, plaintext 

Potem zwykłe zapytanie do bazy danych wybierające odpowiednie rekordy - nic szczególnego.
Po zapytaniu następuje generacja XML - także nic co mogło by być bardzo szczególnym zajęciem. Nie zagłębiam się tutaj w puste znaczniki (aby zamiast <nazwa></nazwa> pisać </nazwa>) nie zajmuję się także polskimi znaczkami aby nie komplikować kodu - i muszę coś pozostawić jeszcze Wam

Bardzo istotnym plikiem jest plik function.js:

[HTML] pobierz, plaintext 
function $(id){
 return document.getElementById(id);
}
 
 
function parseRecords(xml) {
 
    var opttypes = document.getElementById("gminy");
    record = xml.getElementsByTagName("record");
	ID = new Array();
	nazwa = new Array();
    for (i = 0; i < record.length; i++) {        
    	nazwa[i] = record[i].childNodes[1].childNodes[0].nodeValue;
    	ID[i] = record[i].childNodes[0].childNodes[0].nodeValue;
 
    }    
 
for (i = opttypes.options.length-1; i >= 0; i--) {
opttypes.remove(i);
}
 
    for(var i = 0; i < nazwa.length; i++) {
       opttypes.options[i] = new Option(nazwa[i],ID[i]);
   }
}
 
 
function getRecords() {
 	var wojewodztwo = $("wojewodztwa").value;
 
        advAJAX.get({
            url : "odpowiedz.php?wojewodztwo="+wojewodztwo,
            onInitialization : function(obj) {
            	$("gminy").disabled="true";
            },
            onSuccess : function(obj) {
                parseRecords(obj.responseXML);
                $("gminy").disabled="";
            }
        });
}
[HTML] pobierz, plaintext 

Trzy skromne funkcje, a właściwie tylko dwie: jedna parsująca wynik XML na kod HTML. Dzieje sie to za pomocą new Option(Nazwa,Value), a wartości są zczytywane z odpowiedzi XML za pomocą:

[HTML] pobierz, plaintext 
record[i].childNodes[0].childNodes[0].nodeValue;
record[i].childNodes[1].childNodes[0].nodeValue;
[HTML] pobierz, plaintext 

Jest jeszcze funkcja "uruchamiająca" AJAXa. Najpierw prosi go o to aby wyczytał odpowiedni URL z odpowiednia opcia (?wojewodztwo) a nastepnie podczas inicjalizacji blokuje selecta gminy. Po zakonczeniu wczytywania (onSuccess) XML jest parsowany a select gminy odblokowywany.

To tyle - it`s simply
Nie powinno nastarczyć to kłopotu ludziom z podstawową znajomością JS, php, MySQL.

P.S Proszę nie zwracać na błedy w postaci że dany powiat nie jest powiatem albo nie leży w odpowiednim województwie

Ten post edytował TomASS 6.08.2006, 22:13:49