Як зрозуміло з заголовка – даний пост буде присвячений роботі з Google Search API і Yahoo Search API допомогою JavaScript бибилотеки jQuery.
Матеріали даної статті включені в підручник «jQuery для початківців». Підручник розповсюджується безкоштовно, і супроводжується інтерактивними прикладами.
Yahoo Search AJAX API
Почну з використання Yahoo Search API. І на те є 2 причини:
Отже приступимо, для початку нам потрібно зареєструвати обліковий запис 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).
