Як переміщатися веб-сторінками на основі JavaScript і збирати посилання

Розуміння розбиття на сторінки на основі JavaScript і викликів API

Веб-сайти з розбивкою на сторінки на основі JavaScript можуть ускладнювати відвідувачам навігацію матеріалом, особливо якщо елементи керування розбивкою на сторінки не розкривають жодних параметрів URL-адреси. Це унеможливлює зміну або автоматизацію навігації сторінками за допомогою традиційних підходів, таких як зміна URL-запитів. Взаємодіяти з такими пейджерами можна різними способами.

Одна з таких проблем виникає під час спроби отримати посилання або дані з таких типів веб-сайтів. Якщо ви не можете вручну переміщатися сотнями сторінок, кращим підходом є імітація подій кліків на пейджері JavaScript. Ця технологія автоматизує процедуру навігації, значно спрощуючи збір даних.

У деяких випадках вкладка «Мережа» в інструментах розробника веб-переглядача може відображати кінцеві точки API, які надають корисну інформацію. Однак пряма взаємодія з цими кінцевими точками іноді може викликати проблеми, оскільки вони можуть не дозволяти певні методи HTTP, наприклад запити GET, які зазвичай використовуються для отримання даних.

У цій статті пояснюється, як імітувати події клацання на пейджері JavaScript веб-сайту та як працювати з обмеженнями API, які обмежують прямий доступ до потрібних вам даних. Ми також розглянемо способи обходу обмежень на певні методи API, щоб забезпечити ефективний збір усієї важливої ​​інформації.

