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

Матеріали даної статті включені в підручник «jQuery для початківців». Підручник розповсюджується безкоштовно, і супроводжується інтерактивними прикладами.

Yahoo Search AJAX API

Почну з використання Yahoo Search API. І на те є 2 причини:

  • Сервіс Google більш глючна штука ніж у Yahoo (зелен він ще)
  • 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 = “+val.Title+””;
    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 AJAX Search API

    Якщо Ви вже стикалися з Google AJAX Search 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 = “+val.title+” – “+val.content;
    ul.appendChild(li);
    });
    $(‘body’).html(ul);
    });

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

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

    P. S. Використовуючи подібний підхід – ми знімаємо обмеження на подання даних, і що важливо – перекидаємо навантаження з сервера клієнта (саме таким чином організований пошук на сайті analyser.hohli.com).