Drukowana wersja tematu

Napisany przez: TomASS 7.02.2006, 23:29:28

Z topicu powstal artykuł
http://wortal.php.pl/phppl/wortal/artykuly/po_stronie_przegladarki/moje_pierwsze_starcie_z_ajaxem
topic przeznaczony na dyskusję na jego temat
----
nospor

Moje pierwsze starcie z AJAXem czyli przewodnik dla całkowicie zielonych.
Na podstawie klasy http://advajax.anakin.us/index-pl.htm Ł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):

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:


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


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):

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:http://advajax.anakin.us/phpsolutions/2.html który zawiera cały kod html strony. Kod ten będzie modyfikowany przez JavaScript zawarty w pliku http://advajax.anakin.us/phpsolutions/2.js . W pliku 2.js jest funkcja getRecords() która wysyła proźbę (zapytanie) do pliku http://advajax.anakin.us/phpsolutions/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 http://advajax.anakin.us/phpsolutions/advAAX.js. Przykładowy kod generujący XML może wyglądać tak:

[PHP] pobierz, plaintext 
<?
http://www.php.net/header("Content-type: text/xml; charset=UTF-8");  
$query="SELECT count(*)AS total FROM zamowienia_old;";
$result = http://www.php.net/mysql_query($query); 
$row = http://www.php.net/mysql_fetch_assoc($result);
$total = $row['total'];
  
$query="SELECT * FROM zamowienia ORDER BY Z.ID LIMIT 0,10";
$result = http://www.php.net/mysql_query($query); 
http://www.php.net/echo '<?xml version="1.0" encoding="UTF-8"?><records total="'.$total.'" max_per_page="'.$per_page.'" page="'.$page.'" count="'.http://www.php.net/mysql_affected_rows().'">';
   while ($row = http://www.php.net/mysql_fetch_assoc($result)){
  http://www.php.net/echo '<record>';
    while(list($Index,$Value)=http://www.php.net/each($row)){
      http://www.php.net/echo '<'.$Index.'>'.convert($Value).'</'.$Index.'>';
    }
    http://www.php.net/echo '</record>';
    }
 http://www.php.net/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:
http://advajax.anakin.us/index-pl.htm
http://developer.mozilla.org/pl/docs/AJAX:Na_początek
http://ajaxpatterns.org/wiki/index.php?title=Main_Page
http://www.modernmethod.com/sajax/
http://blog.joshuaeichorn.com/


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/1297/xmlhttprequest-ajax-examples-links-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.....

Napisany przez: Puciek 8.02.2006, 04:39:09

Boom
Wg. mnie nadaje sie to na artykul

Napisany przez: mike_mech 8.02.2006, 08:59:00

Temat jest ostatnio popularny a ~TomASS napisał kilka ciekawych informacji.

Podpinam.
(ewenualne dyskusje o AJAXie, oraz ciekawe spostrzeżenia czy porady proszę zamieszczać tutaj)

A ja przeniosę z początkujący na poziom wyzej
---
nospor

Napisany przez: aleksander 8.02.2006, 14:38:28

to zdecydowanie nadaje się na artykuł, tutaj kompletnie nie pasuje.

Napisany przez: mariuszn3 8.02.2006, 14:41:07

Według mnie większość tych klas do ajaxa (a chodzi przecież o bardzo prosty w obsłudze, z raptem paroma metodami obiekt xmlHttp - szczerze nie lubię nazwy ajax) tylko zaciemnia i komplikuje całą idee.. a początkującym użytkownikom utrudnia zrozumienie jakie naprawdę ma możliwości obiekt xmlHttp i robi z całego obiektu jakiś trudny do ogarnięcia moloch.
Bardzo dobry artykuł o xmlHttp (po angielsku) jest też http://www-128.ibm.com/developerworks/web/library/wa-ajaxintro2/?ca=dgr-lnxw07AJAX-Request

Napisany przez: crash 8.02.2006, 14:47:27

Tak czy inaczej artykuł bardzo dobry i pomocny dla osób zaczynających z AJAX'em. mariuszn3: Gdyby wszystkiego używało się łatwo i przyjemnie to nie powstawałyby takie rzeczy jak AJAX, ADoDB czy połowa PEAR'a. A z innej beczki: poprawiłem pare literówek w kodzie JS, żeby nie było, że coś nie działa.

