Как перемещаться по пейджерам на основе JavaScript и собирать ссылки

Понимание разбиения на страницы на основе JavaScript и проблем API

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

Одна из таких проблем возникает при попытке получить ссылки или данные с веб-сайтов такого типа. Если вы не можете вручную перемещаться по сотням страниц, лучший подход — смоделировать события кликов на пейджере JavaScript. Эта технология автоматизирует процедуру навигации, значительно упрощая обязанности по сбору данных.

В некоторых случаях на вкладке «Сеть» в инструментах разработчика браузера могут отображаться конечные точки API, предоставляющие полезную информацию. Однако прямое взаимодействие с этими конечными точками иногда может вызывать проблемы, поскольку они могут не разрешать определенные методы HTTP, такие как запросы GET, которые обычно используются для получения данных.

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

Освоение пагинации на основе JavaScript и навигации по API

Первый представленный скрипт использует чистый JavaScript для динамического исследования страницы с нумерацией страниц на основе JavaScript. Основная идея этого метода состоит в том, чтобы имитировать нажатие пользователем кнопок пейджера, выбирая и активируя события щелчка на соответствующих элементах HTML. Определив контейнер нумерации страниц с помощью документ.querySelector() команда, мы можем получить доступ к различным кнопкам страницы и автоматизировать навигацию. Этот подход идеален для случаев, когда изменение URL-адреса вручную невозможно, и вам требуется быстрый внешний интерфейс для взаимодействия с механизмом нумерации страниц.

Во втором сценарии мы использовали Puppeteer, пакет Node.js для управления безгласным браузером. Этот скрипт не только имитирует нажатия кнопок пейджера, но и автоматизирует весь процесс перемещения по многочисленным страницам, собирая все рекламные ссылки на каждой итерации. Puppeteer позволяет вам очищать динамически загружаемый контент, напрямую взаимодействуя с элементами DOM, как это сделал бы настоящий пользователь. Одним из важнейших компонентов здесь является страница.оценка(), что позволяет выполнять код JavaScript в контексте страницы. Это идеально подходит для сбора данных, таких как рекламные ссылки на страницах с разбивкой на страницы.

Оба сценария требуют обработки ошибок, чтобы гарантировать правильную работу автоматизированного процесса, даже если определенные части отсутствуют или API ведет себя неожиданно. Например, консоль.ошибка() регистрирует любые ошибки, возникшие во время выполнения, например, когда целевая кнопка не найдена на странице. Кроме того, Кукольник страница.waitForSelector() Команда гарантирует, что динамические компоненты, такие как рекламные ссылки, будут полностью загружены до того, как скрипт попытается взаимодействовать. Это делает его чрезвычайно удобным при работе с веб-сайтами, которые в значительной степени полагаются на JavaScript для отображения контента, поскольку позволяет избежать проблем, вызванных отсутствующими или неполными загрузками страниц.

Готовый скрипт использует Axios, HTTP-клиент Node.js, основанный на обещаниях, на бэкэнде. Здесь мы пытаемся получить данные непосредственно из конечной точки API, которая, согласно ошибке HTTP 405, не принимает ПОЛУЧАТЬ запросы. Чтобы избежать этого, скрипт отправляет ПОЧТА запрос, который может быть одобрен сервером. Этот метод больше подходит для пользователей, которые хотят извлекать данные без необходимости навигации по интерфейсу, но он предполагает понимание структуры и поведения API сервера. Обработка ошибок гарантирует, что о любых сбоях запросов API будет сообщено, что упрощает устранение проблем с получением данных на стороне сервера.

// Select the pagination container
const pagerContainer = document.querySelector('.pagination');

// Function to trigger a click event on a pager button
function clickPageButton(pageNumber) {
  const buttons = pagerContainer.querySelectorAll('button');
  const targetButton = [...buttons].find(btn => btn.textContent === String(pageNumber));
  if (targetButton) {
    targetButton.click();
  } else {
    console.error('Page button not found!');
  }
}

// Example usage: clicking the 2nd page button
clickPageButton(2);

const puppeteer = require('puppeteer');

// Function to scrape all ad links from a paginated website
async function scrapeAds() {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://www.supralift.com/uk/itemsearch/results');

  let ads = [];
  let hasNextPage = true;

  while (hasNextPage) {
    // Scrape the ad links from the current page
    const links = await page.evaluate(() => {
      return Array.from(document.querySelectorAll('.ad-link-selector')).map(a => a.href);
    });
    ads.push(...links);

    // Try to click the next page button
    const nextButton = await page.$('.pagination-next');
    if (nextButton) {
      await nextButton.click();
      await page.waitForSelector('.ad-link-selector');
    } else {
      hasNextPage = false;
    }
  }

  await browser.close();
  return ads;
}

// Call the scraping function and log results
scrapeAds().then(ads => console.log(ads));

const axios = require('axios');

// Function to fetch data from the API using POST instead of GET
async function fetchData() {
  try {
    const response = await axios.post('https://www.supralift.com/api/search/item/summary', {
      headers: {
        'Content-Type': 'application/json'
      },
      data: { /* Add necessary POST body if applicable */ }
    });

    console.log(response.data);
  } catch (error) {
    console.error('Error fetching data:', error.response ? error.response.data : error.message);
  }
}

// Invoke the fetchData function
fetchData();

Оптимизация разбиения на страницы JavaScript для веб-скрапинга и сбора данных

При изучении веб-сайтов с системой нумерации страниц на основе JavaScript крайне важно изучить несколько методов быстрого извлечения данных. Одним из вариантов, который иногда игнорируется, является перехват сетевых запросов, выдаваемых механизмом нумерации страниц. Внимательно просматривая запросы, выполняемые в инструментах разработчика браузера, особенно на вкладке «Сеть», вы можете определить конечные точки, используемые для получения данных для каждой страницы. Системы на основе JavaScript могут использовать АЯКС или принести запросы на динамическую загрузку данных без изменения URL-адреса, в отличие от традиционной пагинации, требующей изменения параметров URL-адреса.

Чтобы извлечь ссылки или данные с таких веб-сайтов, перехватывайте запросы и получайте возвращаемые ими данные. Puppeteer и другие инструменты позволяют отслеживать сетевой трафик и собирать полезные данные. Когда эта стратегия неосуществима из-за ограничений на стороне сервера, понимание поведения API становится критически важным. Некоторые API, такие как Супралифт, может запрещать определенные методы, такие как ПОЛУЧАТЬ и разрешать только ПОЧТА запросы. Адаптация ваших запросов в соответствии с предполагаемым методом API является эффективным решением этих ограничений.

Наконец, при очистке данных с разбивкой на страницы очень важно предусмотреть подходящие паузы между запросами. Многие веб-сайты используют алгоритмы ограничения скорости для предотвращения злоупотреблений, а отправка слишком большого количества запросов подряд может привести к тому, что ваш IP-адрес будет временно занесен в черный список. Чтобы избежать обнаружения и обеспечить успешное извлечение данных, включите случайную задержку между запросами или ограничьте количество одновременных запросов. Используя такие инструменты, как аксиомы в Node.js и правильная обработка ставок — замечательный подход для достижения этой цели.