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

Categories: JavaScript

Как понятно из заголовка – данный пост будет посвящен работе с Google Search API и Yahoo Search API посредством JavaScript бибилотеки 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):

Их много, но выберем один – 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:

Необходимо указать три параметра – это версия 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).

May 14, 2008 | Tags: , , ,

This entry was posted on Wednesday, May 14th, 2008 at 14:18 and is filed under JavaScript.
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Другие посты на эту тему

25 Responses to “jQuery + AJAX + (Google Search API || Yahoo Search API)”

  1. Snowcore

    Замечательный обзор, Антон! Как раз сам хотел разобраться с поисковыми API. Спасибо.

    Reply
    May 14, 2008 at 16:05
  2. sunnybear

    разве AJAX способен делать CrossDomain-запросы? вроде это только через getScript в jQuery возможно

    Reply
    May 14, 2008 at 20:53
  3. Anton Shevchuk

    @sunnybear:
    Вы конечно же правы – XMLHttpRequest к другому домену не возможен, но это не относится к двум другим способам реализации AJAX’a – а это динамическое создание IFRAME или тэга SCRIPT.
    В данном примере как раз используется подключения JavaScript’a на лету, который и содержит необходимые нам объект с результатами.

    Reply
    May 14, 2008 at 22:05
  4. Anton Shevchuk

    @sunnybear:
    С версии 1.2 функция getScript в jQuery может стучаться к любому домену, не только к “родному”…

    Reply
    May 14, 2008 at 22:07
  5. DEKODA

    Ошибочка

    li.innerHTML = '&lt;a href="'+val.url+'" title="'+val.url+'" target="_blank"&gt;'+val.title+"&lt;/a&gt; - "+val.content;

    а должно:

    var inner = '&lt;a href="'+val.url+'" title="'+val.url+'" target="_blank"&gt;'+val.title+"&lt;/a&gt; - "+val.content;

    Спасибо за инфу. Поначалу думал заюзать твои скрипты c analyser.hohli.com, но решил что они мне непотходят под мою задачу)))

    Reply
    May 16, 2008 at 11:30
  6. Anton Shevchuk

    @DEKODA
    Спс, исправил, только я так и не понял где Вы собирались заюзать сей скрипт?!? О_о

    Reply
    May 17, 2008 at 23:12
  7. DEKODA

    Скоро покажу)

    Reply
    May 20, 2008 at 16:52
  8. Snowcore

    А лучшего поисковика и не будет. Google никогда не сдаст своих позиций.

    Reply
    May 22, 2008 at 11:13
  9. Александр Махомет

    Антон, определенно пора менять хостера, сайт очень часто в дауне.

    Reply
    June 4, 2008 at 11:47
  10. Anton Shevchuk

    @Александр:
    Я как раз хостинг и поменял, только вот не воворемя как-то – если интересно читаем тута: Пожар в ThePlanet

    Reply
    June 4, 2008 at 11:57
  11. DEKODA

    Обещал показать что получилось.

    http://qw.kz

    Описание можно почитать, тут: http://forum.searchengines.ru/showthread.php?t=241329

    Еще раз спасибо за Ваш пост!

    Reply
    June 22, 2008 at 19:19
  12. Grigori Kochanov

    Главная проблема гугла – плохая документация.
    С гуглом можно работать без промежуточной callback-функции:

        url= "http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q="+escape(query)+"&callback=?";
    $.getJSON(url, function (json){
        var results = json.responseData.results;
        for (var i=0;i<results.length;++i){
            var r = results[i];
            //...
        }
    });

    структура результата r описана в мануале:
    http://code.google.com/apis/ajaxsearch/documentation/#fonje

    Reply
    September 3, 2008 at 02:33
  13. jQuery для начинающих. Часть 3. AJAX

    [...] Пример получения и обработки результатов поиска используя Google, более подробную информацию найдете в статье “jQuery + AJAX + (Google Search API || Yahoo Search API)“ [...]

    Reply
    October 8, 2008 at 08:31
  14. nandi

    результаты выдачи несколько отличаются от выдачи google.ru (google.com), это у всех так или я не указала какие-то доп. параметры?

    Reply
    October 10, 2008 at 10:10
  15. Anton Shevchuk

    @nandi:
    Результаты будут одинаковыми, если использовать англоязычный гугл-поиск – т.е. добавьте в строку адреса в браузере параметр &hl=en

    Reply
    October 10, 2008 at 10:39
  16. nandi

    так было

    $url = "http://ajax.googleapis.com/ajax/services/search/web?v=1.0&hl=ru&lr=lang_ru&q=".$q."&start=".$startIndex;

    если правильно понимаю, надо было сделать так

    $url = "http://ajax.googleapis.com/ajax/services/search/web?v=1.0&hl=en&q=".$q."&start=".$startIndex;

    результат неверен :(

    Reply
    October 10, 2008 at 10:51
  17. Anton Shevchuk

    @nandi:
    Я имел ввиду, что результаты поиска соответствуют англоязычному поиску (http://www.google.com/search?q=jquery&hl=en), каким образом получить результат соответствующий google.ru – я даже не знаю, собственно это вопрос не ко мне, а к google…

    Reply
    October 10, 2008 at 11:18
  18. nandi

    спасибо за ответ, приятно :)
    к сожалению, результаты выдачи разные…т.е.
    http://ajax.googleapis.com/ajax/services/search/web?v=1.0&hl=en&ie=UTF-8&q=...
    и
    http://www.google.com/search?&hl=en&ie=UTF-8&q=...
    не одно и то же (?)
    с hl=ru аналогичная ситуация :(

    Reply
    October 13, 2008 at 10:03
  19. /Н.П.Блок/ » » jQuery для начинающих. Часть 3. AJAX

    [...] Пример получения и обработки результатов поиска используя Google, более подробную информацию найдете в статье "jQuery + AJAX + (Google Search API || Yahoo Search API)" [...]

    Reply
    October 15, 2008 at 10:33
  20. Kanaev

    выложите пожалуйста пример в гугл и jquery. Почему то

    $.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);
});

    не отрабатывает. хотя в строке состояния пишет. что выплняется запрос к ajax.googleapis.com. your-key поменял.

    Reply
    January 16, 2009 at 14:19
  21. Anton Shevchuk

    @Kanaev:
    Посмотрите FireBug’ом – возможно возникает ошибка, живой же пример тут: http://analyser.hohli.com/people?p=people&q=Anton+Shevchuk

    Reply
    January 16, 2009 at 14:24
  22. Kanaev

    спасибо

    Reply
    January 19, 2009 at 14:18
  23. Sergei Shablovsky

    Добрый день, Антон !

    Мне понравилась Ваша статья. Нам нужен один модуль, реализующий поиск на сайте, мы готовы его заказать у Вас.
    Пожалуйста, свяжитесь по контактам, уазанным на сплеш-скрине сайта.

    Спасибо,
    Sergei Shablovsky

    Reply
    February 19, 2009 at 13:52
  24. Богдан

    Антон, отличная информация по Search API Yahoo. Как раз то, что я искал. Я бы очень хотел связаться с тобой, пожалуйста, ответь на e-mail.
    Богдан

    Reply
    June 5, 2009 at 12:05
  25. Денис

    Господа, никто не сталкивался с такой проблемой: всеми любимый браузер Internet Explorer при получении JSON данных в UTF-8 от гугла, не хочет смотреть на их кодировку, и на странице в windows-1251 кодировке выдает крокозябры.
    Как лечить? Прогонять через бекэнд, что бы там посылать верный заголовок, очень не хочется (
    Заранее спасибо за советы.

    Reply
    July 31, 2009 at 13:27

Leave a Reply

 
Copyright © 2007-2010, Anton Shevchuk. Powered by WordPress

MAXCACHE: 0.26MB/0.00035 sec