Napisany przez: mariuszn3 8.02.2006, 15:04:20

Crash a co to jest AJAX?
W ogóle przeczytałeś uważnie to co napisałem, czy gdzieś w swoim poście wspomniałem, że pisanie bibliotek upraszczających korzystanie z narzędzi jest bez celowe?

Napisany przez: NX_Turbospeed 8.02.2006, 20:52:39

Nic z tego nie zrozumialem. Pozaym co ten Ajax robi wogole?

Napisany przez: crash 8.02.2006, 21:31:01

Najprostrzy przykład użycia, na chłopski rozum: AJAX pozwala na zmianę treści części strony bez przeładowywania całej strony dając także dodatkowe możliwości jak np. wyświetlenie informacji o trwaniu przeładowywania danych etc.

Napisany przez: NX_Turbospeed 9.02.2006, 14:42:18

Aha. Pożyteczne ;P


---
Nabijanie postów.!
Kolejne takie posty będą karane.
~mike_mech

Napisany przez: TomASS 9.02.2006, 20:05:01

Witam. Aby jeszcze bardziej przybliżyć technologię AJAX, przedstawie jeszcze jeden przykład. Jest to ulepszona walidacja formularza do rejestracji użytkownika. Potrzebny będzie nam jak zwykle plik klasy advAJAX.js, plik z funkcjami js (register.js), oraz pliki: register.php oraz register2.php…… troszkę dużo się nazbierało, ale już wyjaśniam.

Ogólna idea jest taka:
Wczytujemy formularz z pliku register.php, po wypełnieniu pól zaczyna się magia……ekhm, no nie zupełnie, zaczyna się AJAX, wywołuje odpowiednią funkcję JS, która przesyła odpowiednie dane (z formularza) do pliku register2.php, on daje odpowiedź i ajax na podstawie otrzymanej odpowiedzi wysyła bądź nie formularz. Ktoś może powiedzieć, że to można zrobić bez ajaxa – fakt, można, ale nie zamierzam nikogo do tego przekonywać, potraktujmy to jako ćwiczenie.


Zaczniemy od pliku register.php. Równie dobrze, mógłby być to register.html, to bez różnicy:

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<http://december.com/html/4/element/html.html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<http://december.com/html/4/element/head.html>
<http://december.com/html/4/element/title.html>rejestracja nowego użytkownika</http://december.com/html/4/element/title.html>
<http://december.com/html/4/element/script.html type="text/javascript" src="register.js"></http://december.com/html/4/element/script.html>
<http://december.com/html/4/element/script.html type="text/javascript" src="advajax.js"></http://december.com/html/4/element/script.html>
<http://december.com/html/4/element/meta.html http-equiv="Content-Type" content="text/html; charset=utf-8" />
</http://december.com/html/4/element/head.html>
 
<http://december.com/html/4/element/body.html>
<http://december.com/html/4/element/form.html action="register3.php" method="POST" id="registerForm" name="registerForm">
<http://december.com/html/4/element/table.html>
<http://december.com/html/4/element/tr.html><http://december.com/html/4/element/td.html class="napis">Login:</http://december.com/html/4/element/td.html><http://december.com/html/4/element/td.html><http://december.com/html/4/element/input.html type="text" name="login" id="login"></http://december.com/html/4/element/td.html></http://december.com/html/4/element/tr.html>
<http://december.com/html/4/element/tr.html><http://december.com/html/4/element/td.html class="napis">Hasło:</http://december.com/html/4/element/td.html><http://december.com/html/4/element/td.html><http://december.com/html/4/element/input.html type="password" name="Haslo"></http://december.com/html/4/element/td.html></http://december.com/html/4/element/tr.html>
<http://december.com/html/4/element/tr.html><http://december.com/html/4/element/td.html class="napis">Powtórz hasło:</http://december.com/html/4/element/td.html><http://december.com/html/4/element/td.html><http://december.com/html/4/element/input.html type="password" name="Haslo2"></http://december.com/html/4/element/td.html></http://december.com/html/4/element/tr.html>
<http://december.com/html/4/element/tr.html><http://december.com/html/4/element/td.html class="napis">E-mail:</http://december.com/html/4/element/td.html><http://december.com/html/4/element/td.html><http://december.com/html/4/element/input.html type="text" name="email" id="email"></http://december.com/html/4/element/td.html></http://december.com/html/4/element/tr.html>
<http://december.com/html/4/element/tr.html><http://december.com/html/4/element/td.html colspan="2" style="text-align: center;"><http://december.com/html/4/element/button.html onclick="sprawdz_dane();">Zarejestruj mnie...</http://december.com/html/4/element/button.html></http://december.com/html/4/element/td.html></http://december.com/html/4/element/tr.html>
 
