Cách điều hướng các trang web máy nhắn tin dựa trên JavaScript và thu thập liên kết

Hiểu các thách thức về phân trang và API dựa trên JavaScript

Các trang web có phân trang dựa trên JavaScript có thể gây khó khăn cho khách truy cập khi điều hướng qua tài liệu, đặc biệt nếu các điều khiển phân trang không tiết lộ bất kỳ thông số URL nào. Điều này khiến không thể sửa đổi hoặc tự động hóa việc điều hướng trang bằng các phương pháp thông thường như thay đổi truy vấn URL. Có thể tương tác với các máy nhắn tin như vậy thông qua các phương pháp khác nhau.

Một vấn đề như vậy xảy ra khi cố gắng truy xuất liên kết hoặc dữ liệu từ các loại trang web này. Nếu bạn không thể điều hướng hàng trăm trang theo cách thủ công thì cách tiếp cận tốt hơn là mô phỏng các sự kiện nhấp chuột trên máy nhắn tin JavaScript. Công nghệ này tự động hóa quy trình điều hướng, đơn giản hóa đáng kể nhiệm vụ thu thập dữ liệu.

Trong một số trường hợp, tab "Mạng" trong Công cụ dành cho nhà phát triển của trình duyệt có thể hiển thị các điểm cuối API cung cấp thông tin hữu ích. Tuy nhiên, việc tương tác trực tiếp với các điểm cuối này đôi khi có thể gây ra sự cố vì chúng có thể không cho phép một số phương thức HTTP nhất định, chẳng hạn như yêu cầu GET, thường được sử dụng để truy xuất dữ liệu.

Bài viết này giải thích cách mô phỏng các sự kiện nhấp chuột trên máy nhắn tin JavaScript của trang web và cách xử lý các giới hạn API hạn chế quyền truy cập trực tiếp vào dữ liệu bạn yêu cầu. Chúng tôi cũng sẽ xem xét các cách giải quyết các giới hạn đối với các phương pháp API cụ thể để đảm bảo rằng bạn thu thập tất cả thông tin quan trọng một cách hiệu quả.

