Jak poruszać się po stronach pagera opartych na JavaScript i zbierać linki

Zrozumienie wyzwań związanych z paginacją i interfejsami API w oparciu o JavaScript

Witryny internetowe z paginacją opartą na JavaScript mogą utrudniać odwiedzającym nawigację po materiale, zwłaszcza jeśli elementy sterujące paginacją nie ujawniają żadnych parametrów adresu URL. Uniemożliwia to modyfikację lub automatyzację nawigacji strony przy użyciu konwencjonalnych metod, takich jak zmiana zapytań URL. Z takimi pagerami można nawiązać kontakt na różne sposoby.

Jeden z takich problemów pojawia się podczas próby pobrania linków lub danych z tego typu witryn internetowych. Jeśli nie możesz ręcznie poruszać się po setkach stron, lepszym podejściem jest symulacja zdarzeń kliknięcia na pagerze JavaScript. Technologia ta automatyzuje procedurę nawigacji, znacznie upraszczając obowiązki związane z gromadzeniem danych.

W niektórych okolicznościach karta „Sieć” w Narzędziach programistycznych przeglądarki może wyświetlać punkty końcowe API, które dostarczają przydatnych informacji. Jednak bezpośrednia interakcja z tymi punktami końcowymi może czasami powodować problemy, ponieważ mogą one nie zezwalać na określone metody HTTP, takie jak żądania GET, które są powszechnie używane do pobierania danych.

W tym artykule wyjaśniono, jak symulować zdarzenia kliknięcia na pagerze JavaScript witryny i jak radzić sobie z ograniczeniami interfejsu API, które ograniczają bezpośredni dostęp do wymaganych danych. Przyjrzymy się także sposobom obejścia ograniczeń określonych metod interfejsu API, aby zapewnić skuteczne gromadzenie wszystkich ważnych informacji.

Opanowanie paginacji opartej na JavaScript i nawigacji API

Pierwszy wprowadzony skrypt wykorzystuje czysty JavaScript do dynamicznego przeglądania strony z paginacją opartą na JavaScript. Podstawową ideą tej metody jest imitacja użytkownika uderzającego w przyciski pagera poprzez wybieranie i aktywowanie zdarzeń kliknięcia na odpowiednich elementach HTML. Identyfikując kontener stronicowania za pomocą dokument.querySelector() polecenia, możemy uzyskać dostęp do różnych przycisków strony i zautomatyzować nawigację. To podejście jest idealne w przypadkach, gdy ręczna zmiana adresu URL nie wchodzi w grę i potrzebny jest szybki interfejs front-end do współpracy z mechanizmem paginacji.

W drugim skrypcie wykorzystaliśmy Puppeteer, pakiet Node.js do sterowania przeglądarką bezgłową. Skrypt ten nie tylko symuluje naciśnięcia przycisku pagera, ale także automatyzuje cały proces podróżowania po wielu stronach, zbierając wszystkie linki do reklam przy każdej iteracji. Puppeteer umożliwia zeskrobywanie dynamicznie ładowanej zawartości poprzez bezpośrednią interakcję z elementami DOM, podobnie jak zrobiłby to prawdziwy użytkownik. Jednym z głównych elementów jest tutaj strona.ocena(), który umożliwia wykonanie kodu JavaScript w kontekście strony. Jest to idealne rozwiązanie do gromadzenia danych, takich jak linki reklamowe na stronach podzielonych na strony.

Obydwa skrypty wymagają obsługi błędów, aby mieć pewność, że zautomatyzowany proces działa dobrze, nawet jeśli brakuje określonych elementów lub interfejs API zachowuje się nieoczekiwanie. Na przykład, konsola.błąd() rejestruje wszelkie błędy napotkane podczas wykonywania, na przykład brak docelowego przycisku na stronie. Dodatkowo Lalkarz strona.waitForSelector() polecenie gwarantuje, że komponenty dynamiczne, takie jak linki do reklam, zostaną w pełni załadowane, zanim skrypt podejmie próbę interakcji. Dzięki temu jest niezwykle przydatny podczas pracy ze stronami internetowymi, które w dużym stopniu opierają się na JavaScript do renderowania treści, ponieważ pozwala uniknąć problemów spowodowanych brakującym lub niekompletnym ładowaniem stron.

Gotowy skrypt korzysta z backendu Axios, klienta HTTP Node.js opartego na obietnicach. Tutaj próbujemy pobrać dane bezpośrednio z punktu końcowego API, który zgodnie z błędem HTTP 405 nie akceptuje DOSTAWAĆ zapytania. Aby tego uniknąć, skrypt wysyła plik POST żądanie, które może zostać zatwierdzone przez serwer. Ta metoda jest bardziej odpowiednia dla użytkowników, którzy chcą wyodrębnić dane bez konieczności poruszania się po interfejsie, ale wymaga zrozumienia struktury i zachowania interfejsu API serwera. Obsługa błędów gwarantuje raportowanie wszelkich niepowodzeń żądań API, co ułatwia rozwiązywanie problemów z pobieraniem danych po stronie serwera.

// 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();

Optymalizacja paginacji JavaScript pod kątem przeglądania stron internetowych i gromadzenia danych

Eksplorując strony internetowe z systemem paginacji opartym na JavaScript, niezwykle ważne jest zapoznanie się z kilkoma metodami szybkiego wyodrębniania danych. Czasami ignorowaną opcją jest przechwytywanie żądań sieciowych wysyłanych przez mechanizm stronicowania. Uważnie przeglądając zapytania wykonywane w Narzędziach programistycznych przeglądarki, zwłaszcza na karcie „Sieć”, możesz określić punkty końcowe wykorzystywane do pobierania danych dla każdej strony. Mogą korzystać systemy oparte na JavaScript AJAKS Lub aportować żądania dynamicznego ładowania danych bez zmiany adresu URL, w przeciwieństwie do tradycyjnej paginacji, która wymaga zmiany parametrów adresu URL.

Aby wyodrębnić linki lub dane z takich witryn, przechwytuj żądania i pobieraj zwracane przez nie dane. Puppeteer i inne narzędzia umożliwiają monitorowanie ruchu sieciowego i zbieranie przydatnych danych. Gdy ta strategia nie jest wykonalna ze względu na ograniczenia po stronie serwera, zrozumienie zachowania interfejsu API staje się krytyczne. Niektóre interfejsy API, np Supralift, może zabronić określonych metod, takich jak DOSTAWAĆ i tylko pozwalaj POST zapytania. Dostosowanie zapytań do zamierzonej metody interfejsu API jest skutecznym obejściem tych ograniczeń.

Wreszcie, podczas skrobania danych podzielonych na strony, ważne jest, aby uwzględnić odpowiednie przerwy między żądaniami. Wiele witryn internetowych wykorzystuje algorytmy ograniczające szybkość, aby zapobiec nadużyciom, a wysyłanie zbyt wielu żądań w krótkim odstępie czasu może spowodować tymczasowe umieszczenie Twojego adresu IP na czarnej liście. Aby uniknąć wykrycia i zapewnić pomyślną ekstrakcję danych, uwzględnij losowe opóźnienie między zapytaniami lub ogranicz liczbę jednoczesnych żądań. Korzystanie z narzędzi takich jak osie w Node.js, a właściwa obsługa stawek to wspaniałe podejście do osiągnięcia tego celu.