</http://december.com/html/4/element/form.html>
</http://december.com/html/4/element/table.html>
</http://december.com/html/4/element/body.html>
</http://december.com/html/4/element/html.html>
[HTML] pobierz, plaintext 

Plik ten ma za zadanie wyświetlenie formularza, mamy 4 pola: Login, Hasło, Powtórz hasło oraz e-mail. Aby nie gmatwać przykładu zajmiemy się tylko „dodatkową” walidacją, czyli czy użytkownik lub e-mail istnieją już w bazie danych. Do przycisku Zarejestruj mnie…. Przypisana jest akcja „sprawdź dane()” która znajduje się w pliku register.js, który wygląda następująco:

[HTML] pobierz, plaintext 
function $(id) {
	return document.getElementById(id);
}
 
function sprawdz_dane() {
	var login = $("login").value;
	var email = $("email").value;
	var zapytanie = "register2.php?login="+login+"&email="+email;
	advAJAX.get({
        url : zapytanie,
    	onSuccess : function(obj) { 
    		if(obj.responseText == "login"){
    			alert("Użytkownik o takim loginie jest już w bazie danych");
    			$("login").style.border='1px solid red';
    			$("email").style.border='1px solid #7F9DB9';
    		}
    		if(obj.responseText == "email"){
    			alert("Ten e-mail isntieje już w bazie danych");
    			$("login").style.border='1px solid #7F9DB9';
    			$("email").style.border='1px solid red';
    		}
    		if(obj.responseText == "OK") $("registerForm").submit();    	
    	}
	});
}
[HTML] pobierz, plaintext 

Funkcja sprwawdz_dane pobiera wartości pól input text login oraz email I na ich podstawie generuje odpowiednie zapytanie do pliku register2.php. Zapytanie to jest wykonywane (url: zapytanie). Jako odpowiedź mamy trzy możliwości: albo jest to login – tzn „login” jest już w bazie danych, albo jest to „email” – znaczy się ze e-mail jest w bazie, oraz”OK” – wszystko w porządku (można wysyłać formularz - $("registerForm").submit(); ) i zostanie wysłany formularz do pliku register3.php. Plik, który generuje odpowiedź na zadane żądanie (register2.php) wygląda następująco:

[PHP] pobierz, plaintext 
<?
$dbhost = localhost;
$dblogin = root;
$dbhaslo = '';
$db = uop;
 
http://www.php.net/session_start();
http://www.php.net/mysql_connect ($dbhost,$dblogin,$dbhaslo) or http://www.php.net/die ("Nie masz uprawnien");
http://www.php.net/mysql_select_db ("$db");
 
$login = http://www.php.net/mysql_escape_string($_GET['login']);
$email = http://www.php.net/mysql_escape_string($_GET['email']);
 
$query = "SELECT count(*)AS Ile FROM uop_users WHERE Login='".$login."';";
$result = http://www.php.net/mysql_query($query); 
$row = http://www.php.net/mysql_fetch_array($result);
 
if($row['Ile']) http://www.php.net/echo 'login';
else{
   $query = "SELECT count(*)AS Ile FROM uop_users WHERE e_mail='$email';";
   $result = http://www.php.net/mysql_query($query); 
   $row = http://www.php.net/mysql_fetch_array($result);
   if($row['Ile']) http://www.php.net/echo 'email';    
   else http://www.php.net/echo 'OK';
}
?>
[PHP] pobierz, plaintext 

Nic nadzwyczjanego – dwa zapytania i tyle.

Oczywiście, można jeszcze kombinować z metodą assign klasy advAJAX:

[HTML] pobierz, plaintext 
advAJAX.assign($(“registerForm”))
[HTML] pobierz, plaintext 

ale to już pozostawiam do treningiu. Całe rozwiązanie można podpatrzeć tutaj http://advajax.anakin.us/phpsolutions/1.html

Powodzenia drodzy forumowicze.


