Cara Menavigasi Situs Web Pager Berbasis JavaScript dan Mengumpulkan Tautan

Memahami Pagination Berbasis JavaScript dan Tantangan API

Situs web dengan penomoran halaman berbasis JavaScript dapat mempersulit pengunjung untuk menavigasi materi, terutama jika kontrol penomoran halaman tidak mengungkapkan parameter URL apa pun. Hal ini membuat modifikasi atau otomatisasi navigasi halaman tidak mungkin dilakukan menggunakan pendekatan konvensional seperti mengubah kueri URL. Dimungkinkan untuk terlibat dengan pager tersebut melalui metode yang berbeda.

Salah satu masalah tersebut terjadi ketika mencoba mengambil tautan atau data dari situs web jenis ini. Jika Anda tidak dapat menavigasi ratusan halaman secara manual, pendekatan yang lebih baik adalah dengan menyimulasikan peristiwa klik pada pager JavaScript. Teknologi ini mengotomatiskan prosedur navigasi, sangat menyederhanakan tugas pengumpulan data.

Dalam beberapa keadaan, tab "Jaringan" di Alat Pengembang browser mungkin menampilkan titik akhir API yang memberikan informasi berguna. Namun, berinteraksi secara langsung dengan titik akhir ini terkadang dapat menimbulkan masalah karena titik akhir tersebut mungkin tidak mengizinkan metode HTTP tertentu, seperti permintaan GET, yang biasanya digunakan untuk mengambil data.

Artikel ini menjelaskan cara menyimulasikan peristiwa klik pada pager JavaScript situs web dan cara menangani batasan API yang membatasi akses langsung ke data yang Anda perlukan. Kami juga akan mencari cara untuk mengatasi batasan metode API tertentu untuk memastikan bahwa Anda mengumpulkan semua informasi penting secara efektif.

Menguasai Pagination Berbasis JavaScript dan Navigasi API

Skrip pertama yang diperkenalkan menggunakan JavaScript murni untuk menjelajahi halaman secara dinamis dengan penomoran halaman berbasis JavaScript. Ide dasar di balik metode ini adalah meniru pengguna yang menekan tombol pager dengan memilih dan mengaktifkan peristiwa klik pada elemen HTML yang sesuai. Dengan mengidentifikasi wadah penomoran halaman menggunakan dokumen.querySelector() perintah, kita dapat mengakses berbagai tombol halaman dan mengotomatiskan navigasi. Pendekatan ini ideal untuk kasus di mana mengubah URL secara manual bukanlah suatu pilihan dan Anda memerlukan antarmuka front-end yang cepat untuk berinteraksi dengan mekanisme penomoran halaman.

Di skrip kedua, kami menggunakan Puppeteer, paket Node.js untuk mengontrol browser tanpa kepala. Skrip ini tidak hanya mensimulasikan penekanan tombol pager, tetapi juga mengotomatiskan seluruh proses penjelajahan beberapa halaman, mengumpulkan semua link iklan pada setiap iterasi. Dalang memungkinkan Anda mengikis konten yang dimuat secara dinamis dengan berinteraksi langsung dengan elemen DOM, seperti yang dilakukan pengguna sebenarnya. Salah satu komponen utama di sini adalah halaman.evaluate(), yang memungkinkan kode JavaScript dieksekusi dalam konteks halaman. Ini sempurna untuk mengumpulkan data seperti tautan iklan di seluruh halaman yang diberi nomor halaman.

Kedua skrip memerlukan penanganan kesalahan untuk memastikan bahwa proses otomatis berfungsi dengan baik meskipun bagian tertentu hilang atau API berperilaku tidak terduga. Misalnya, konsol.kesalahan() mencatat kesalahan apa pun yang ditemui selama eksekusi, seperti ketika tombol yang ditargetkan tidak ditemukan di halaman. Selain itu, Dalang halaman.waitForSelector() perintah memastikan bahwa komponen dinamis, seperti tautan iklan, dimuat sepenuhnya sebelum skrip mencoba berinteraksi. Hal ini membuatnya sangat berguna ketika bekerja dengan situs web yang sangat bergantung pada JavaScript untuk merender konten, karena menghindari masalah yang disebabkan oleh pemuatan halaman yang hilang atau tidak lengkap.

Skrip yang sudah selesai menggunakan Axios, klien HTTP Node.js berdasarkan janji, di backend. Di sini, kami mencoba mengambil data langsung dari titik akhir API, yang menurut kesalahan HTTP 405, tidak diterima MENDAPATKAN pertanyaan. Untuk menghindari hal ini, skrip mengirimkan a POS permintaan, yang mungkin disetujui oleh server. Metode ini lebih cocok untuk pengguna yang ingin mengekstrak data tanpa harus menavigasi front-end, namun melibatkan pemahaman struktur dan perilaku API server. Penanganan kesalahan menjamin bahwa setiap kegagalan permintaan API dilaporkan, sehingga lebih mudah untuk memecahkan masalah kesulitan pengambilan data sisi server.

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

Mengoptimalkan Pagination JavaScript untuk Pengikisan Web dan Pengumpulan Data

Saat menjelajahi situs web dengan sistem penomoran halaman berbasis JavaScript, penting untuk menyelidiki beberapa metode untuk mengekstraksi data dengan cepat. Salah satu opsi yang terkadang diabaikan adalah mencegat permintaan jaringan yang dikeluarkan oleh mekanisme penomoran halaman. Dengan meninjau secara cermat kueri yang dilakukan di Alat Pengembang browser, terutama tab "Jaringan", Anda dapat menentukan titik akhir yang digunakan untuk mengambil data untuk setiap laman. Sistem berbasis JavaScript dapat digunakan AJAX atau mengambil permintaan untuk memuat data secara dinamis tanpa mengubah URL, berbeda dengan penomoran halaman tradisional yang memerlukan perubahan parameter URL.

Untuk mengekstrak tautan atau data dari situs web tersebut, intersepsi permintaan dan ambil data yang dikembalikannya. Dalang dan alat lainnya memungkinkan Anda memantau lalu lintas jaringan dan mengumpulkan data yang berguna. Ketika strategi ini tidak dapat diterapkan karena kendala sisi server, memahami perilaku API menjadi sangat penting. Beberapa API, seperti Supralift, mungkin melarang metode tertentu seperti MENDAPATKAN dan hanya mengizinkan POS pertanyaan. Menyesuaikan kueri Anda agar sesuai dengan metode API yang dimaksudkan adalah solusi efektif untuk keterbatasan ini.

Terakhir, saat mengambil data yang diberi nomor halaman, penting untuk memberikan jeda yang sesuai di antara permintaan. Banyak situs web yang menggunakan algoritme pembatas kecepatan untuk mencegah penyalahgunaan, dan mengirimkan terlalu banyak permintaan secara berurutan dapat mengakibatkan alamat IP Anda dimasukkan ke dalam daftar hitam untuk sementara. Untuk menghindari deteksi dan memastikan ekstraksi data berhasil, sertakan penundaan acak antar kueri atau batasi jumlah permintaan bersamaan. Menggunakan alat seperti aksio di Node.js dan penanganan laju yang tepat adalah pendekatan yang bagus untuk mencapai hal ini.