jQuery + AJAX + (Google Search API || Yahoo Search API)

Как понятно из заголовка – данный пост будет посвящен работе с Google Search API и Yahoo Search API посредством JavaScript бибилотеки jQuery.

Материалы данной статьи включены в учебник «jQuery для начинающих». Учебник распространяется бесплатно, и сопровождается интерактивными примерами.

Yahoo Search AJAX API

Начну с использования Yahoo Search API. И на то есть 2 причины:

1. Сервис Google более глючная штука нежели у Yahoo (зелен он еще)
2. Yahoo не обращает внимание на атрибут ref=”nofollow”, за счет чего его выдача более полная

Итак приступим, для начала нам понадобиться зарегистрировать аккаунт Yahoo и получить “Application Id”.

Вашей “любимой” закладкой на время станет http://developer.yahoo.com/search/.

Далее решим для себя какой поиск нас интересует (все ссылки на соответствющие разделы документации по Yahoo API):

• Audio Search
  • Album Search
  • Artist Search
  • Download Location
  • Song Search
• Autos Custom
• Content Analysis
• Image Search
• Local Search
  • Local Search V3
• MyWeb 2.0
  • Related Tags
  • Tag Search
  • URL Search
• News Search
• Site Explorer
  • Pages
  • Inlinks
  • Update Notification
• Video Search
• Web Search
  • Web Search
  • Context Search
  • Related Queries
  • Spelling Suggest

Их много, но выберем один – Web Search, на нем и будем дальше эксперементировать.

Составляем REST запрос

По ссылкам приведенным выше получаем базу нашего URL, для Web Search это:
http://search.yahooapis.com/WebSearchService/V1/webSearch

Добавляем Ваш API ID appid=YahooDemo и сам запрос query=PHP (прежде чем добавить запрос его необходимо подготовить используя функцию encodeURIComponent)

В итоге получаем следующий URL:

http://search.yahooapis.com/WebSearchService/V1/webSearch?appid=YahooDemo&query=PHP

Это наш необходимый минимум, но XML – это не самый удобоваримый формат для JavaScript’a, нам больше симпатичен JSON, и даже лучше JSONP. Для этого нам необходимо указать формат вывода используя параметр output. Для использования прелестей JSONP нам необходимо так же указать имя callback функции, и теперь наш URL будет выглядеть следующим образом:

http://search.yahooapis.com/WebSearchService/V1/webSearch?appid=YahooDemo&output=json&callback=foo&query=PHP

JavaScript

А теперь возьмем jQuery и получим следующую конструкцию:

$.getJSON("http://search.yahooapis.com/WebSearchService/V1/webSearch?appid=YahooDemo&output=json&query=PHP&callback=?",
function(data){
    var ul = document.createElement("ul");
    $.each(data.ResultSet.Result, function(i, val){
           var li = document.createElement("li");
        	var inner = '<a href="'+val.Url+'" title="'+val.Url+'" target="_blank">'+val.Title+"</a>";
        	if (val.Summary != "" && val.Summary != "undefined") {
        		inner += " - "+val.Summary;
        	}
        	li.innerHTML = inner;        						
        	ul.appendChild(li);
    });
    $('body').html(ul);
});

Данный пример аналогичен следующему:

$.ajax({
            // AJAX-specified URL
           url: "http://search.yahooapis.com/WebSearchService/V1/webSearch?appid=YahooDemo&output=json&query=PHP&callback=?",
           dataType : "jsonp",
           // Handle the success event
           success: function (data) {
               // equal to previuos example
               // ...
           }
});

Примечание: запрос мы чуть-чуть изменили – теперь он оканчивается на …&callback=? – это необходима, чтобы jQuery подставил правильное имя callback функции в запрос. Callback функция в данном примере создает список UL, в котором элементы LI будут соответствовать результатам поиска. (у каждого типа поиска свои, специфические поля, более подробное описание смотрите по вышеприведенным ссылкам).

Как мы видим все достаточно просто – теперь вывод результатов поиска ложится полностью на вашу фантазию…

Google Search AJAX API

Если Вы уже сталкивались с Google Search AJAX API, то знаете – у них есть чудная JavaScript библиотека, которую достаточно проблематично кастомизировать под конкретные нужды, поэтому, по аналогии с Yahoo API воспользуемся JSONP. Но прежде… нам потребуется получить “AJAX Search API Key”.

Отправной точкой для нас будет страница: http://code.google.com/apis/ajaxsearch/documentation/reference.html

Составляем REST запрос

Выбираем тип поиска, и соответствующий базовый URL:

• Web Search – http://ajax.googleapis.com/ajax/services/search/web
• Local Search – http://ajax.googleapis.com/ajax/services/search/local
• Video Search – http://ajax.googleapis.com/ajax/services/search/video
• Blog Search – http://ajax.googleapis.com/ajax/services/search/blogs
• News Search – http://ajax.googleapis.com/ajax/services/search/news
• Book Search – http://ajax.googleapis.com/ajax/services/search/books
• Image Search – http://ajax.googleapis.com/ajax/services/search/images

Необходимо указать три параметра – это версия API – v=1.0, Ваш API Key key=your-key и непосредственно сам запрос q=PHP (ключ не является обязательным параметром, но очень рекомендуемый):

http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=PHP

Примечание: у каждого типа поиска есть свои специфические параметры, все они описаны в документации.

JavaScript

Теперь возвращаясь к нашему любимому JSONP – Google сделал нам медвежью услугу – для организации JSONP он предусмотрел целых два параметра – callback и context и они являются взаимообязательными, и параметр context будет всегда возвращаться нам в callback функцию в качестве первого параметра (сие сделано для того, чтобы мы могли различать одновременные обращения к API). Но есть одна загвоздка – для работы с jQuery сие не подходит, т.к. jQuery ожидает в качестве первого параметра данные, по этой причине пришлось пойти на хитрость и создать промежуточную callback функцию:

// callback function
function GoogleCallback (func, data) {
    window[func](data);
}

Теперь мы готовы “спрашивать”:

// change key!!!
$.getJSON("http://ajax.googleapis.com/ajax/services/search/web?v=1.0?key=your-key&q=PHP&callback=GoogleCallback&context=?",
function(data){
    var ul = document.createElement("ul");
    $.each(data.results, function(i, val){
        	var li = document.createElement("li");
        	li.innerHTML = '<a href="'+val.url+'" title="'+val.url+'" target="_blank">'+val.title+"</a> - "+val.content;      						
        	ul.appendChild(li);
    });
    $('body').html(ul);
});

Примечание: у каждого типа результатов свои свойства, более подробную информацию найдете в документации.

Как видим – теперь мы не ограничены “возможностями” Google JavaScript бибилотеки, и вольны распоряжаться данными на свое усмотрение, чего собственно и добивались…

P.S. Используя подобный подход – мы снимаем ограничение на представление данных, и что немаловажно – перекидываем нагрузку с сервера на клиента (именно таким образом организован поиск на сайте analyser.hohli.com).