background image

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

background image

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

background image

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.

background image

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:

background image

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

background image

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";
}

background image

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;
  }
}

background image

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

background image

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:

background image

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

.

background image

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

:

background image

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

background image

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

background image

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