Как получить данные с сайта javascript

Получить данные с сайта с помощью js

Приветствую. Есть в php функция — file_get_contents, которая читает содержимое файла в строку, которую можно дальше где-то использовать. Вопрос: как сделать такое же, только с помощью js? Пробовал разные варианты и у меня не получилось. Это для расширения для хрома.

Отслеживать

задан 14 сен 2017 в 22:17

357 4 4 серебряных знака 19 19 бронзовых знаков

14 сен 2017 в 22:20

14 сен 2017 в 22:25

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

В общем для того, чтобы получить данные из другого сайта в свое расширение я использовал и мне этого хватило.

Отслеживать

52.2k 11 11 золотых знаков 108 108 серебряных знаков 311 311 бронзовых знаков

ответ дан 15 сен 2017 в 17:24

357 4 4 серебряных знака 19 19 бронзовых знаков

Как спарсить любой сайт?

Меня зовут Даниил Охлопков, и я расскажу про свой подход к написанию скриптов, извлекающих данные из интернета: с чего начать, куда смотреть и что использовать.

Написав тонну парсеров, я придумал алгоритм действий, который не только минимизирует затраченное время на разработку, но и увеличивает их живучесть, робастность, масштабируемость.

TL;DR

Чтобы спарсить данные с вебсайта, пробуйте подходы именно в таком порядке:

1. Найдите официальное API,
2. Найдите XHR запросы в консоли разработчика вашего браузера,
3. Найдите сырые JSON в html странице,
4. Отрендерите код страницы через автоматизацию браузера,
5. Если ничего не подошло — пишите парсеры HTML кода.

Совет профессионалов: не начинайте с BS4/Scrapy

BeautifulSoup4 и Scrapy — популярные инструменты парсинга HTML страниц (и не только!) для Python.

Крутые вебсайты с крутыми продактами делают тонну A/B тестов, чтобы повышать конверсии, вовлеченности и другие бизнес-метрики. Для нас это значит одно: элементы на вебстранице будут меняться и переставляться. В идеальном мире, наш написанный парсер не должен требовать доработки каждую неделю из-за изменений на сайте.

Приходим к выводу, что не надо извлекать данные из HTML тегов раньше времени: разметка страницы может сильно поменяться, а CSS-селекторы и XPath могут не помочь. Используйте другие методы, о которых ниже. ⬇️

Используйте официальный API

�� Ого? Это не очевидно ��? Конечно, очевидно! Но сколько раз было: сидите пилите парсер сайта, а потом БАЦ — нашли поддержку древней RSS-ленты, обширный sitemap.xml или другие интерфейсы для разработчиков. Становится обидно, что поленились и потратили время не туда. Даже если API платный, иногда дешевле договориться с владельцами сайта, чем тратить время на разработку и поддержку.

Sitemap.xml — список страниц сайта, которые точно нужно проиндексировать гуглу. Полезно, если нужно найти все объекты на сайте. Пример: http://techcrunch.com/sitemap.xml

RSS-лента — API, который выдает вам последние посты или новости с сайта. Было раньше популярно, сейчас все реже, но где-то еще есть! Пример: https://habr.com/ru/rss/hubs/all/

Поищите XHR запросы в консоли разработчика

Все современные вебсайты (но не в дарк вебе, лол) используют Javascript, чтобы догружать данные с бекенда. Это позволяет сайтам открываться плавно и скачивать контент постепенно после получения структуры страницы (HTML, скелетон страницы).

Обычно, эти данные запрашиваются джаваскриптом через простые GET/POST запросы. А значит, можно подсмотреть эти запросы, их параметры и заголовки — а потом повторить их у себя в коде! Это делается через консоль разработчика вашего браузера (developer tools).

В итоге, даже не имея официального API, можно воспользоваться красивым и удобным закрытым API. ☺️

Даже если фронт поменяется полностью, этот API с большой вероятностью будет работать. Да, добавятся новые поля, да, возможно, некоторые данные уберут из выдачи. Но структура ответа останется, а значит, ваш парсер почти не изменится.

Алгорим действий такой:

1. Открывайте вебстраницу, которую хотите спарсить
2. Правой кнопкой -> Inspect (или открыть dev tools как на скрине выше)
3. Открывайте вкладку Network и кликайте на фильтр XHR запросов
4. Обновляйте страницу, чтобы в логах стали появляться запросы
5. Найдите запрос, который запрашивает данные, которые вам нужны
6. Копируйте запрос как cURL и переносите его в свой язык программирования для дальнейшей автоматизации.

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

Вместо этого попробуйте просто скопипастить и захардкодить их в своем парсере: очень часто эти строчки валидны 7-30 дней, что может быть окей для ваших задач, а иногда и вообще несколько лет. Или поищите другие XHR запросы, в ответе которых бекенд присылает эти строчки на фронт (обычно это происходит в момент логина на сайт). Если не получилось и без куки/сессий никак, — советую переходить на автоматизацию браузера (Selenium, Puppeteer, Splash — Headless browsers) — об этом ниже.

Поищите JSON в HTML коде страницы

Как было удобно с XHR запросами, да? Ощущение, что ты используешь официальное API. �� Приходит много данных, ты все сохраняешь в базу. Ты счастлив. Ты бог парсинга.

Но тут надо парсить другой сайт, а там нет нужных GET/POST запросов! Ну вот нет и все. И ты думаешь: неужели расчехлять XPath/CSS-selectors? ��‍♀️ Нет! ��‍♂️

Чтобы страница хорошо проиндексировалась поисковиками, необходимо, чтобы в HTML коде уже содержалась вся полезная информация: поисковики не рендерят Javascript, довольствуясь только HTML. А значит, где-то в коде должны быть все данные.

Современные SSR-движки (server-side-rendering) оставляют внизу страницы JSON со всеми данные, добавленный бекендом при генерации страницы. Стоп, это же и есть ответ API, который нам нужен! ������

Вот несколько примеров, где такой клад может быть зарыт (не баньте, плиз):

Алгоритм действий такой:

1. В dev tools берете самый первый запрос, где браузер запрашивает HTML страницу (не код текущий уже отрендеренной страницы, а именно ответ GET запроса).
2. Внизу ищите длинную длинную строчку с данными.
3. Если нашли — повторяете у себя в парсере этот GET запрос страницы (без рендеринга headless браузерами). Просто requests.get .
4. Вырезаете JSON из HTML любыми костылямии (я использую html.find(«= <") ).

Отрендерите JS через Headless Browsers

Если XHR запросы требуют актуальных tokens, sessions, cookies. Если вы нарываетесь на защиту Cloudflare. Если вам обязательно нужно логиниться на сайте. Если вы просто решили рендерить все, что движется загружается, чтобы минимизировать вероятность бана. Во всех случаях — добро пожаловать в мир автоматизации браузеров!

Если коротко, то есть инструменты, которые позволяют управлять браузером: открывать страницы, вводить текст, скроллить, кликать. Конечно же, это все было сделано для того, чтобы автоматизировать тесты веб интерфейса. I’m something of a web QA myself.

После того, как вы открыли страницу, чуть подождали (пока JS сделает все свои 100500 запросов), можно смотреть на HTML страницу опять и поискать там тот заветный JSON со всеми данными.

driver.get(url_to_open) html = driver.page_source

Selenoid — open-source remote Selenium cluster

Для масштабируемости и простоты, я советую использовать удалённые браузерные кластеры (remote Selenium grid).

Недавно я нашел офигенный опенсорсный микросервис Selenoid, который по факту позволяет вам запускать браузеры не у себя на компе, а на удаленном сервере, подключаясь к нему по API. Несмотря на то, что Support team у них состоит из токсичных разработчиков, их микросервис довольно просто развернуть (советую это делать под VPN, так как по умолчанию никакой authentication в сервис не встроено). Я запускаю их сервис через DigitalOcean 1-Click apps: 1 клик — и у вас уже создался сервер, на котором настроен и запущен кластер Headless браузеров, готовых запускать джаваскрипт!

Вот так я подключаюсь к Selenoid из своего кода: по факту нужно просто указать адрес запущенного Selenoid, но я еще зачем-то передаю кучу параметров бразеру, вдруг вы тоже захотите. На выходе этой функции у меня обычный Selenium driver, который я использую также, как если бы я запускал браузер локально (через файлик chromedriver).

def get_selenoid_driver( enable_vnc=False, browser_name="firefox" ): capabilities = < "browserName": browser_name, "version": "", "enableVNC": enable_vnc, "enableVideo": False, "screenResolution": "1280x1024x24", "sessionTimeout": "3m", # Someone used these params too, let's have them as well "goog:chromeOptions": , "prefs": < "credentials_enable_service": False, "profile.password_manager_enabled": False >, > driver = webdriver.Remote( command_executor=SELENOID_URL, desired_capabilities=capabilities, ) driver.implicitly_wait(10) # wait for the page load no matter what if enable_vnc: print(f"You can view VNC here: ") return driver

Заметьте фложок enableVNC . Верно, вы сможете смотреть видосик с тем, что происходит на удалённом браузере. Всегда приятно наблюдать, как ваш скрипт самостоятельно логинится в Linkedin: он такой молодой, но уже хочет познакомиться с крутыми разработчиками.

Парсите HTML теги

Мой единственный совет: постараться минимизировать число фильтров и условий, чтобы меньше переобучаться на текущей структуре HTML страницы, которая может измениться в следующем A/B тесте.

Даниил Охлопков — Data Lead @ Runa Capital

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

Надеюсь, что-то из этого было полезно! Я считаю, что в парсинге важно, с чего ты начинаешь. С чего начать — я рассказал, а дальше ваш ход ��

Парсинг сайта с JavaScript на Python

Многие начинающие программисты на Python часто сталкиваются с проблемой: при парсинге сайта программа не находит элемент на сайте, хотя при его обычном посещении через браузер он присутствует. Оно и понятно, ведь вы, скорее всего, получаете HTML-документ через GET-запрос на сайт с помощью стандартной библиотеки requests.

• Почему пользователь видит всё корректно?

Но почему в браузере Вы видите весь контент, в отличии от Вашей программы? Дело в том, что при переходе на нужный домен браузер получает HTML-документ, CSS-стили и JavaScript. С первыми двумя, я думаю, всё понятно — они нужны для базовой отрисовки страницы. А вот JavaScript отличается от остальных. Это язык программирования, поддержка которого присутствует во всех браузерах. Чаще всего его применяют для добавления анимаций и расширения функций сайта с помощью изменения DOM-дерева.

• Как устроены страницы с динамическим контентом.

Сейчас набирает популярность создание своих SPA-приложений. Это так называемые одностраничные приложения (Single Page Application). Весь сайт отображается с помощью JavaScript, а в HTML-документе прописана лишь загрузка нужного JS-файла. Отключив JavaScript в своём браузере Вы, чаще всего, увидите пустую страницу с подобным текстом: “Для отображения сайта необходим JavaScript”..

Не сложно догадаться, что парсинг такого сайта через Python и библиотеку requests не получится. Перейдём к коду и практическим примерам.

• Библиотека Selenium. Эмуляция обычного браузера.

Для Python была разработана библиотека Selenium. Предназначена она для автоматизации действий в веб-браузере, выполнения рутинных задач и тестирования Web-приложений.

Давайте установим её:

pip3 install selenium

Для того, чтобы работать с библиотекой, нам также понадобится WebDriver. WebDriver нужен для эмуляции обычного браузера, который будет управляться через Selenium. Советую не заморачиваться и установить веб-драйвер для того браузера, который установлен у вас на ПК. В моём случае я использую ChromeDriver .

Создаём Python-файл для будущего парсера. В директорию с ним переносим ранее установленный веб-драйвер.

В качестве объекта для практики я выбрал новостной сайт Meduza . На сайте много информации, из-за чего процесс парсинга станет интересней. При парсинге через requests информация о новостях не отображается, ну и не должна):

Весь код будет написан в функциональном стиле. Для начала импортируем нужную библиотеку и инициализируем сам WebDriver:

from selenium.webdriver import Chrome

if __name__ == “__main__”:

Чтобы не добавлять ChromeDriver в переменные среды моей ОС я передал путь к драйверу в аргументе executable_path.

При запуске данного кода не произойдёт ничего необычного: у вас запустится окно браузера с базовым адресом “data:,”.

Для перехода по страницам в Selenium используется метод get у класса драйвера. Принимает всего лишь 1 аргумент — url. Поэтому напишем следующее:

Сразу определимся с тем, что нам нужно. Мы будем парсить картинку, заголовок и дату публикации. Исходя из этого в нашей программе будет 4 функции для парсинга (get_news, get_image, get_title, get_date) и 1 для вывода.

Для карточки новости соответствует класс “RichBlock-root”:

Чтобы производить поиск по чему-либо необходимо импортировать класс By:

from selenium.webdriver.common.by import By

Напишем саму функцию:

def get_news():
news = []
news_elements = driver.find_elements(By.CLASS_NAME, «RichBlock-root»)

for element in news_elements:
data = «image»: get_image(element),
«title»: get_title(element),
«date»: get_date(element),
>
news.append(data)

Инициализируем пустой список и находим все элементы карточек новостей. Для каждой карточки мы получаем изображение, заголовок, дату и записываем это в переменную data. После всего этого мы добавляем данные в список, который мы возвращаем в конце функции.

Сейчас в значения для данных функции записываются несуществующие функции. Давайте исправим это. Создавать функции будем по порядку.

Чтобы получить картинку нам нужно выбрать класс “ImageElement-root”, а затем первый элемент с тегом “source”:

Но как мы видим, у “source” нет никакого текста, только атрибут srcset. Для получения атрибутов мы используем метод get_attribute на элементе.

def get_image(element):
images_element = element.find_element(By.CLASS_NAME, «ImageElement-root»)
image_element = images_element.find_element(By.TAG_NAME, «source»)

return «https://meduza.io» + image_element.get_attribute(«srcset»).strip()

Возвращаем абсолютную ссылку на картинку. При получении атрибута srcset в начале образовался отступ. Чтобы его убрать используем функцию strip.

Заголовок карточки помещён в тег a с классом “Link-root”.

def get_title(element):
title_element = element.find_element(By.CLASS_NAME, «Link-root»)

Весь текст, который находится в этом элементе, получаем с помощью переменной text.

И, наконец, дата создания. В этом случае ищем элемент по классу “Timestamp-module_root__coOvT”

Создаём ещё одну функцию:

def get_date(element):
date_element = element.find_element(By.CLASS_NAME, «Timestamp-module_root__coOvT»)

Тут, я думаю, объяснять ничего не нужно.

Последняя функция в нашем коде — print_data_news:

def print_data_news():
news_items = get_news()

Осталось добавить в точку входа (после создания драйвера и перехода на страницу) вызов функции print_data_news().

Наконец-то мы написали наш парсер динамической страницы. После запуска программа выдаёт следующее:

Это можно считать успехом, ведь все наши цели выполнены и мы можем спокойно отдохнуть

Что такое AJAX?

Asynchronous JavaScript and XML (AJAX) – это сочетание технологий разработки веб-приложений, которые повышают отзывчивость веб-приложений при взаимодействии с пользователем. Всякий раз, когда ваши пользователи работают с веб-приложением, например нажимают кнопки или ставят галочки, браузер обменивается данными с удаленным сервером. Передача данных может привести к перезагрузке страниц и прерыванию работы пользователя. С помощью AJAX веб-приложения могут отправлять и получать данные в фоновом режиме, поэтому при необходимости обновляются только небольшие части страницы.

Какие существуют примеры использования AJAX?

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

Автозаполнение.

Поисковые системы предоставляют опции автозаполнения в реальном времени, когда пользователи ищут определенное ключевое слово в поле поиска. Благодаря AJAX веб-страница может передавать каждый введенный символ на веб-сервер и возвращать список соответствующих рекомендаций на существующую страницу.

Проверка формы

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

Функциональные возможности чата

Текстовые мессенджеры и чат-боты используют AJAX для отображения разговоров в реальном времени в браузерах. AJAX отправляет текст, написанный пользователем, на сервер и одновременно публикует его в интерфейсах чата других пользователей.

Социальные сети

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

Системы голосования и рейтингов

Некоторые форумы и сайты социальных закладок используют AJAX для отображения рейтинга или голосов за определенные публикации в реальном времени. Например, вы можете проголосовать «за» публикацию на Reddit или «против» нее, не обновляя всю страницу.

Каковы примеры практического использования AJAX?

Ниже мы расскажем о нескольких реальных приложениях AJAX.

• Узнайте, как набор инструментов WIND использует AJAX для получения и визуализации геопространственных данных в реальном времени. Пользователи могут увеличить масштаб определенного региона на карте для детального просмотра.
• Узнайте, как движок чата Pubnub использует AJAX для получения аудиофайлов, которые автоматически воспроизводятся в умном приложении чата.
• Узнайте, как многоязычное решение для клинического мониторинга на основе SMSиспользует AJAX на своем регистрационном портале для облегчения регистрации пользователей в реальном времени. Как только пользователи регистрируются, приложение AJAX отправляет им SMS-сообщение на предпочитаемом ими языке.

Какие технологии использует AJAX?

AJAX состоит из нескольких веб-технологий и технологий программирования, которые позволяют веб-приложениям асинхронно обмениваться данными с веб-серверами.

XHTML, HTML и CSS

Расширяемый язык гипертекстовой разметки (XHTML), HTML и каскадные таблицы стилей (CSS) являются языками разметки. Вы можете использовать их для информирования веб-браузеров о структуре и стиле контента вашей веб-страницы.

Например, можно использовать XHTML или HTML для размещения текста и изображений на веб-странице. Затем вы можете использовать CSS для изменения типа шрифта и цвета фона.

XML

XML – это язык программирования, с помощью которого различные приложения могут обмениваться данными. Поскольку в различных приложениях данные представляются по-разному, вы можете использовать XML для представления данных в виде обычного текста. Затем приложения AJAX могут обмениваться данными и обрабатывать их в общем формате XML.

XMLHttpRequest

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

Объектная модель документа

Объектная модель документа (DOM) организует страницы HTML и XML в виде древовидной структуры. DOM состоит из узлов, которые разветвляются на большее количество дочерних узлов или объектов. Благодаря этому можно более эффективно стилизовать или изменять коды на определенных страницах.

JavaScript

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

Как работает AJAX?

AJAX использует JavaScript и XML для обеспечения асинхронных вызовов при обмене данными между браузерами и серверами. Далее мы расскажем, как браузеры традиционно обмениваются данными, и сравним это с обменом данными с AJAX.

Обмен данными без AJAX

В обычной модели браузер отправляет запрос HTTP на сторону сервера, когда пользователь выполняет действие. Веб-сервер получает и обрабатывает запрос и отправляет обновленные данные в браузер. Затем браузер обновляет веб-страницу с новыми данными.

При таком подходе браузер перезагружает всю страницу, даже если запрошенные данные содержат незначительные изменения. Кроме того, браузер может отправлять частые запросы, которые загружают программное обеспечение веб-сервера.

Обмен данными с AJAX

Вместо обновления всей страницы AJAX использует функцию JavaScript для создания объекта XMLHttpRequest в браузере. Затем система собирает информацию о странице в файл формата XML, который объект XMLHttpRequest отправляет на веб-сервер. Веб-сервер обрабатывает запрос и отправляет в ответ запрошенные данные. Наконец, на текущем экране в браузере появляются последние данные. При этом страница не обновляется.

Почему AJAX эффективнее?

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

Как AWS может удовлетворить ваши требования к разработке веб-приложений?

Amazon Web Services (AWS) предлагает несколько технологий, которые помогут вам в разработке веб-приложений.

• AWS Amplify предоставляет набор инструментов для простого создания, развертывания и масштабирования веб- и мобильных приложений. AWS Amplify можно использовать для создания кроссплатформенных приложений и удобных интерфейсов приложений, а также размещения веб-приложений в безопасных сетях доставки контента AWS.
• API шлюз AWS – это полностью управляемый сервис для создания, развертывания и управления API в любом масштабе. Он обрабатывает сотни одновременных вызовов API в безопасной, гибкой и прозрачной среде. API шлюз AWS можно использовать для создания API RESTful и HTTP для веб-приложений.
• AWS Lambda – это бессерверный сервис, который позволяет запускать коды без выделения инфраструктуры. Вычислительные ресурсы приложения можно масштабировать по требованию и платить только за то, что вы используете.

Вы можете использовать API шлюз Amazon для предоставления функций Lambda в виде RESTful API. Затем можно создать динамическое веб-приложение, добавив JavaScript на стороне клиента, который выполняет вызовы AJAX к открытым API. Узнайте, как создать бессерверное приложение с помощью AWS Amplify, AWS Lambda и API шлюза AWS.

Создайте учетную запись уже сегодня и начните работу с AJAX на AWS.