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

[kukix]

Siedze już kurde drugi dzień nad tym ajaxem i albo jestem jakis ciemny, albo nie wiem... Już nie napisze, że nie potrafie przerobić przykładu "stronnicowanie danych" tak, zeby kożystał z tabeli o innej strukturze... no ale pokolei...

Pierwsze, przez co nie moge przebrnąc to wstawieniue danych z bazy do formularza...w tym przypadku kożystałem z '.value', nie kożystałem z '.innerHTML' ponieważ w formularzu nic sie nie działo.. '.innerHTML' bez problemu wstawia dane do np <DIV id="xxx">...</DIV> ale do <INPUT type="text" name="xxx" id="xxx"> już nie wstawia, wyskakuje błąd.. (IMG:http://forum.php.pl/style_emoticons/default/dry.gif)

plik zaladuj.js:

Kod

function wyswietl() {    
 advAJAX.setDefaultParameters({
   onInitialization : function(obj) { document.getElementById(obj.tag).value = "Przygotowanie..."; },
   onLoading : function(obj) { document.getElementById(obj.tag).value = "Ładowanie..."; },
   onSuccess : function(obj) { document.getElementById(obj.tag).value = "" + obj.responseText; },
   onError : function(obj) { document.getElementById(obj.tag).value = "Error..."; }
 });
 advAJAX.get({ url: "zaladuj.php?wartosc=naglowek", tag: "news_naglowek" });
 advAJAX.get({ url: "zaladuj.php?wartosc=data", tag: "news_tresc" });
 advAJAX.get({ url: "zaladuj.php?wartosc=autor", tag: "news_autor" });
 advAJAX.setDefaultParameters({});
}

plik zaladuj.php:

[PHP] pobierz, plaintext 
<?php
 
$mysql_link = mysql_connect('host', 'login', 'haslo');
mysql_select_db('db');
    
$mysql_result = mysql_query('SELECT '.$wartosc.' FROM tbl_news WHERE id_news=3 LIMIT 0,1');
 
$row = mysql_fetch_assoc($mysql_result);
print($row[$wartosc]);
 
?>
[PHP] pobierz, plaintext 

problem z tym kodem jest taki, że wrzucając zawartość pliku zaladuj.php do pola INPUT wrzuca razem ze statystykami home.pl (home dokleja je do każdje strony)... w przypadku 'innerHTML' nie ładowało tego....

Wiem, że nie jest to zbyt skomplikowany problem, jest to poprostu "wrzucanie" danych do formularza, podstawopwa sprawa, no ale jednak jest to problem..Może ktoś mi pomóc?

Ten post edytował kukix 13.03.2006, 21:01:56