Реализация поиска в Википедии на JavaScript: интеграция API для получения информации

В мире веб-разработки возникают множество ситуаций, когда необходимо реализовать поиск информации на Википедии. Например, вы можете создавать образовательные ресурсы, приложения для чтения новостей или просто желать предоставить пользователям возможность легко получать информацию с Википедии. В этой статье мы расскажем вам, как использовать JavaScript и API Википедии для реализации поиска.

API Википедии

API Википедии – это интерфейс программирования приложений, который позволяет получать структурированные данные из Википедии. Этот API позволяет выполнять разнообразные операции, включая поиск статей, получение содержания статей, извлечение информации о категориях и многое другое.

Один из популярных способов взаимодействия с API Википедии – это использование AJAX-запросов в JavaScript. AJAX позволяет асинхронно обмениваться данными между клиентом и сервером, что идеально подходит для реализации поиска в реальном времени.

Настройка окружения

Перед тем как начать программировать, вам потребуется настроить ваше рабочее окружение. Вам понадобится текстовый редактор, веб-браузер и доступ в интернет. Для показанного публичного поиска через MediaWiki Action API — action=query&list=search — регистрация и API-ключ не нужны. Из браузера запрос отправляется без авторизации с origin=*; это не инструкция для Wikimedia Enterprise или операций изменения страниц.

Создание HTML-разметки

Для начала создадим простую HTML-разметку для нашего поискового приложения. Ниже пример кода для базовой разметки:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Поиск в Википедии</title>

<link rel="stylesheet" href="styles.css">

</head>

<body>

<h1>Поиск в Википедии</h1>

<input type="text" id="search-input" placeholder="Поиск на Википедии">

<ul id="search-results"></ul>

<script src="script.js"></script>

</body>

</html>

Эта разметка включает в себя поле для ввода запроса (`<input>`), список для отображения результатов (`<ul>`), и подключает внешний файл стилей `styles.css` и скрипт `script.js`.

JavaScript для поиска

Теперь перейдем к JavaScript-части нашего приложения. В этом примере мы будем использовать чистый JavaScript без использования библиотек.

// script.js

const searchInput = document.getElementById("search-input");

const searchResults = document.getElementById("search-results");

searchInput.addEventListener("input", () => {

const searchTerm = searchInput.value;

if (searchTerm.trim() === "") {

searchResults.innerHTML = "";

return;

}

// Отправляем запрос к API Википедии

const params = new URLSearchParams({format: "json", action: "query", list: "search", utf8: "1", srsearch: searchTerm, origin: "*"});
fetch(`https://ru.wikipedia.org/w/api.php?${params}`, {credentials: "omit"})

.then(response => response.json())

.then(data => {

const results = data.query.search;

displayResults(results);

})

.catch(error => console.error(error));

});

function displayResults(results) {

searchResults.innerHTML = "";

results.forEach(result => {

const listItem = document.createElement("li");

const title = document.createElement("h2");

title.textContent = result.title;

const snippet = document.createElement("p");

snippet.innerHTML = result.snippet;

listItem.appendChild(title);

listItem.appendChild(snippet);

searchResults.appendChild(listItem);

});

}

В этом коде мы прослушиваем событие `input` на поле ввода и отправляем AJAX-запрос к API Википедии при каждом изменении значения. Результаты поиска обрабатываются и отображаются на странице.

Оформление с помощью CSS

Для улучшения внешнего вида приложения, добавим стили с помощью CSS. Создайте файл `styles.css` и добавьте следующие стили:

/* styles.css */

body {

font-family: Arial, sans-serif;

text-align: center;

}

h1 {

color: #3366cc;

}

#search-input {

width: 80%;

padding: 10px;

font-size: 18px;

border: 1px solid #ccc;

}

#search-results {

list-style-type: none;

padding: 0;

}

li {

border: 1px solid #ccc;

padding: 10px;

margin

: 10px;

border-radius: 5px;

}

h2 {

color: #3366cc;

}

p {

margin: 0;

}

Эти стили улучшат внешний вид нашего поискового приложения.

