Blog Leszczynowa

Efektowna wyszukiwarka Google na twojej stronie Google AJAX Search API w praktyce

Efektowna wyszukiwarka Google na twojej stronie Google AJAX Search API w praktyce Google AJAX Search API to biblioteka JavaScript zapewniająca programistyczny dostęp do zasobów wyszukiwarki Google. Początkowo dostępne wyłącznie jako zestaw skryptów JavaScript, obecnie Google AJAX Search API stosuje model REST. Pozwala to na implementację wyszukiwarek zarówno w JavaScript/AJAX, jak i po stronie serwera, np. w PHP.

Włodzimierz Gajda

1 2 »

Biblioteka Google AJAX Search API zastąpiła wycofane pod koniec 2006 roku rozwiązanie o nazwie Google SOAP Search API. Obecny interfejs API wyszukiwarki Google jest dostępny pod dwoma postaciami: jako biblioteka JavaScript oraz jako zestaw adresów URL, realizujących usługę w modelu REST.

Biblioteka JS pozwala na osadzenie wyszukiwarki WWW w kodzie HTML, natomiast model REST udostępnia zasoby Google skryptom przetwarzanym po stronie serwera (np. PHP, Perl).

Usługi Google AJAX Search API są bezpłatne, lecz wymagają rejestracji i generowania kluczy. Po utworzeniu konta Google (możemy oczywiście wykorzystać istniejące konto Google Analitycs, Google AdSense czy Gmail) należy odwiedzić stronę http://code.google.com/apis/ajaxsearch/signup.html, przedstawioną na rysunku 1.