------------------------edit----------------------------------
Poprawiłem uwagi Marusza, sorki, nie wszystko można zauważyć pisząć, pewnie dlatego, że sam mam złe nawyki
A co do mysql_num_rows() to nie za bardzo się mogę zgodzić, ponieważ tak czy siak będą potrzebne dwa zapytania.......a co się tyczy niekonsekwencji to?

Napisany przez: Radarek 9.02.2006, 22:00:22

Nie jestem ekspertem od js ale takie cus widze po raz pierwszy.

To jest w ogole poprawne?

Napisany przez: crash 9.02.2006, 22:06:19

Ta... Tutaj $ to po prostu nazwa funkcji.

Napisany przez: Radarek 9.02.2006, 23:45:39

No to szyd niezly . Nie dziwie sie wiec, ze powstaja artykuly o takim tytule :
http://www.crockford.com/javascript/javascript.html .

Napisany przez: Marusz 10.02.2006, 02:48:17

TomASS, jest juz pozno wiec bede sie streszal:

- Taki zapis jest nieprawidlowy. Uczysz poczatkujacych zlych nawykow...


- Do zabezpieczenia stringow przed "zlymi" znakami w przypadku bazy danych sluzy funkcja mysql_escape_string(). Dlaczego nie powinno sie stosowac addslashes() znajdziesz na stronach php.net. Poza tym utworzenie tych dwoch zmiennych nie robi nic wiecej jak tylko zzera pamiec


- Ten sam blad. Dziel stringi komponujac zmienne. Dzieki temu Twoj php ma mniej do myslenia. Procz tego masz wieksza kontrole nad tym co sie dzieje i skrypt jest bardziej czytelny. Dodatkowo w przypadku zapytan MySQL zalecane (ale nie wymagane) jest "ubieranie" nazw tabel i kolumn znaczkiem "`".


2 zapytania stworzone niepotrzebnie. Zainteresuj sie funkcja mysql_num_rows().

Poza tym piszesz bardzo niekonsekwentnie. Niemniej dzieki za tekst, bo zawsze komus moze sie przydac.

Napisany przez: Tajny 13.02.2006, 16:53:57

Marusz

pragnę tylko przypomnieć że używanie COUNT jest szybsze i to o wiele od mysql_num_rows , a zwlaszcza gdy rodzaj tabeli to MyIsam .

Zwróć uwagę że select * a pozniej mysql_num_rows oznacza tyle co zwrocenie przez query calego select * itd. , a count (*) zwraca ci tylko jeden wiersz.


Pozdrawiam

Napisany przez: snipe 15.02.2006, 13:59:09

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

Napisany przez: TomASS 15.02.2006, 14:32:39

Można by tak powiedzieć



Chyba jest mało reklam które wymagają przeładowywania strony - one są prawdpodobnie napisane albo w "czystym JS" albo we flashu....tak mi się przynajmniej wydaje.

Napisany przez: mariuszn3 15.02.2006, 15:46:06

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ć

Napisany przez: Termit_ 15.02.2006, 19:09:15

Hmm.. a co mają zrobić osoby, które wyłączają JS, albo są zmuszone wejść na stronę np. linksem? Czy takie ślepe zauroczenie AJAX-em nie wpłynie zgubnie na, już i tak olewaną, kwestię dostępności witryn (WCAG i te sprawy)?

Napisany przez: FiDO 15.02.2006, 19:21:02

I tu wlasnie wychodzi, jak to moj kolega z grupy ladnie ujal, "Najbardziej czasochłonny, skomplikowany, redundantny i niezauważany mechanizm, jaki można zaimplementować.". Chodzi oczywiscie o interfejs dla przegladarek bez takich "cudow" jak JS itp. Zobacz sobie serwisy google korzystajace z AJAXA jak dzialaja z wylaczonym JS.. nie jest to juz tak user friendly, ale jest w pelni uzyteczne. Boli jedynie to, ze trzeba to w porzadnej aplikacji zaimplementowac, a wiekszosc ludzi nawet tego nie zauwazy.

Napisany przez: TomASS 15.02.2006, 19:37:20

Ja to robię wpierw jedną stronę - dla której nie potrzeba JS, oraz przygotowuję zmodyfikowaną wersję z JS i AJAXem. Cos na styl poczty na interii - do wyboru
Natomiast zawsze staram się klienta pytać jaki sprzęt używa.

