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


        MyWeb 2.0
        • Related Tags
          Tag Search
          URL Search


          News Search
          Site Explorer
          • Pages
            Inlinks
            Update Notification


            Video Search
            Web Search



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


            Необходимо указать три параметра — это версия 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/
    Поделиться публикацией
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 4

    • НЛО прилетело и опубликовало эту надпись здесь
        0
        Да, можно использовать все спец запросы принятые в поисковой системе
        0
        А вот как мы ее заиспользовали: www.qwate.ru
        Сделали полноценую функциональную поисковую систему.
          0
          Ссылка неправильная, в url'e перепутаны q и w

        Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

        Самое читаемое