30.08.2012

Ajax. Kurs od podstaw. Część 5: Wyszukiwarka

1/14

gajdaw.pl/ajax/ajax-wyszukiwarka/print.html

Ajax. Kurs od podstaw. Część 5: Wyszukiwarka

Włodzimierz Gajda

Wyszukiwarki, które wykorzystują Ajax, stosują liczne udogodnienia. Częstymi rozwiązaniami są

podpowiadanie, automatyczne uruchamianie wyszukiwania po upływie kilku sekund oraz animacje.

Główną cechą, która odróżnia wyszukiwarkę Ajax-ową od rozwiązań tradycyjnych, nie są jednak atrakcje

wizualne, a fakt, że wyniki wyszukiwania pojawiają się bez przeładowania strony.

Spis treści

1. Działanie tradycyjnej wyszukiwarki

2. Działanie wyszukiwarki Ajax-owej

3. Implementacja wyszukiwarki tradycyjnej

3.1 Podstrony i adresy URL

3.2 Formularz wyszukiwania

3.3 Menu strony

3.4 Wyszukiwanie

3.5 Wybór treści witryny

4. Implementacja wyszukiwarki Ajax-owej

4.1 Skrypt

server.php

4.2 Zmiany w kodzie HTML

4.3 Przeładowanie fragmentu

5. Podsumowanie

1. Działanie tradycyjnej wyszukiwarki

Wyszukiwarka treści na witrynie WWW jest dostępna w postaci formularza, który posiada wiersz

30.08.2012

Ajax. Kurs od podstaw. Część 5: Wyszukiwarka

2/14

gajdaw.pl/ajax/ajax-wyszukiwarka/print.html

wprowadzania danych oraz przycisk Szukaj. Przykładowa witryna zawierająca wyszukiwarkę jest

przedstawiona na rysunku 1.

Rysunek 1. Witryna z formularzem do wyszukiwania treści

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 zawierać tytuły podstron wraz z informacją o tym, ile razy podane

słowo występuje w treści (rysunek 2).

30.08.2012

Ajax. Kurs od podstaw. Część 5: Wyszukiwarka

3/14

gajdaw.pl/ajax/ajax-wyszukiwarka/print.html

Rysunek 2. Wyniki wyszukiwania słowa

nie

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 rysunku 2

przechodzimy z powrotem do strony z rysunku 1 (ewentualnie z treścią innej piosenki).

Rozwiązanie tradycyjne składa się więc z dwóch rodzajów podstron. Pierwszym rodzajem są podstrony z

tekstem wybranej piosenki (rysunek 1), a drugim — podstrony prezentujące wyniki wyszukiwania

(rysunek 2).

2. Działanie wyszukiwarki Ajax-owej

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 rysunku 3 element ten został otoczony obramowaniem.

30.08.2012

Ajax. Kurs od podstaw. Część 5: Wyszukiwarka

4/14

gajdaw.pl/ajax/ajax-wyszukiwarka/print.html

Rysunek 3. Wyszukiwarka zaimplementowana z wykorzystaniem Ajax-a

Wyszukiwarkę Ajax-ową należy zaimplementować w taki sposób, by po wyłączeniu w JavaScript działała

w sposób tradycyjny.

3. Implementacja wyszukiwarki tradycyjnej

3.1 Podstrony i adresy URL

Przygotowanie wyszukiwarki rozpoczynamy od ustalenia stosowanych adresów URL.