Lynksa chyba nie używa nawet 0,0001% ludzi

Napisany przez: Termit_ 15.02.2006, 20:41:14

Jasne. Wszystko przecież zależy od charakteru witryny.

Nie chciałbym mieć po prostu takiej sytuacji, że wchodzę na shella, próbuję ściągnąć nowe php a tu kicha, bo linksem się do tego nie dostanę.

Podobnie ze sprawdzeniem poczty – jasne, że raczej nie będę dokonywał zmiany konfiguracji profilu, nawet nie będę maila wysyłał – ale blokowanie możliwości sprawdzenia, czy ktoś coś mi przysłał byłoby IMHO nie na miejscu.

O to mi mniej więcej chodziło .

Napisany przez: TomASS 2.03.2006, 08:21:24

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 
<http://december.com/html/4/element/html.html>
<http://december.com/html/4/element/head.html>
<http://december.com/html/4/element/meta.html http-equiv="Content-Type" content="text/html; charset=utf-8" />
</http://december.com/html/4/element/head.html>
<http://december.com/html/4/element/body.html>
 
<http://december.com/html/4/element/select.html name="wojewodztwa" id="wojewodztwa" onchange="getRecords();">
<http://december.com/html/4/element/option.html></http://december.com/html/4/element/option.html>
<http://december.com/html/4/element/option.html value="1">Dolnośląskie</http://december.com/html/4/element/option.html>
<http://december.com/html/4/element/option.html value="2">Opolskie</http://december.com/html/4/element/option.html>
<http://december.com/html/4/element/option.html value="3">Zachodnio Pomorskie</http://december.com/html/4/element/option.html>
</http://december.com/html/4/element/select.html>
 
<http://december.com/html/4/element/select.html name="gminy" id="gminy" style="width: 200px;">
</http://december.com/html/4/element/select.html>
 
<http://december.com/html/4/element/script.html type="text/javascript" src="advajax.js"></http://december.com/html/4/element/script.html>
<http://december.com/html/4/element/script.html type="text/javascript" src="function.js"></http://december.com/html/4/element/script.html>
</http://december.com/html/4/element/body.html>
</http://december.com/html/4/element/html.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 
<?
http://www.php.net/header("Content-type: text/xml; charset=UTF-8"); 
http://www.php.net/echo '<?xml version="1.0" encoding="UTF-8"?>';
 
$dbhost = localhost;
$dblogin = root;
$dbhaslo = '';
$db = uop;
http://www.php.net/mysql_connect (localhost,root,'') or http://www.php.net/die ("Nie masz uprawnien");
http://www.php.net/mysql_select_db (uop);
 
 
$wojewodztwo = (int)$_GET['wojewodztwo'];
if(!$wojewodztwo) $wojewodztwo = 1;
 
http://www.php.net/echo '<records>';
  $query = "SELECT ID, Powiat FROM powiaty WHERE ID_wojewodztwo='$wojewodztwo'";
  $result = http://www.php.net/mysql_query($query);
  http://www.php.net/echo http://www.php.net/mysql_error();
  while ($row = http://www.php.net/mysql_fetch_array($result)){
	  http://www.php.net/echo '<record>';
	  http://www.php.net/echo '<ID>'.$row['ID'].'</ID>';
	  http://www.php.net/echo '<nazwa>'.$row['Powiat'].'</nazwa></record>';
  }
 
http://www.php.net/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

Napisany przez: bigZbig 2.03.2006, 09:42:16

@TomASS - pierwszy post, z wyjatkiem sparafrazowania definicji AJAXa i kilku linków na końcu, jest zwyklym streszczeniem dokumentacji advAJAXa napisanej przez Łukasza Lacha. Nie wnosi wiele nowego, nic nie upraszcza i z pewnoscia nie nadaje sie na artykul. Moze po malych przerobkach daloby sie z tego stworzyc haslo w wikipedi.

Twoje kolejne posty przedstawiajace przyklady zastosowania advAJAX sa juz o wiele bardziej interesujące. Mam jednak mala uwagę. Czy mógłbyś w js stosowac wcięcia? Odpowiednio sformatowany kod łatwiej się czyta.

Napisany przez: mike_mech 2.03.2006, 09:58:22

