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

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

• 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 это:
        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).
        
        Crossposting: http://anton.shevchuk.name/