Strony pierwszego rodzaju prezentują tekst wybranej piosenki (rysunek 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 pt. Chodzi lisek koło drogi, gdyż piosenka ta ma identyfikator 1, zaś adres:

30.08.2012

Ajax. Kurs od podstaw. Część 5: Wyszukiwarka

5/14

gajdaw.pl/ajax/ajax-wyszukiwarka/print.html

index.php?id=2&id2=5

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

Strony drugiego rodzaju prezentują wyniki wyszukiwania (rysunek 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

3.2 Formularz wyszukiwania

Formularz wyszukiwania jest przetwarzany przez skrypt

index.php

. Zawiera on jedno pole

wprowadzania danych o nazwie

szukaj

i jedno pole ukryte o nazwie

id

:

<form action="index.php" method="get">
<div>
<input name="szukaj" />
<input type="hidden" name="id" value="3" />
<input type="submit" value="szukaj" />
</div>
</form>

W ten sposób, po zatwierdzeniu, formularz zostanie przekazany pod adres:

index.php?id=3&szukaj=...

W miejsce trzech kropek przeglądarka umieści wyraz wprowadzony w formularzu.

3.3 Menu strony

30.08.2012

Ajax. Kurs od podstaw. Część 5: Wyszukiwarka

6/14

gajdaw.pl/ajax/ajax-wyszukiwarka/print.html

Menu strony powstaje na podstawie pliku

00index.log

. Każda linijka pliku zawiera dane jednej piosenki:

tytuł oraz nazwę pliku tekstowego z treścią piosenki:

Jawor, jawor|jawor_jawor.txt
Krasnoludki|krasnoludki.txt
Ojciec i syn|ojciec_i_syn.txt
...

Plik ten jest przetwarzany przez funkcję

podaj_dane()

przedstawioną na listingu 1. Wynikiem działania

funkcji

podaj_dane()

jest tablica asocjacyjna, która pod indeksem

ile

zawiera liczbę piosenek, a pod

indeksami

nazwyplikow

oraz

tytuly

— tablice z nazwami plików i tytułami piosenek.

function podaj_dane($ANazwapliku)
{
$tmp = array();
$p = file($ANazwapliku);
$pc = count($p);
$tmp['ile'] = $pc;

$tytuly = array();
$nazwyplikow = array();

for ($i = 0; $i < $pc; $i++) {
$e = explode('|', trim($p[$i]));
$tytuly[$i] = $e[0];
$nazwyplikow[$i] = $e[1];
}

$tmp['nazwyplikow'] = $nazwyplikow;
$tmp['tytuly'] = $tytuly;

return $tmp;
}

Listing 1. Krojenie pliku

00index.log

Wykorzystując funkcję

podaj_dane()

menu strony drukujemy w pętli

for

:

<ul id="menu">
<?php

require_once 'funkcje.inc.php';
$dane = podaj_dane('00index.log');

for ($i = 0; $i < $dane['ile']; $i++) {
echo '<li><a href="index.php?id=2&amp;id2=';
echo $i + 1;
echo '">';
echo $dane['tytuly'][$i];
echo '</a></li>' . "\n";
}

30.08.2012

Ajax. Kurs od podstaw. Część 5: Wyszukiwarka

7/14

gajdaw.pl/ajax/ajax-wyszukiwarka/print.html

?>
</ul>

3.4 Wyszukiwanie

Za wyszukiwanie danych odpowiada przedstawiona na listingu 2 funkcja

wyniki_szukaj()

. Posiada

ona dwa parametry. Pierwszy, szukane słowo

$ASzukaj

, pochodzi z formularza. Drugi, dane

$ADane

,

są wynikiem działania funkcji

podaj_dane()

.

function wyniki_szukaj($ASzukaj, $ADane)
{
$dane = array();
$dane[0] = array();
$dane[1] = array();
$dane[2] = array();

for ($i = 0; $i < $ADane['ile']; $i++) {
$t = file_get_contents('txt/' . $ADane['nazwyplikow'][$i]);

//tytul
$dane[0][$i] = $ADane['tytuly'][$i];

//id
$dane[1][$i] = $i + 1;

//liczba wystapien slowa
$dane[2][$i] = substr_count($t, $ASzukaj);
}

array_multisort(
$dane[2], SORT_DESC, SORT_NUMERIC,
$dane[0], SORT_ASC, SORT_STRING,
$dane[1]
);

if ($dane[2][0] == 0) {

//nic nie znaleziono
return false;

} else {

for ($i = 0; ($i < $ADane['ile']) && ($dane[2][$i] > 0); $i++);
$dane['ile'] = $i;
$dane['pokazpelnalista'] = false;

$dane[0] = array_slice($dane[0], 0, $i, true);
$dane[1] = array_slice($dane[1], 0, $i, true);
$dane[2] = array_slice($dane[2], 0, $i, true);

return $dane;
}
}

30.08.2012

Ajax. Kurs od podstaw. Część 5: Wyszukiwarka

8/14

gajdaw.pl/ajax/ajax-wyszukiwarka/print.html

Listing 2. Funkcja

wyniki_szukaj()

Gdy podane słowo nie zostało znalezione, to wynikiem funkcji

wyniki_szukaj()

jest

false

. W

przeciwnym wypadku wynikiem funkcji jest tablica dwuwymiarowa, która zawiera informacje o tym, w

których piosenkach ile razy podane słowo wystąpiło. Po wywołaniu:

$w = wyniki_szukaj('ala', $dane);

tablica

$w

będzie zawierała trzy składowe:

$w[0]

,

$w[1]

oraz

$w[2]

. Pierwsza z nich będzie tablicą

zawierającą tytuły piosenek. Druga — tablicą zawierającą identyfikatory piosenek, a trzecia — tablicą

zawierającą liczbę wystąpień wyrazu

ala

w danej piosence. Jeśli:

$w[0][3] = 'Krasnoludki'
$w[1][3] = '6'
$w[2][3] = '17'

to wynika z tego, że identyfikatorem piosenki Krasnoludki jest 6 oraz, że szukane słowo występuje w

piosence Krasnoludki 17 razy.

Wyniki wyszukiwania ustalone przez funkcję

wyniki_szukaj()

przekształcamy w listę

ol

. Zadanie to

realizuje przedstawiona na listingu 3 funkcja

wyniki_html()

.

function wyniki_html($AWyniki)
{
if ($AWyniki) {
$wynik = '<ol>';
for ($i = 0; $i < $AWyniki['ile']; $i++) {
$wynik .=
'<li><a href="index.php?id=2&amp;id2=' .
$AWyniki[1][$i] .
'">' .
$AWyniki[0][$i] .
'</a> (' .
$AWyniki[2][$i] .
')' .
'</li>';
}
$wynik .= '</ol>';
} else {
$wynik = 'Nic nie znaleziono!';
}
return $wynik;
}

Listing 3. Funkcja przekształcająca wyniki wyszukiwania w listę

ol

30.08.2012

Ajax. Kurs od podstaw. Część 5: Wyszukiwarka

9/14

gajdaw.pl/ajax/ajax-wyszukiwarka/print.html

3.5 Wybór treści witryny

Skrypt

index.php

zajmuje się wyborem odwiedzonej podstrony oraz przygotowaniem informacji.

Wybór podstrony następuje na podstawie zmiennej URL o nazwie id. Gdy

id

jest równe 2, to wyświetlany

jest tekst odpowiedniej piosenki. Jeśli natomiast

id

wynosi 3, wówczas wyświetlane są wyniki

wyszukiwania. Zarys skryptu

index.php

jest przedstawiony na listingu 4.

<div id="content">
<?php
$akcja = 1;

if (empty($_GET)) {
$_GET['id'] = '2';
$_GET['id2'] = '1';
}

//walidacja zmiennych URL
if (isset($_GET['id']) && str_ievpifr(...)) {

$akcja = $_GET['id'];

switch($_GET['id']) {

case 2:
...
$wiersz = file_get_contents(...);
echo nl2br($wiersz);
break;

case 3:
...
$w = wyniki_szukaj($_GET['szukaj'], $dane);
echo wyniki_html($w, $_GET['szukaj']);
break;
}
};

if ($akcja == 1) {
echo '<p>Błąd!</p>';
}
?>
</div>

Listing 4. Zarys skryptu

index.php

z tradycyjną wyszukiwarką

Domyślna stroną, jaką ujrzy użytkownik jest strona błędu (

$akcja == 1

). Stronę z tekstem piosenki lub

z wynikami wyszukiwania wyświetlamy wyłącznie wtedy, gdy proces walidacji zmiennych URL zakończy

się sukcesem.

Jeśli tablica

$_GET

jest pusta, wówczas instrukcjami:

30.08.2012

Ajax. Kurs od podstaw. Część 5: Wyszukiwarka

10/14

gajdaw.pl/ajax/ajax-wyszukiwarka/print.html

$_GET['id'] = '2';
$_GET['id2'] = '1';

wymuszamy przejście do strony z tekstem pierwszej piosenki.

4. Implementacja wyszukiwarki Ajax-owej

4.1 Skrypt

server.php

Pracę nad rozwiązaniem Ajaksowym rozpoczynamy od przygotowania skryptu

server.php

przedstawionego na listingu 5. Skrypt ten odpowiada za wyszukiwanie podanego słowa. Wyszukiwane

słowo jest przekazywane do skryptu jako zmienna URL o nazwie

co

. Wyniki wyszukiwania są zwracane

w postaci listy

ol

.

<?php
require_once 'walidacja.inc.php';
require_once 'funkcje.inc.php';

$dane = podaj_dane('00index.log');

if (
isset($_GET['co']) &&
(strlen($_GET['co']) < 20) &&
preg_match('/^[a-z]+$/', $_GET['co'])
) {
header('Content-Type: text/html; charset=utf-8');

$w = wyniki_szukaj($_GET['co'], $dane);
echo wyniki_html($w, $_GET['co']);

} else {
header('HTTP/1.x 404 Not Found');
}
?>

Listing 5. Skrypt

server.php

przekazujący wyniki wyszukiwania do obiektu

XMLHttpRequest

Skrypt

server.php

możemy przetestować wprowadzając w polu

Adres

przeglądarki następujący adres

URL-e:

server.php?co=ja

W wyniku powinniśmy ujrzeć listę

ol

prezentującą wyniki wyszukiwania słowa

ja

.

30.08.2012

Ajax. Kurs od podstaw. Część 5: Wyszukiwarka

11/14

gajdaw.pl/ajax/ajax-wyszukiwarka/print.html

4.2 Zmiany w kodzie HTML

Formularz Ajax-owej wyszukiwarki zawiera obsługę zdarzenia

onsubmit

.

<form
action="index.php" method="get"
onsubmit="pokaz_wyniki(); return false">
<div>
<input id="sz" name="szukaj" />
<input type="hidden" name="id" value="3" />
<input type="submit" value="szukaj" />
</div>
</form>

Wywoływana funkcja

pokaz_wyniki()

jest zdefiniowana w pliku

ajax.js

dołączonym w nagłówku

strony:

<script type="text/javascript" src="xmlhttprequest.js"></script>
<script type="text/javascript" src="ajax.js"></script>

Wyszukiwanie nie może powodować przeładowania strony WWW. Odpowiada za to instrukcja

return

false

występująca w obsłudze zdarzenia

onsubmit

. Jeśli kod JavaScript wywoływany w zdarzeniu

onsubmit

zwraca wartość

false

, to przeglądarka nie wysyła formularza na serwer. Takie zachowanie

umożliwia nie tylko wykonanie Ajaksowej wyszukiwarki ale także walidację formularza.

Wyniki wyszukiwania będą umieszczane w elemencie:

<div id="wyniki"></div>

Element ten jest początkowo niewidoczny. Odpowiadają za to style CSS:

#wyniki {
display: none;
}

4.3 Przeładowanie fragmentu

Za wyświetlenie wyników wyszukiwania odpowiadają dwie funkcje JavaScript:

pokaz_wyniki()

oraz

odbierz_dane()

:

30.08.2012

Ajax. Kurs od podstaw. Część 5: Wyszukiwarka

12/14

gajdaw.pl/ajax/ajax-wyszukiwarka/print.html

Pierwsza z nich,

pokaz_wyniki()

wykonuje następujące akcje:

tworzy obiekt

XMLHttpRequest

,

pobiera do zmiennej

co

wyszukiwane słowo, które zostało wprowadzone w formularzu,

ustala adres URL wyników wyszukiwania (

'server.php?co=' + co

),

ustala funkcję obsługi zdarzenia

onreadystatechange

,

oraz rozpoczyna transfer danych:

function pokaz_wyniki()
{
if (r = getXMLHttpRequest()) {
var co;
co = document.getElementById('sz').value;

r.open('GET', 'server.php?co=' + co);
r.onreadystatechange = odbierz_dane;
r.send(null);
}
}

Funkcja

odbierz_dane()

odpowiada włączenie widoczności elementu

div#wyniki

przeznaczonego

na wyniki wyszukiwania oraz za umieszczenie w nim treści zwróconych przez skrypt

server.php

:

function odbierz_dane()
{
if (r.readyState == 4 && r.status == 200) {
var wyn;
wyn = document.getElementById('wyniki');
wyn.innerHTML = r.responseText;
wyn.style.display = 'block';
}
}

5. Podsumowanie

Działanie wyszukiwarki Ajaksowej możemy sprawdzić odwiedzając witrynę Bartosza Danowskiego

http://danowski.pl

(rysunek 4) oraz blog Piotra Petrusa

http://perfectionorvanity.com

(rysunek 5).

30.08.2012

Ajax. Kurs od podstaw. Część 5: Wyszukiwarka

13/14

gajdaw.pl/ajax/ajax-wyszukiwarka/print.html

Rysunek 4. Witryna Bartosza Danowskiego

Rysunek 5. Blog Piotra Petrusa

Z racji na niewielką ilość dostępnej przestrzeni liczbę wyników wyszukiwania prezentowaną bez

przeładowania strony należy ograniczyć do kilku pozycji. Do pełnej listy może prowadzić hiperłącze:

zobacz wszystkie wyniki

.

Zwróć uwagę, na ustalenie kodowania znaków w skrypcie

server.php

:

header('Content-Type: text/html; charset=utf-8');

Wywołanie funkcji

header()

będzie konieczne, jeśli zechcesz stosować inne kodowanie niż utf-8.

lp.

Przykład

30.08.2012

Ajax. Kurs od podstaw. Część 5: Wyszukiwarka

14/14

gajdaw.pl/ajax/ajax-wyszukiwarka/print.html

1.

Wyszukiwarka tradycyjna

2.

Wyszukiwarka wykorzystująca Ajax

3.

Wyszukiwarka Ajax-owa z ograniczeniem liczby wyników wyszukiwania

4.

Wyszukiwarka z zaznaczaniem wyrazu

5.

Wyszukiwarka Ajax-owa z zaznaczaniem wyrazu

Tabela 1. Przykłady do pobrania

lp.

Adres

1.

Strona domowa Bartosza Danowskiego

2.

Blog Piotra Petrusa pt. Perfection or vanity

Tabela 2. Adresy

Reklama