Niestety sposób osadzania kodów źródłowych na forum za pomocą [ html ] ma wadę i nie zachowuje wcięć. Więc muszę tutaj ~TomASSa usprawiedliwić.
Zostanie to prawdopodobnie poprawione w niedługim czasie.

P.S.
A na artykuł faktycznie to się nie nadaje. Porada zwykła i tyle. Równie dobrze mógłby być link do bloga ~anAKiNa, co innego późniejsze przykłady, one już coś wnoszą.

Napisany przez: bigZbig 2.03.2006, 10:23:38

Ale [CODE] juz wciecia zachowuje wiec czy nie lepsze byloby zastosowanie tego bbcode tym bardziej, ze js to nie html, wiec nikt nie mogby zglosic uwagi, ze zastosowano niewlasciwy bbcode.

edit
---------------
A tak swoja droga przydalby sie jakis parser kolorujacy kod js - moze http://stud.ics.p.lodz.pl/~emiks/?id=home&nid=4?

Napisany przez: kukix 8.03.2006, 19:41:57

Witam.
Zainteresowałem sie przykładem autora advajax, "stronnicowanie danych"...
kod źódłowy wziełem z płytki "php solutions" i napotkałem pare problemów, które nie potrafie obejśc...

pierwszym, który napotkałem to wstawienie styli do tabelki generowanej przes skrypt js oto kod autora advajax:

jak to obejśc..? da sie zrobić tak, żeby do kolumny z Imieniem dodac "align=center" , albo class=styyl ?

Nie moge sobie z tym poradzić... może ktośrobił już to i może mi pomóc?

P.S. Wogóle nie rozumie, jak powstaje ta tabelka.. domyslam sie, że document.createElement("td"); jest funkcją wbudowaną w js i ona tworzy tabelke...

Napisany przez: TomASS 8.03.2006, 22:50:00

Tabelka jest już gotowa - zobacz do źródła http://advajax.anakin.us/phpsolutions/2.html:

[HTML] pobierz, plaintext 
<http://december.com/html/4/element/table.html>
  <http://december.com/html/4/element/thead.html>
  </http://december.com/html/4/element/thead.html>
  <http://december.com/html/4/element/tbody.html id="dataTable">
  </http://december.com/html/4/element/tbody.html>
  <http://december.com/html/4/element/tfoot.html>
  </http://december.com/html/4/element/tfoot.html>
</http://december.com/html/4/element/table.html>
[HTML] pobierz, plaintext 

Zuważ że w kodzie JS masz tak:

Natępnie tabela jest czyszczona:

Później jest tworzony element <tr>:

Wpisywane są do niego komórki. Początek komórki (<td>):

Zawartość przy pomocy innerHTML:

Zamykamy obiekt(y) <td> oraz <tr>:


Różne właściwości (np. td) możesz modyfikować np w następujący sposób:

Napisany przez: kukix 9.03.2006, 19:51:32

Dzieki TomASS, Twoja odpowiedź była pomocna.

jednak dalej nie moge "podpiąć" całego styla z pliku .css pod tabele. próbowałem tak:

jednak to nie działa...
więc wszystkie własciwości wpisałem "ręczniene".
Jest jednak problem z właściwościami, które mają w nazwie kreske (-) np: border-bottom to działa, ale nie to:
Ogólnie moge powiedzieć, że "zaadoptowanie" advAJAX'a do swojego projektu jest trudne dla średnio zaawansowanej osoby... podstawowym problemem jest (co zrobić tym AJAXEM, a co nie).

Mam w administracji dział newsy, w którym znajduje sie spis newsów i mały formularz do edycji i dodawania nowych newsów.
I tak zastanawiam sie, co zrobić tym AJAX'em.. co naprawde pomoże w pracy, a co bedzie przeszkadzało... Chciałem zrobić edycje danego newsa po dwukliknięciu na pozycje z listy... jednak narazie nie wiem, jak odświerzyć poprawioą liste... dodawanie równiez można by zrobić z wykorzystaniem AJAX'a...

Napisany przez: Diwi 9.03.2006, 20:56:41

z tego co się orientuje w javascripcie to zamiast:

Powinno być




Pozdrawiam

Napisany przez: TomASS 10.03.2006, 13:55:52