Yêu cầu	Ví dụ về sử dụng
document.querySelector()	Phương pháp này được sử dụng để chọn phần tử đầu tiên khớp với bộ chọn CSS nhất định. Tập lệnh sử dụng nó để chọn vùng chứa phân trang (const pagerContainer = document.querySelector('.pagination')) và điều khiển các nút máy nhắn tin.
Array.from()	Chuyển đổi một đối tượng giống như mảng hoặc có thể lặp thành một mảng thích hợp. Tập lệnh chuyển đổi Danh sách nút của các liên kết quảng cáo thành một mảng để thao tác và ánh xạ dễ dàng hơn (Array.from(document.querySelectorAll('.ad-link-selector')).
puppeteer.launch()	Khi được sử dụng với Puppeteer, lệnh này sẽ khởi chạy một phiên bản trình duyệt không có đầu mới. Nó hỗ trợ các hành động tự động của trình duyệt như điều hướng trang và mô phỏng tương tác của người dùng (const browser = đang chờ con rối.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(() =>Trong Puppeteer, phương pháp này cho phép bạn chạy mã JavaScript trong ngữ cảnh của trang web bạn đang kiểm soát. Nó được sử dụng ở đây để trích xuất các liên kết quảng cáo từ DOM (await page.evaluate(() => {...})).
page.waitForSelector()	Chờ một bộ chọn được chỉ định xuất hiện trên trang trước khi tiếp tục, đảm bảo rằng tất cả các phần tử động đều được tải. Điều này đặc biệt quan trọng khi lướt qua nội dung được phân trang, vì quảng cáo mới xuất hiện sau mỗi lần thay đổi trang (await page.waitForSelector('.ad-link-selector').
axios.post()	Gửi yêu cầu HTTP POST tới URL được cung cấp. Mẫu cố gắng tránh sự cố 405 bằng cách lấy dữ liệu qua POST thay vì GET (const reply = wait axios.post()).
console.error()	Được sử dụng để ghi thông báo lỗi vào bảng điều khiển. Nó giúp gỡ lỗi bằng cách hiển thị thông tin lỗi khi một số mục hoặc yêu cầu API nhất định không thành công (console.error('Không tìm thấy nút trang!').
$()	Một cách viết tắt để chọn các phần tử trong Puppeteer, có thể so sánh với document.querySelector(). Tập lệnh này sử dụng nút "Trang tiếp theo" để tạo sự kiện nhấp chuột phân trang (const nextButton = chờ trang.$('.pagination-next').
click()	Cách tiếp cận này tái tạo một cú nhấp chuột vào một phần tử HTML. Trong các tập lệnh, nó được sử dụng để điều hướng máy nhắn tin theo chương trình bằng cách nhấp vào nút trang thích hợp.

Nắm vững cách phân trang và điều hướng API dựa trên JavaScript

Tập lệnh đầu tiên được giới thiệu sử dụng JavaScript thuần túy để khám phá động một trang có phân trang dựa trên JavaScript. Ý tưởng cơ bản đằng sau phương pháp này là bắt chước người dùng nhấn các nút máy nhắn tin bằng cách chọn và kích hoạt các sự kiện nhấp chuột trên các phần tử HTML thích hợp. Bằng cách xác định vùng chứa phân trang bằng cách sử dụng lệnh, chúng ta có thể truy cập các nút trang khác nhau và tự động điều hướng. Cách tiếp cận này lý tưởng cho những trường hợp việc thay đổi URL theo cách thủ công không phải là một tùy chọn và bạn yêu cầu giao diện ngoại vi nhanh chóng để tương tác với cơ chế phân trang.

Trong tập lệnh thứ hai, chúng tôi đã sử dụng Puppeteer, gói Node.js để điều khiển trình duyệt không có giao diện người dùng. Tập lệnh này không chỉ mô phỏng các lần nhấn nút máy nhắn tin mà còn tự động hóa toàn bộ quá trình di chuyển qua nhiều trang, thu thập tất cả các liên kết quảng cáo với mỗi lần lặp lại. Puppeteer cho phép bạn loại bỏ nội dung được tải động bằng cách tương tác trực tiếp với các phần tử DOM, giống như một người dùng thực sự. Một trong những thành phần chính ở đây là , cho phép mã JavaScript được thực thi trong ngữ cảnh trang. Điều này hoàn hảo để thu thập dữ liệu như liên kết quảng cáo trên các trang được phân trang.

Cả hai tập lệnh đều yêu cầu xử lý lỗi để đảm bảo rằng quy trình tự động hoạt động tốt ngay cả khi thiếu các phần cụ thể hoặc API hoạt động không mong muốn. Ví dụ, ghi lại bất kỳ lỗi nào gặp phải trong quá trình thực thi, chẳng hạn như khi không tìm thấy nút được nhắm mục tiêu trên trang. Ngoài ra, Người múa rối lệnh đảm bảo rằng các thành phần động, chẳng hạn như liên kết quảng cáo, được tải đầy đủ trước khi tập lệnh cố gắng tương tác. Điều này làm cho nó cực kỳ tiện lợi khi làm việc với các trang web phụ thuộc nhiều vào JavaScript để hiển thị nội dung vì nó tránh được các sự cố do tải trang bị thiếu hoặc không đầy đủ.

Tập lệnh hoàn chỉnh sử dụng Axios, một ứng dụng khách HTTP Node.js dựa trên các lời hứa, ở phần phụ trợ. Ở đây, chúng tôi cố gắng tìm nạp dữ liệu trực tiếp từ điểm cuối API, theo lỗi HTTP 405, điểm này không chấp nhận truy vấn. Để tránh điều này, tập lệnh sẽ gửi một yêu cầu, có thể được máy chủ chấp thuận. Phương pháp này phù hợp hơn với những người dùng muốn trích xuất dữ liệu mà không cần phải điều hướng giao diện người dùng, nhưng nó liên quan đến việc hiểu cấu trúc và hành vi của API của máy chủ. Việc xử lý lỗi đảm bảo rằng mọi lỗi yêu cầu API đều được báo cáo, giúp khắc phục sự cố truy xuất dữ liệu phía máy chủ dễ dàng hơn.

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

Tối ưu hóa phân trang JavaScript để quét web và thu thập dữ liệu

Khi khám phá các trang web có hệ thống phân trang dựa trên JavaScript, điều quan trọng là phải điều tra một số phương pháp để trích xuất dữ liệu nhanh chóng. Một tùy chọn đôi khi bị bỏ qua là chặn các yêu cầu mạng do cơ chế phân trang đưa ra. Bằng cách xem xét cẩn thận các truy vấn được thực hiện trong Công cụ dành cho nhà phát triển của trình duyệt, đặc biệt là tab "Mạng", bạn có thể xác định điểm cuối được sử dụng để tìm nạp dữ liệu cho mỗi trang. Các hệ thống dựa trên JavaScript có thể sử dụng hoặc yêu cầu tải dữ liệu động mà không thay đổi URL, trái ngược với cách phân trang truyền thống yêu cầu thay đổi tham số URL.

Để trích xuất các liên kết hoặc dữ liệu từ các trang web đó, hãy chặn các yêu cầu và truy xuất dữ liệu mà chúng trả về. Puppeteer và các công cụ khác cho phép bạn giám sát lưu lượng mạng và thu thập dữ liệu hữu ích. Khi chiến lược này không thể thực hiện được do các ràng buộc phía máy chủ, việc hiểu hành vi API trở nên quan trọng. Một số API, chẳng hạn như , có thể cấm các phương pháp cụ thể như và chỉ cho phép truy vấn. Việc điều chỉnh các truy vấn của bạn để phù hợp với phương pháp dự định của API là giải pháp hiệu quả cho những hạn chế này.

Cuối cùng, trong khi loại bỏ dữ liệu được phân trang, điều quan trọng là phải cho phép tạm dừng phù hợp giữa các yêu cầu. Nhiều trang web sử dụng thuật toán giới hạn tỷ lệ để ngăn chặn hành vi lạm dụng và việc gửi quá nhiều yêu cầu liên tiếp có thể khiến địa chỉ IP của bạn tạm thời bị đưa vào danh sách đen. Để tránh bị phát hiện và đảm bảo trích xuất dữ liệu thành công, hãy thêm độ trễ ngẫu nhiên giữa các truy vấn hoặc giới hạn số lượng yêu cầu đồng thời. Sử dụng các công cụ như trong Node.js và việc xử lý tốc độ phù hợp là một cách tiếp cận tuyệt vời để đạt được điều này.

1. Phân trang dựa trên JavaScript là gì?
2. Phân trang dựa trên JavaScript là cách mà các nút phân trang sử dụng JavaScript để tải động tài liệu mới một cách thường xuyên mà không cần thay đổi URL.
3. Làm cách nào tôi có thể cạo dữ liệu từ trang web được phân trang bằng JavaScript?
4. Bạn có thể sử dụng các công cụ như hoặc để tự động hóa các lần nhấp vào nút phân trang hoặc nắm bắt các yêu cầu mạng trong quá trình phân trang.
5. Tại sao API trả về lỗi 405 Method Not Allowed?
6. Điều này xảy ra do API chỉ hỗ trợ một số phương thức HTTP nhất định. Ví dụ, nó có thể chặn yêu cầu trong khi cho phép yêu cầu.
7. Tôi có thể sửa đổi URL để điều hướng các trang không?
8. Trong phân trang dựa trên JavaScript, bạn thường không thể thay đổi URL trực tiếp. Để điều hướng, bạn cần kích hoạt các sự kiện JavaScript hoặc sử dụng điểm cuối API.
9. Tôi có thể sử dụng công cụ nào để thu thập dữ liệu được phân trang?
10. Các chương trình cạo phổ biến bao gồm để tự động hóa trình duyệt và cho các yêu cầu HTTP. Cả hai đều xử lý nội dung được phân trang một cách hiệu quả.

Làm việc với phân trang dựa trên JavaScript đòi hỏi phải có sự kết hợp giữa các giải pháp front-end và back-end. Cho dù bạn sử dụng Puppeteer để tự động hóa các hoạt động của trình duyệt hay Axios để giao tiếp trực tiếp với các điểm cuối API, thì việc quét hiệu quả đều cần được thiết kế và thực thi cẩn thận.

Hiểu cách trang web tải và xử lý dữ liệu cho phép bạn viết các tập lệnh hiệu quả để trích xuất thông tin cần thiết. Để tránh các mối nguy hiểm thường xuyên như lỗi 405, hãy cẩn thận giám sát lưu lượng mạng, quản lý giới hạn tốc độ và sử dụng các phương thức HTTP thích hợp.