emat jak najbardziej na czasie dla każdego webmastera. Żyjemy w czasach kiedy Ajax jest chlebem powszednim dla każdego profesjonalnego twórcy stron WWW. Jednak rzadko kto umie wykorzystać techniki Ajaxa w praktyce. Ten artykuł obrał za cel przynajmniej w części to zmienić. Całość artykułu i skryptu opierałem na rozwiązaniu Ajax’owym z W3School. Więc do rzeczy! By zrobić to u siebie musisz wykonać następujące czynności:
Tabela SQL
Najpierw potrzebna nam w bazie danych tabela zawierające dane, które mamy dynamicznie pobierać.
U mnie jest to w formie:
| id | imie | nazwisko | miasto |
| 1 | Adam | Kowalski | Warszawa |
| 2 | Joanna | Ogrodnik | Kraków |
| 3 | Paweł | Kostucha | Gniezno |
| 4 | Marta | Ługowska | Elbląg |
Pole id jest kluczem w tabeli i zawiera dodatkowy argument ? auto_increment.
Oznacza to (auto_icrement), że nie musimy za każdym razem gdy dodajemy nową osobę do bazdy danych, wpisywać kolejnego id. Skrypt zrobi to za nas.
Ustawiając PRIMARY KEY (klucz główny) na id, spełniamy wymóg jaki narzuca nam działanie relacyjnych baz danych, identyfikujemy wiersze w tabeli.
Główny plik - ajax.php
Skoro już mamy tabelę w bazie możemy zapełnić ją rekordami. Dane wpisujcie dowolnie 
Przystępujemy do drugiego kroku naszego tutoriala. Plik ajax.php:
Pierwsza i najważniejsza kwestia: połączenie z bazą danych. Robimy to w następujący sposób:
Pierwszą wywoływaną funkcją jest mysql_connect() gdzie parametrami są kolejno: host, użytkownik i hasło. W 99% przypadków w miejsce hostu należy wpisać po prostu localhost.
Potem wywołujemy funkcję mysql_select_db() która oznacza, jak nie trudno jest się domyśleć, wybranie bazy danych. Dalsza część kodu zaczynająca się od or die zakończy działanie skryptu i wyświetli napis znajdujący się pomiędzy cudzysłowami jeśli za pomocą wcześniej podanych informacji na temat użytkownika i hostu nie można połączyć się z bazą dany MySQL.
Jeśli dobrze wypełniłeś ten fragment kodu możemy przejść dalej:
Tego chyba nie muszę tłumaczyć. Oznacza to odwołanie się do pliku ajax.js. Możemy iść dalej.
Zajmiemy się teraz instrukcją liczącą rekordy w tabeli i wyświetlający odpowiednie napisy:
Co zrobiliśmy teraz?
1. Zmiennej o nazwie $liczRekordy nadaliśmy wartość ilości rekordów w tabeli o nazwie ajaxsql.
2. Sprawdziliśmy czy jest jakiś rekord w tej tabeli i wyświetliśmy napis pokazujący ile jest tych rekordów. W przeciwnym wypadku napisaliśmy napis ?Nie ma osób w bazie.?.
Przyszła pora na listę wyboru oraz tak zwany placeholder czyli miejsce gdzie będą pokazywać się rekordy z bazy danych. Dokonujemy tego za pomoca następującego kodu:
Pora na krótką analizę:
Najpierw tworzymy formularz za pomocą <form>, potem tworzymy listę wyboru <select> nadajemu mu m.in parametr onchange wywołujący funkcję JS showUser która pokazuje aktualnie wybraną wartość. Potem wywołujemy wszystkie rekordy z tabeli ‘ajaxsql‘ sortując rosnąco. Wyświetlania rekordów z bazy dokonujemy za pomocą pętli while. Następnie zamykamy listę i formularz oraz tworzymy placeholder, który niedługo zdefiniujemy w pliku ajax.js
No dobrze. Skończyliśmy pisać plik ajax.js . Twoja wersja tego pliku powinna wyglądać mniej więcej tak:
Plik Ajaxa - ajax.js
Plik ajax.js oparłem na rozwiązaniu W3School więc od razu zaznaczam, że nie ja jestem jego autorem. Lecz postaram się w miarę moich skromnych możliwości skutecznie go objaśnić. Nie będę teraz pokazywał poszczególnych cześci kodu, ponieważ śmiało możecie go pobrać z tego adresu.
Plik ten zawiera 3 funkcje. Pierwsza z nich to wspominana już funkcja showUser.
Sprawdza ona najpierw czy Twoja przeglądarka obsługuje HTTP Reguest, jeśli nie to wyświetli po prostu komunikat ?Browser does not support HTTP Request?. Używa także ostatniej w pliku funkcji czyli GetXmlHttpObject(), której działanie opisuje następne zdanie.
Jeśli przeglądarka nie obsługuje XMLHttpRequest (a obługują przeglądarki na Gecko) to używa ona ActiveXObject obsługiwanego przez popularnie nazywane badzIEwie czyli Internet Explorer.
Potem definiuję zmienną url, która będzie odwoływać się do pliku omówionego w następnym kroku ? getajax.php
Obsługuje ona też dalsze parametry adresu url definiując tablicę $_GET['q'].
Kolejna funkcja - stateChanged() definuje nasz opisany już placeholder.
To koniec pliku ajax.js Pora na następny krok.
Plik obsługiwany przez Ajax - getajax.php
Tutaj godne podkreślenia jest to że należy osobno łączyć się z bazą danych. Nie można używać żadnych z tych funkcji: include(), require(), require_once(), include_once(). Zatem… PHP czas zacząć!
Tym kodem zrobiliśmy następujące rzeczy: przekazaliśmy do zmiennej $q dane z tablicy $_GET['q'] czyli parametry url’a. Potem wywołaliśmy instrukcję łączenia się z bazą danych. W przypadku nie powodzenia skrypt wyświetli nam błąd o treść: ?Nie mogę się połączyć. Error: szczegóły_błędu?. A oto co wykonujemy potem:
Najpierw wyslaliśmy MIME informujący, że kod pobierany przez Ajax w przeglądarce będzie typu HTML, a kodowanie tekstu będzie w iso-8859-2. Następnie połączyliśmy się z bazą danych, wybraliśmy rekordy z tabeli i zapisaliśmy do zmiennej $result. Co robimy dalej?
Ponownie używamy pętli while do wyświetlenia pobranych rekordów z tabeli. Tym razem w instrukcji while ładnie wyświetlamy wszystkie informacje na temat osoby znajdującej się w stworzonej już przez nas tabeli ‘ajaxsql‘. Potem zamykamy połączenie z bazą danych.
Całość tego pliku przedstawiam poniżej:
Redakcja Reklama Kontakt Nasze portale i blogi
Wszelkie prawa zastrzeżone | Dział tematyczny Mindly.pl | Zasady korzystania & Polityka prywatności