Użycie ajaxa ma sens, wtedy gdy pobieramy jakieś dane i wyświetlamy je na stronie przy czym zawartość "graficzna" strony nie zmienia się - takie coś ma miejsce w przypadku np. stronicowania, robienia map czy "dynamicznych" formularzy. Generalnie staraj się używać AJAXa tam gdzie to jest pomocne (np. w automatycznym dopełnianiu formularzy), ale muisz wziąść też pod uwagę użytkowników, którzy mają wyłączony JavaScript i umożliwić im prace bez AJAXa. Oto kilka przykładów na wykorzystanie:
http://www.backbase.com/demos/RSS/#%5b0
http://www.webpasties.com/xmlHttpRequest/step4/step4.html
https://www.paguna.com/
http://demo.script.aculo.us/

Napisany przez: kukix 11.03.2006, 18:56:29

Dzieki chlopaki za pomoc.. teraz już dużo mi sie rozjaśniło...

Przeglądałem przykłady zastosowania AJAX'a, bardzo dobry jest przykład menu z możliwością ręcznego sortowania. http://demo.script.aculo.us/ajax/sortable_elements ...
jest to chyba zbudowane na innym "silniku" AJAX. potrafił by ktoś zrobić coś takiego na AdvAJAX?

P.S. TomASS Twój przykład z formularzem rejestrującym nie działa.. (domyślam sie, że chyba nie jest on dokończony...)

Napisany przez: TomASS 11.03.2006, 22:58:33

Pewnie się da - można też użyć innych klas np http://www.modernmethod.com/sajax/index.phtml.


Sama rejestracja oczywiście, że nie działa Tutaj chodziło o walidację

Napisany przez: anAKiN 12.03.2006, 10:25:30

Bardzo ładnie, panowie

Napisany przez: TomASS 12.03.2006, 14:11:15

Dzisiaj przeczesując czeluścia internetu natrafiłem na http://labs.revision10.com/experiments/dat/dat_example.php - świetna sprawa oparta na AJAXie.

Anakin - jeśli ktoś jeszcze nie zdążył się połapać jest autorem klasy advAJAX

Napisany przez: kukix 13.03.2006, 20:53:10

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

plik zaladuj.js:

plik zaladuj.php:

[PHP] pobierz, plaintext 
<?php
 
$mysql_link = http://www.php.net/mysql_connect('host', 'login', 'haslo');
http://www.php.net/mysql_select_db('db');
    
$mysql_result = http://www.php.net/mysql_query('SELECT '.$wartosc.' FROM tbl_news WHERE id_news=3 LIMIT 0,1');
 
$row = http://www.php.net/mysql_fetch_assoc($mysql_result);
http://www.php.net/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?

Napisany przez: Vomit 13.03.2006, 21:33:13

A jak zrobic cos w stylu loadingu ale z procentami?

Np. chodzi mi, ze mam liste mailingowa i 300 maili do rozesłania.
Wpisuje tresc i naglowek, klikam Rozeslij, i chciałbym dowiadywac sie w jakim stopniu maile zostały juz rozesłane, czy to 30 maili (10%) czy tez 99% maili ?

Napisany przez: TomASS 13.03.2006, 22:07:32

Dla bardziej zainteresowanych napisałem kolejny przykład - tym razem oparty o klasę:

SAJAX
klasę to można ściągnąć ze ype = "GET";
sajax_init();
sajax_export("check_user");
sajax_handle_client_request();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <script>
       <?
       sajax_show_javascript();
       ?>
       function $(id){
   return document.getElementById(id);
 }
 
       function czy_istnieje(wartosc) {
        if(wartosc=='email'){
         alert("Ten e-mail isntieje już w bazie danych");
         $("login").style.border='1px solid #7F9DB9';
   $("email").style.border='1px solid red';
        }
        else if(wartosc=='login'){
         alert("Użytkownik o takim loginie jest już w bazie danych");
   $("login").style.border='1px solid red';
   $("email").style.border='1px solid #7F9DB9';
        }
        else if(wartosc=='OK') $("registerForm").submit();
       }

       
       function check() {
   login = $("login").value;
   email = $("email").value;
               x_check_user(login, email, czy_istnieje);
       }
       </script>

</head>
<body>
<form action="register.php" method="POST" id="registerForm">
Login: <input type="text" name="login" id="login"><br>
Hasło: <input type="text" name="email" id="email"><br>
<button onclick="check();">Wyslij</button>
</form>
</body>
</html>