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.
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.
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.
...
Loading...
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.
Po wprowadzeniu
w formularzu hasła magazyn internet, wyniki
wyszukiwania pojawiają się poniżej formularza, co
ilustruje rysunek 3.
Wyszukiwarka zawiera kontrolki
zaznaczone na rysunku 4. Pozwalają one zmienić
liczbę wyświetlanych wyników.
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.
function OnLoad()
{
options = new GsearcherOptions();
options.setExpandMode(GSearch Control.EXPAND_MODE_OPEN);
var searchControl = new google.search.SearchControl();
searchControl.addSearcher(new google.search.WebSearch(), options);
searchControl.draw(document. getElementById(\"searchcontrol\"));
searchControl.execute(\"Internet Maker\");
}
Modyfikacja wyglądu
Wygląd wyszukiwarki oraz wyników wyszukiwania
modyfikujemy stylami CSS. Umożliwiają to
liczne klasy zawarte w kodzie HTML, zwracanym
przez Google. Najważniejsze są:
- .gsc-search-box – formularz wyszukiwania,
- .gsc-resultsHeader – nagłówek z ikonami zaznaczonymi na rysunku 4,
- .gsc-result – pojedynczy wynik wyszukiwania,
- .gsc-cursor-box – wskaźnik stronicowania wyników,
- .gs-title – tytuł wyniku,
- .gs-snippet – opis wyniku,
- .gs-visibleUrl – adres URL wyniku.
Po zastosowaniu stylów z listingu 3:
.gsc-search-box {
border: 2px solid red;
}
.gsc-resultsHeader {
border: 2px solid blue;
}
.gsc-result {
border: 2px solid green;
}
.gsc-cursor-box {
border: 2px solid yellow;
}
.gs-title {
font-family: \"Trebuchet MS\", sansserif;
}
.gs-snippet {
font-family: Georgia, serif;
}
.gs-visibleUrl {
font-family: \"Courier New\", mono
space;
}
wyniki
wyszukiwania będą wyglądały tak jak na rysunku
5. Do dokładnej analizy klas HTML w wynikach
wyszukiwania warto wykorzystać Inspektora DOM.
Pozwala on na wędrówkę po drzewie dokumentu.
W ten sposób poznamy dokładną strukturę
zwracanego kodu HTML, wszystkie identyfikatory
oraz klasy. Działanie inspektora DOM na wynikach
wyszukiwania jest przedstawione na rysunku 6.
Informacje o wykorzystaniu technologii Google
Licencja użytkownika usług Google AJAX Search
API nakazuje umieszczenie logo Google na każdej
stronie stosującej API. Zadanie to wykorzystujemy,
wywołując metodę getBranding(), jak to pokazano
na listingu 4. Jest to szczególnie istotne wtedy, gdy
stosujemy style CSS, które ukrywają logo Google.
...
Loading...
Hiperłącza
Przedstawiona na listingu 2 metoda execute()
może być wywoływana ręcznie. Na przykład w obsłudze
hiperłączy:
Nikon D80
W tym celu wystarczy wewnątrz metody
OnLoad() zapamiętać referencję do obiektu search-
Control. W takim przypadku możemy zrezygnować
z wyświetlania formularza do wyszukiwania:
form.gsc-search-box {
display: none;
}
Pamiętajmy, że w tym przypadku musimy
samodzielnie wyświetlić logo Technologii Google.
...
Loading...
Usługa REST
Google AJAX Search API pozwala na przeszukiwanie
zasobów wyszukiwarki Google nie tylko
z wykorzystaniem JavaScriptu, ale także przy użyciu
skryptów wykonywanych po stronie serwera,
a więc w PHP, Perlu, Ruby czy Pythonie.
Wyszukiwanie w sieci WWW realizuje skrypt
o adresie:
http://ajax.googleapis.com/ajax/services/search/web
Ma on dwa obowiązkowe parametry: v oraz q.
Parametr v ustala wersję oprogramowania (obecny
interfejs Google AJAX Search API jest opatrzony
numerem wersji 1.0), zaś q zawiera wyszukiwaną
frazę. Adres: http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=ala
zwróci wyniki wyszukiwania słowa ala w formacie
JSON.
Listing 6 przedstawia skrypt, który wyszukuje
frazę phpDocumentator.
responseData->results[0]->url;
echo $json->responseData->results[0]->title;
echo $json->responseData->results[0]->content;
?>
Korzystając z biblioteki
CURL, przekazujemy informacje o adresie, z którego
nadchodzi żądanie (REFERER). Odebrane wyniki
konwertujemy na obiekty:
$json = json_decode($body);
po czym wyświetlamy:
echo $json->responseData->results[0]->url;
Wszystkie wyniki wyszukiwania są zawarte
w kolejnych elementach tablicy $json->responseData->results. Każdy wynik ma następujące
składowe:
- unescapedUrl
- url
- visibleUrl
- cacheUrl
- title
- titleNoFormatting
- content
Odebrane wyniki możemy wyświetlić, stosując
dowolny kod HTML, jak to zostało przedstawione
na rysunku 7.
Ładowanie bibliotek
Warto zwrócić uwagę, że w ramach usług
Google AJAX Search API firma Google zapewnia
dostęp nie tylko do własnego kodu, ale także do
najpopularniejszych bibliotek JavaScript. Funkcja
load(), której użyliśmy na listingu 1:
google.load(\"search\", \"1\");
pozwala na załadowanie bibliotek jQuery,
prototype, script.aculo.us, MooTools
oraz dojo:
google.load(\"jquery\", \"1.2.3\");
google.load(\"prototype\", \"1.6\");
google.load(\"scriptaculous\", \"1.8.1\");
google.load(\"mootools\", \"1.11\");
google.load(\"dojo\", \"1.1.1\");
Skrypt przedstawiony na listingu 7 nie wymaga
umieszczania na serwerze biblioteki jQuery, co
pozwoli zmniejszyć obciążenie łącza.
...
Wskaż tekst myszką!
Jak widać, Google AJAX Search API zezwala na
dużą dowolność w konstruowaniu własnej wyszukiwarki,
zarówno w kwestii jej osadzenia na stronie,
jak i doboru uruchamianych skryptów. Jest to idealne
rozwiązanie dla każdego webmastera, który chciałby
wzbogacić swój serwis o wyszukiwarkę od firmy
Google.