Нужен ли ключ для этого поиска Wikipedia?

Для публичного action=query&list=search в показанном URL ключ не нужен. Показанный публичный поиск через MediaWiki Action API бесплатен и не требует регистрации или API-ключа; ответ относится только к публичному чтению через MediaWiki Action API и не распространяется на Wikimedia Enterprise, коммерческие bulk-выгрузки и операции изменения данных, для которых документация требует access token (API:FAQ). При этом Фонд Викимедиа отмечает, что публичный API-доступ не отключается, но для крупномасштабных потребителей введено ограничение скорости запросов. Модуль list=search ищет по названию и тексту страниц, а поисковая строка передаётся в параметре srsearch (API:Search).

Сборка URL без ключа

Ниже — редакционный пример: шаблон составлен редакцией, данные условны, живой прогон во внешнем API не выполнялся. Значения следует передавать в URLSearchParams без предварительного percent-encoding: при сериализации значения кодируются автоматически (URLSearchParams).

// Редакционный пример: шаблон составлен редакцией, данные условны.
function makeSearchUrl(term) {
  const params = new URLSearchParams({
    format: "json",
    action: "query",
    list: "search",
    utf8: "1",
    srsearch: term,
    origin: "*",
  });
  return `https://ru.wikipedia.org/w/api.php?${params}`;
}

// Условный пример поисковой строки:
const term = "кот & собака + дом";
console.log(makeSearchUrl(term));

origin=* передаётся как параметр query string и разрешает неавторизованный CORS-запрос с любого origin (API:Cross-site requests). В fetch для такого запроса укажите credentials: "omit".

Условный локальный round-trip

Проверка: декодируйте srsearch обратно и убедитесь, что полученная строка совпадает с исходной. Это локальная проверка сборки URL. Она не подтверждает ответ сервера.

Две разные проверки ошибок

fetch не отклоняет Promise только из-за статуса вроде 404, поэтому HTTP-ошибку проверяют по response.ok (Using Fetch). Ошибка в теле JSON приходит отдельно как data.error. Это две независимые проверки. Приведённая ниже функция во внешнем API не проверялась; живая выдача здесь не приводится.

// Редакционный пример: шаблон составлен редакцией, данные условны.
async function search(term) {
  const response = await fetch(makeSearchUrl(term), { credentials: "omit" });
  if (!response.ok) {
    throw new Error(`HTTP ${response.status}`);
  }
  const data = await response.json();
  if (data.error) {
    throw new Error(data.error.info);
  }
  return data.query.search;
}

Чек-лист перед запуском

• endpoint указывает на /w/api.php;
• origin=* присутствует в query string;
• srsearch декодируется обратно в исходную строку;
• параметра key в URL нет.

Вопросы обхода rate limits и заявления о безлимитности здесь не рассматриваются.

Частые вопросы

Нужен ли API-ключ для публичного поиска через list=search? Нет. Для публичного чтения через action=query&list=search в показанном URL ключ не нужен. Ответ не относится к Wikimedia Enterprise, коммерческим bulk-выгрузкам и операциям изменения данных.

Зачем в запросе параметр origin со звёздочкой? Он передаётся как параметр query string и разрешает неавторизованный CORS-запрос с любого origin. В fetch для такого запроса указывают credentials omit.

Как проверить, что поисковая строка закодирована правильно? Передайте значение в URLSearchParams без предварительного percent-encoding и после сборки URL декодируйте srsearch обратно. Полученная строка должна совпасть с исходной.

Заключение

В этой статье мы рассмотрели, как реализовать поиск в Википедии на JavaScript, используя API Википедии. Мы создали простую веб-страницу с полем поиска, обработали запросы, и отобразили результаты. Этот пример является лишь отправной точкой, и вы можете расширить его функциональность, добавив фильтры, улучшенную обработку ошибок и другие возможности.

Интеграция поиска Википедии в ваше веб-приложение может значительно обогатить опыт пользователей, предоставляя им доступ к огромному объему знаний. Не забудьте удостовериться, что вы соблюдаете условия использования API Википедии и следуете лучшим практикам в области разработки.