AJAX Kurs od podstaw - wyszukiwarka

Działanie tradycyjnej wyszukiwarki

Wyszukiwarka treści na witrynie WWW jest dostępna w postaci formularza, który zawiera wiersz wprowadzania danych oraz przycisk Szukaj. Przykładowa witryna zawierająca wyszukiwarkę jest przedstawiona na rys. 1.

Rys. 1. Witryna z formularzem do wyszukiwania treści

Rys. 2. Wyniki wyszukiwania słowa nie

Użytkownik wprowadza w formularzu dowolny wyraz, na przykład nie, po czym naciska przycisk Szukaj. Działanie takie powoduje przejście do nowej strony WWW, która zawiera wyniki wyszukiwania. Lista wyników wyszukiwania może obejmować tytuły podstron wraz z informacją o tym, ile razy podane słowo występuje w treści (rys. 2).

Znalezione informacje są przedstawiane w postaci listy hiperłączy. Po wybraniu jednego z hiperłączy przechodzimy do strony, która będzie zawierała wyszukiwane słowo. Innymi słowy ze strony z rys. 2 przechodzimy z powrotem do strony z rys. 1 (ewentualnie z treścią innej piosenki).

Rozwiązanie tradycyjne składa się z dwóch rodzajów podstron. Pierwszym rodzajem są podstrony z tekstem wybranej piosenki (rys. 1), a drugim podstrony prezentujące wyniki wyszukiwania (rys. 2).

Rys. 3. Wyszukiwarka zaimplementowana z wykorzystaniem technologii Ajax

Działanie wyszukiwarki ajaksowej

Gdy wyszukiwarkę wzbogacimy o technologię Ajax, wówczas wyniki wyszukiwania są prezentowane bez przeładowania strony. Po naciśnięciu przycisku Szukaj na stronie pojawia się nowy element div, zawierający wyniki wyszukiwania. Na rys. 3 element ten został otoczony obramowaniem.

Wyszukiwarkę ajaksową należy zaimplementować w taki sposób, by po wyłączeniu w JavaScripcie działała w sposób tradycyjny.

Implementacja wyszukiwarki tradycyjnej

Podstrony i adresy URL

Przygotowanie wyszukiwarki rozpoczynamy od ustalenia stosowanych adresów URL. Strony pierwszego rodzaju prezentują tekst wybranej piosenki (rys. 1). Adresy URL przyjmą postać:

index.php?id=2&id2=XXX

gdzie XXX jest identyfikatorem piosenki. Na przykład adres:

index.php?id=2&id2=1

dotyczy piosenki podtytułem Chodzi lisek koło drogi, gdyż piosenka ta ma identyfikator 1, zaś adres:

index.php?id=2&id2=5

wskazuje stronę z tekstem piosenki Kółko graniaste ( identyfikator 5).

Strony drugiego rodzaju prezentują wyniki wyszukiwania (rys. 2). Stosowane adresy mają strukturę:

index.php?id=3&szukaj=YYY

gdzie YYY jest wyszukiwanym słowem. Na przykład wyniki wyszukiwania słowa nie są dostępne pod adresem:

index.php?id=3&szukaj=nie

zaś wyniki wyszukiwania słowa tak pod adresem:

index.php?id=3&szukaj=tak