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

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

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

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

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

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

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

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

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

Обидва сценарії вимагають обробки помилок, щоб забезпечити належну роботу автоматизованого процесу, навіть якщо певні частини відсутні або API поводиться несподівано. Наприклад, console.error() реєструє будь-які помилки, які виникають під час виконання, наприклад, коли цільова кнопка не знайдена на сторінці. Крім того, Puppeteer's page.waitForSelector() Команда гарантує, що динамічні компоненти, такі як рекламні посилання, повністю завантажуються перед тим, як сценарій спробує взаємодіяти. Це робить його надзвичайно зручним під час роботи з веб-сайтами, які значною мірою покладаються на 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 можуть використовувати AJAX або принести запити на динамічне завантаження даних без зміни URL-адреси, на відміну від традиційної пагінації, яка вимагає зміни параметрів URL-адреси.

Щоб отримати посилання або дані з таких веб-сайтів, перехопіть запити та отримайте дані, які вони повертають. Puppeteer та інші інструменти дозволяють контролювати мережевий трафік і збирати корисні дані. Коли ця стратегія неможлива через обмеження на стороні сервера, розуміння поведінки API стає критичним. Деякі API, наприклад Супраліфт, може забороняти певні методи, наприклад ОТРИМАТИ і тільки дозволити ПОСТ запити. Адаптація ваших запитів відповідно до призначеного методу API є ефективним обхідним шляхом для цих обмежень.

Нарешті, під час сканування розбитих на сторінки даних важливо передбачати відповідні паузи між запитами. Багато веб-сайтів використовують алгоритми обмеження швидкості, щоб запобігти зловживанням, і надсилання занадто великої кількості запитів поспіль може призвести до того, що вашу IP-адресу тимчасово занесуть у чорний список. Щоб уникнути виявлення та забезпечити успішне вилучення даних, додайте довільну затримку між запитами або обмежте кількість одночасних запитів. Використання таких інструментів, як аксіос у Node.js, і правильна обробка швидкості є чудовим підходом для досягнення цього.