Команда	Приклад використання
document.querySelector()	Цей метод використовується для вибору першого елемента, який відповідає певному CSS-селектору. Сценарій використовує його для вибору контейнера пагінації (const pagerContainer = document.querySelector('.pagination')) і керування кнопками пейджера.
Array.from()	Перетворює масивоподібний або ітерований об’єкт на правильний масив. Сценарій перетворює NodeList рекламних посилань на масив для полегшення маніпулювання та зіставлення (Array.from(document.querySelectorAll('.ad-link-selector')).
puppeteer.launch()	При використанні з Puppeteer ця команда запускає новий безголовий екземпляр браузера. Він підтримує автоматизовані дії браузера, такі як навігація сторінкою та імітація взаємодії користувача (const browser = await puppeteer.launch()).
page.evaluate()	In Puppeteer, this method allows you to run JavaScript code in the context of the web page you are controlling. It is used here to extract ad links from the DOM (await page.evaluate(() =>У Puppeteer цей метод дозволяє запускати код JavaScript у контексті веб-сторінки, якою ви керуєте. Він використовується тут для отримання рекламних посилань із DOM (очікуйте page.evaluate(() => {...})).
page.waitForSelector()	Очікує, поки вказаний селектор з’явиться на сторінці, перш ніж продовжити, гарантуючи, що всі динамічні елементи завантажено. Це особливо важливо під час перегляду розбитого на сторінки вмісту, оскільки нові оголошення з’являються з кожною зміною сторінки (очікуйте page.waitForSelector('.ad-link-selector').
axios.post()	Надсилає запит HTTP POST на надану URL-адресу. Зразок намагається уникнути проблеми 405, отримуючи дані через POST, а не GET (const response = await axios.post()).
console.error()	Використовується для запису повідомлень про помилки на консоль. Це допомагає з налагодженням, відображаючи інформацію про помилку, коли певні елементи або запити API не виконуються (console.error('Кнопку сторінки не знайдено!').
$()	Скорочення вибору елементів у Puppeteer, подібне до document.querySelector(). Цей сценарій використовує кнопку «Наступна сторінка», щоб створити подію клацання пагінації (const nextButton = await page.$('.pagination-next').
click()	Цей підхід повторює клацання елемента HTML. У сценаріях він використовується для програмної навігації по пейджеру шляхом натискання кнопки відповідної сторінки.

Освоєння розбиття сторінок на основі JavaScript і навігації API

Перший представлений скрипт використовує чистий JavaScript для динамічного перегляду сторінки з розбивкою сторінок на основі JavaScript. Основна ідея цього методу полягає в імітації користувача, який натискає кнопки пейджера, вибираючи та активуючи події клацання у відповідних елементах HTML. Шляхом ідентифікації контейнера сторінки за допомогою ми можемо отримати доступ до різних кнопок сторінок і автоматизувати навігацію. Цей підхід ідеально підходить для випадків, коли вручну змінити URL-адресу неможливо, і вам потрібен швидкий зовнішній інтерфейс для взаємодії з механізмом розбиття на сторінки.

У другому сценарії ми використовували Puppeteer, пакет Node.js для керування безголовим браузером. Цей сценарій не тільки імітує натискання кнопок пейджера, але й автоматизує весь процес перегляду численних сторінок, збираючи всі рекламні посилання під час кожної ітерації. Puppeteer дозволяє вам очищати динамічно завантажуваний вміст, взаємодіючи безпосередньо з елементами DOM, подібно до того, як це робить реальний користувач. Одним із головних компонентів тут є , що дозволяє виконувати код JavaScript у контексті сторінки. Це ідеально підходить для збору даних, наприклад рекламних посилань на сторінках із розбивкою на сторінки.

Обидва сценарії вимагають обробки помилок, щоб забезпечити належну роботу автоматизованого процесу, навіть якщо певні частини відсутні або API поводиться несподівано. Наприклад, реєструє будь-які помилки, які виникають під час виконання, наприклад, коли цільова кнопка не знайдена на сторінці. Крім того, Puppeteer's Команда гарантує, що динамічні компоненти, такі як рекламні посилання, повністю завантажуються перед тим, як сценарій спробує взаємодіяти. Це робить його надзвичайно зручним під час роботи з веб-сайтами, які значною мірою покладаються на JavaScript для відтворення вмісту, оскільки це дозволяє уникнути проблем, спричинених відсутніми або неповними завантаженнями сторінок.

Готовий сценарій використовує Axios, HTTP-клієнт Node.js на основі обіцянок, на сервері. Тут ми намагаємося отримати дані безпосередньо з кінцевої точки API, яка, згідно з помилкою HTTP 405, не приймає запити. Щоб уникнути цього, сценарій надсилає a запит, який може бути схвалений сервером. Цей метод більше підходить для користувачів, які хочуть видобувати дані без необхідності переходити до інтерфейсу, але він передбачає розуміння структури та поведінки 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, і правильна обробка швидкості є чудовим підходом для досягнення цього.

1. Що таке пагінація на основі JavaScript?
2. Пагінація на основі JavaScript — це спосіб, за допомогою якого кнопки пагінації використовують JavaScript для динамічного завантаження свіжого матеріалу, часто без зміни URL-адреси.
3. Як я можу отримати дані з веб-сайту, розбитого на сторінки JavaScript?
4. Ви можете використовувати такі інструменти, як або для автоматизації натискання кнопок розбиття на сторінки або захоплення мережевих запитів під час розбиття на сторінки.
5. Чому API повертає помилку 405 Method Not Allowed?
6. Це відбувається тому, що API підтримує лише певні методи HTTP. Наприклад, може заблокувати запити, дозволяючи запити.
7. Чи можу я змінити URL-адресу для навігації сторінками?
8. У пагінаціях на основі JavaScript ви часто не можете безпосередньо змінити URL-адресу. Для навігації вам потрібно буде ініціювати події JavaScript або використовувати кінцеві точки API.
9. Які інструменти я можу використовувати для сканування даних із розбивкою на сторінки?
10. Серед популярних програм для сканування для автоматизації браузера та для запитів HTTP. Обидва ефективно обробляють розбитий на сторінки вміст.

Робота з розбивкою на сторінки на основі JavaScript вимагає поєднання зовнішніх і внутрішніх рішень. Незалежно від того, використовуєте ви Puppeteer для автоматизації дій у браузері чи Axios для безпосереднього взаємодії з кінцевими точками API, ефективне копіювання вимагає ретельного проектування та виконання.

Розуміння того, як веб-сайт завантажує та обробляє дані, дає змогу писати ефективні сценарії для отримання необхідної інформації. Щоб уникнути частих небезпек, таких як помилка 405, уважно відстежуйте мережевий трафік, керуйте обмеженнями швидкості та використовуйте належні методи HTTP.