Rys. 1. Generowanie klucza aplikacji (http://code.google.com/apis/ajaxsearch/signup.html) Rys. 1. Generowanie klucza aplikacji (http://code.google.com/apis/ajaxsearch/signup.html)

W formularzu wprowadzamy adres URL aplikacji, która będzie wykorzystywała Google API, np.: http://example.com/szukaj

Powyższy adres pozwoli na korzystanie z wygenerowanego klucza na stronach, których adres rozpoczyna się od http://example.com/szukaj, np.:

http://example.com/szukaj/index.html
http://example.com/szukaj/app1/index.php
http://example.com/szukaj/a/b/c/

Ajax i JavaScript

Wyszukiwarkę AJAX-ową osadzamy w kodzie HTML w dwóch miejscach:

  • w nagłówku strony (tj. pomiędzy znacznikami ) dodajemy skrypt JavaScript,
  • w treści strony (tj. pomiędzy znacznikami ) dodajemy element div przeznaczony na wyszukiwarkę.

Pierwszy ze znaczników script widocznych na listingu 1 odpowiada za ustalenie klucza aplikacji (key=abc...). Jako wartość parametru key należy oczywiście podać klucz wygenerowany na stronie z rysunku 1.

[+]
Listing 1. Pierwszy skrypt stosujący Google AJAX Search API
HTML
Pobierz 
 1. <html>
 2. <head>
 3. ...
 4. <script src="http://www.google.com/jsapi?key=abc..."
    type="text/javascript"></script>
 5. <script type="text/javascript">
 6.  google.load("search", "1");
 7.  function OnLoad()
 8.  {
 9.   var searchControl = new google.search.SearchControl();
10.   searchControl.addSearcher(new google.search.WebSearch());
11.   searchControl.draw(document.getElementById("searchcontrol"));
12.  }
13.  google.setOnLoadCallback(OnLoad);
14. </script>
15. </head>
16. <body>
17.  <div id="searchcontrol">Loading...
18.  </div>
19. </body>
20. </html>

Kod JS zawarty w drugim elemencie script zawiera:

  • instrukcję google.load(), która odpowiada za załadowanie biblioteki,
  • definicję funkcji OnLoad(),
  • wywołanie funkcji OnLoad() po załadowaniu dokumentu (instrukcja google.setOnLoadCallback()).

Wewnątrz funkcji OnLoad() tworzymy kontrolkę do wyszukiwania oraz ustalamy, że ma ona być wyświetlana wewnątrz elementu HTML o identyfikatorze searchcontrol. Decyduje o parametrze funkcji getElementById().

Strona zawierająca powyższy skrypt jest przedstawiona na rysunku 2.

Rys. 2. Strona z listingu 1 Rys. 2. Strona z listingu 1

Po wprowadzeniu w formularzu hasła magazyn internet, wyniki wyszukiwania pojawiają się poniżej formularza, co ilustruje rysunek 3.

Rys. 3. Strona z rysunku 2 po wyszukaniu hasła magazyn internet Rys. 3. Strona z rysunku 2 po wyszukaniu hasła magazyn internet

Wyszukiwarka zawiera kontrolki zaznaczone na rysunku 4. Pozwalają one zmienić liczbę wyświetlanych wyników.

Rys. 4. Kontrolki do modyfikacji wyglądu wyszukiwarki Rys. 4. Kontrolki do modyfikacji wyglądu wyszukiwarki

Automatyczne rozwijanie i wyszukiwanie

Działanie wyszukiwarki możemy modyfikować programowo. Pozwalają na to opcje klasy WebSearch oraz metody klasy SearchControl. Skrypt przedstawiony na listingu 2 będzie automatycznie (tj. po wejściu na stronę) rozpoczynał wyszukiwanie. Wyniki wyszukiwania będą prezentowane w postaci rozwiniętej listy.

[+]
Listing 2. Programowe rozwijanie listy wyników i wyszukiwanie
JavaScript
Pobierz 
1. function OnLoad()
2. {
3.   options = new GsearcherOptions();
4.   options.setExpandMode(GSearch Control.EXPAND_MODE_OPEN);
5.   var searchControl = new google.search.SearchControl();
6.   searchControl.addSearcher(new google.search.WebSearch(), options);
7.   searchControl.draw(document. getElementById("searchcontrol"));
8.   searchControl.execute("Internet Maker");
9. }
15 grudnia 2008
1 2 »

Powiązane publikacje

Ciekawe patenty na AJAX-a

Ciekawe patenty na AJAX-a

 
Skomentuj
ten artykuł

Komentarzy: 2

Kod obrazkowy
(Kliknij, aby zmienić)
 
Przejdż do tego postu na forum piątek, 19.12.2008 11:18Adrian J

To pozwala na przeszukanie tylko internetu. Jednak jest pewien przypadek jest pewnie jakas funkcja ktora pozwoli na przeszukanie w googlach wedlug slowa tylko twojej strony www. Trzeba po prostu przejrzec API Googla dla tego modulu. Np jak wpiszesz w wyszukiwarce "wifi site:http://wifi.owe.pl" wyszuka wszystkie wyniki dla slowa wifi ze strony wifi.owe.pl

Przejdż do tego postu na forum wtorek, 16.12.2008 22:56rafał

Czy pozwala to na przeszukiwanie tylko internetu czy też własnej strony jak starsze rozwiązania.
Nie wiem czemu ale pana artykuły zawsze ciężko mi się czyta, takie lekko chaotyczne i niedopowiedziane smile.gif

Zobacz wszystkie komentarze »

Autor

Włodzimierz Gajda

Artykuły tego autora:

Pozostałe publikacje

Pokaż, do czego używasz Linuksa - i wygraj!

Pokaż, do czego używasz Linuksa - i wygraj!

Novell wraz z grupą partnerów zaprasza wszystkich chętnych do udziału w międzynarodowym konkursie (www.howdoyoulinux.com) na krótki film wideo w najciekawszy sposób przedstawiający zastosowania systemu Linux.

Newsletter

Jesli chcesz być na bieżąco z tym co się dzieje na stronie magazynu INTERNET Maker zapisz się do naszego newslettera.