Web scraping dengan Ajax: Panduan Lengkap

Mengekstrak data dari situs web yang menggunakan AJAX lebih rumit daripada web scraping biasa. Kontennya tidak ada di dalam HTML awal: muncul setelah kejadian, melalui JavaScript. Oleh karena itu, scraper sederhana tidak dapat mendeteksi apa pun, dan diperlukan pendekatan yang tepat untuk mengambil data dinamis tersebut.

AJAX dan web scraping: mengapa keduanya berbeda?

itu pengikisan web meliputi analisis kode HTML dari sebuah halaman web untuk secara otomatis mengekstrak data yang berguna. Cara ini bekerja dengan sangat baik pada situs statis. Masalahnya muncul ketika AJAX (untuk Asynchronous JavaScript and XML), sebuah teknologi yang memungkinkan pengunggahan atau pembaruan konten tanpa perlu memuat ulang seluruh halaman.

Bagaimana cara kerja AJAX?

Peramban (atau peramban) mengirimkan yang kecil-kecil permintaan asinkron ke server di latar belakang. Server tersebut mengirimkan kembali data tersebut, biasanya dalam format JSON. Halaman tersebut kemudian menampilkan informasi tersebut secara instan, tanpa memuat ulang bagian lainnya. Inilah yang membuat web menjadi lebih cepat dan lebih interaktif.

Mengapa scraping AJAX lebih rumit?

Ketika sebuah situs web menggunakan AJAX, konten yang dimuat tidak muncul di kode sumber HTML awal. Zat tersebut disuntikkan setelahnya oleh JavaScript, setelah halaman terbuka. Scraper biasa hanya mengambil konten statis : jadi dia tidak melihat data dinamis kemudian ditambahkan.

Untuk mengambilnya, kamu memerlukan alat yang mampu menjalankan JavaScript. Dalam praktiknya, ada tiga pendekatan utama:

• Menampilkan langsung permintaan AJAX, yaitu panggilan XHR yang memuat data.
• Mengemudikan sebuah browser tanpa kepala sebagai Selenium Di mana Playwright, yang bertanggung jawab atas hasil akhir (atau rendering) halaman tersebut layaknya browser sungguhan.
• Melalui sebuah Mengikis API semuanya dalam satu.

Apa saja metode dan alat untuk melakukan scraping AJAX?

Metode 1: Meniru permintaan AJAX

Ini adalah metode yang paling efektif untuk Mengambil data dinamis. Alih-alih memuat seluruh halaman, kamu mencegat permintaan AJAX dikirim ke server, lalu kamu mengunduhnya langsung untuk mendapatkan data mentah, biasanya dalam format JSON.

Untuk menemukan panggilan-panggilan tersebut, buka alat pengembang di perambanmu, lalu buka tab Jaringan dengan filter XHR. Di sana kamu akan melihat URL endpoint yang tepat, serta header dan format jawabannya.

Keunggulan teknik ini:

• Sangat cepat dan ringan, karena tidak memerlukan proses rendering halaman secara keseluruhan.
• Dia mengatasi masalah terkait dengan rendering JavaScript.

Keterbatasannya:

• Lagi sulit untuk diterapkan daripada sebuah browser headless.
• Dia meminta sebuah analisis mendalam permintaan, header, dan parameter. Beberapa situs mewajibkan penggunaan token atau header tertentu.

Untuk perpustakaan, kamu bisa memilih sesuai dengan bahasa pemrograman:

• Web scraping dengan Python : perpustakaan requests.
• Web scraping dengan JavaScript : perpustakaan axios.

Metode 2: menggunakan peramban headless

Ini adalah metode paling sederhana untuk Menggores halaman dinamis. Kamu mengotomatiskan browser web sungguhan tanpa antarmuka grafis. Browser ini menampilkan halaman persis seperti yang akan dilakukan oleh pengguna, menjalankan JavaScript, memicu panggilan AJAX dan menampilkan konten akhir.

Manfaatnya:

• Kamu mengikis persis apa yang dilihat pengguna, termasuk konten yang telah dimuat.
• Ini adalah mudah diterapkan, bahkan pada situs yang sangat dinamis.

Kekurangan:

• Ini adalah lebih lambat daripada permintaan langsung.
• Ini adalah memerlukan banyak sumber daya, karena kamu menjalankan peramban yang lengkap.

Alat-alat yang paling sering digunakan untuk pendekatan ini:

• Selenium : alat serbaguna, bersejarah, dan didukung dokumentasi yang lengkap.
• Playwright : modern, cepat, dan kompatibel dengan berbagai peramban.
• Puppeteer : khusus untuk Chrome dan Chromium.

Kamu bisa menggabungkan browser headless dengan BeautifulSoup (modul bs4) : peramban memuat halaman dan memastikan rendering JavaScript, lalu kamu parses HTML yang dihasilkan menggunakan pustaka tersebut.

Metode 3: API scraping serba guna

Beberapa platform menawarkan layanan pengambilan data yang lengkapdi antara alat gratis atau yang berbayar di pasar. Di antaranya adalah Bright Data, ZenRows, ScrapingBee Di mana Crawlbase. Mereka secara otomatis mengelola Perenderan JavaScriptyang proxy danekstraksi data : kamu mengirimkan sebuah URL, lalu mereka mengirimkan kembali konten akhirnya kepadamu.

Manfaatnya:

• Sederhana dan andal, bahkan dalam skala besar.
• Kamu tidak perlu mengelola infrastruktur maupun proxy.

Kekurangan:

• itu biayanya bisa mahal tergantung volumenya.
• Kamu punya kurang kontrol tentang proses.

Bagaimana cara meng-scrape situs web yang menggunakan AJAX?

Berikut ini cara konkret untuk melakukan scraping pada situs yang memuat artikelnya melalui AJAX, dengan dua contoh kode dalam Python : satu dengan requests, satu dengan sebuah browser tanpa kepala.

1. Mengidentifikasi permintaan AJAX di alat pengembangan

Konten yang dimuat melalui AJAX tidak ada di dalam HTML awal. Oleh karena itu, perlu diidentifikasi panggilan jaringan yang mengambil data tersebut.

• Buka alat pengembangan di peramban Anda (tombol F12 atau klik kanan lalu pilih “Periksa”).
• Buka tab Jaringan (Network) lalu muat ulang halaman tersebut.
• Perhatikan mereka permintaan yang dipicu oleh situs, termasuk yang bertugas memuat barang-barang.
• Filter berdasarkan jenis permintaan XHR Di mana fetch : merekalah yang mengumpulkan data di latar belakang.

Klik kueri yang tepat untuk melihat URLnya header dan jawabannya. Biasanya, jawabannya berbentuk JSON, terkadang dalam format HTML.

2. Memilih metode scraping

Setelah permintaan AJAX terdeteksi, kamu memiliki dua pilihan.

• Mengulangi permintaan : kamu langsung menjalankan kembali panggilan tersebut dalam Python menggunakan pustaka requests. Kamu mengambil data mentah dalam JSON atau dalam format HTML, tanpa peramban. Ini adalah cara tercepat.
• Browser tanpa antarmuka pengguna : jika situs tersebut memerlukan eksekusi JavaScript atau interaksi yang rumit (klik, menggulir), gunakan Selenium Di mana Playwright. Alat ini memuat halaman seperti yang dilakukan oleh pengguna sungguhan.

3. Menjalankan permintaan AJAX menggunakan requests

Berikut ini adalah kode dasar untuk memutar ulang panggilan yang teridentifikasi di tab jaringan.

impor permintaan

# URL permintaan AJAX yang teridentifikasi di alat pengembangan
url = 'https://example.com/ajax-endpoint'

# Parameter permintaan (sesuaikan dengan data yang diamati)
params = {
    'page': 1,
    'category': 'technology'
}

# Header yang harus disalin dari tab Network (User-Agent, Referer, token...)
headers = {
    'User-Agent': 'Mozilla/5.0',
    'X-Requested-With': 'XMLHttpRequest'
}

# Mengirimkan permintaan GET
response = requests.get(url, params=params, headers=headers)

# Memeriksa status respons
if response.status_code == 200:
    data = response.json()
    print(data)
else:
    print(f"Kesalahan {response.status_code}")

Rincian baris per baris:

• import requests : memuat pustaka yang mengirimkan permintaan HTTP.
• url : ganti alamat ini dengan endpoint AJAX yang tercantum dalam tab jaringan.
• headers : menyalin header yang terlihat di tab Network. Beberapa situs mengharuskan adanya User-Agenta Referer atau sebuah token CSRF untuk menyetujui permohonan tersebut.
• A status 200 berarti permintaan tersebut berhasil.
• response.json() mengonversi respons JSON menjadi kamus Python.
• print(data) : menampilkan data yang telah diekstraksi (daftar barang, harga, dll.).
• else : menampilkan kode kesalahan jika panggilan gagal (misalnya 403 Di mana 404).

4. Mengambil data dengan browser headless (Selenium + BeautifulSoup)

Apabila mereplikasi kueri tidak cukup, sebuah peramban tanpa kepala menjalankan JavaScript untukmu. Selanjutnya, kamu mengambil kode HTML yang dihasilkan, lalu kamu parses dengan BeautifulSoup (modul bs4).

from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from bs4 import BeautifulSoup
import time

# Menjalankan Chrome dalam mode headless (tanpa antarmuka)
options = Options()
options.add_argument("--headless")
driver = webdriver.Chrome(options=options)

# Membuka halaman yang memuat kontennya melalui AJAX
driver.get("https://example.com")

# Biarkan JavaScript memuat data
time.sleep(3)

# Parsing HTML yang ditampilkan menggunakan BeautifulSoup
soup = BeautifulSoup(driver.page_source, "html.parser")
articles = soup.find_all("div", class_="article")

for article in articles:
    print(article.get_text())

driver.quit()

Ini, Selenium pembalap sejati Chrome yang menjamin rendering di halaman tersebut, dan driver.page_source mengembalikan kode HTML setelah konten AJAX dimuat. Playwright dan Puppeteer berfungsi berdasarkan prinsip yang sama, namun dengan sintaksis yang berbeda.

5. Mengekstrak data dari JSON atau HTML yang telah dirender

Setelah jawaban diperoleh, kamu memisahkan informasi yang berguna sesuai dengan formatnya.

• Respons dalam format JSON : gunakan response.json() untuk mendapatkan kamus Python, lalu mengakses nilai-nilai tersebut berdasarkan kuncinya.
• Jawaban dalam HTML : melalui BeautifulSoup (modul bs4) dengan find Di mana select untuk menargetkan elemen berdasarkan kelas atau ID-nya.

Metode scraping AJAX mana yang harus dipilih?

Setiap pendekatan memiliki kelebihannya masing-masing, tergantung pada tingkat kemampuanmu dan proyek yang kamu kerjakan. Berikut ini perbandingan singkatnya.

Dalam praktiknya: mulailah dengan penyalinan permintaan jika endpoint AJAX mengembalikan JSON yang valid. Lanjutkan ke browser tanpa kepala segera setelah JavaScript menjadi hal yang tak terhindarkan.

Apa saja tantangan dalam scraping AJAX dan solusinya?

Mengekstrak data dari situs web dengan AJAX menimbulkan masalah yang tidak ditemui dalam scraping konvensional. Berikut ini adalah tantangan-tantangan utamanya, dan terutama cara mengatasinya.

Tantangan 1: Konten yang tidak terlihat pada pandangan pertama

Saat kamu memuat halaman AJAX, HTML awal sering kali kosong : data baru akan masuk setelah JavaScript dijalankan. Solusinya adalah menggunakan peramban headless seperti Selenium, Playwright Di mana Puppeteer, yang bertanggung jawab atas rendering seluruh halaman sebelum membaca isinya.

Tantangan 2: Permintaan sederhana yang gagal

Hanya meniru panggilan AJAX saja tidak selalu cukup. Banyak situs melindungi API mereka, dan permintaanmu dapat mengembalikan sebuah kesalahan 403 padahal browser itu sendiri berhasil menerima responsnya. Ada informasi yang kurang dalam permintaanmu. Dalam praktiknya, seringkali diperlukan:

• Salin headers wajib terlihat di tab Network (seperti User-Agent Di mana Referer).
• Tambahkan token CSRF atau cookie sesi jika server mengharuskannya.
• Periksa bagian kode status jawaban untuk segera mengidentifikasi apa yang menjadi kendala.

Tantangan 3: Pengelolaan Waktu Pemuatan

Data yang dimuat melalui AJAX dapat membutuhkan waktu untuk muncul. Jika scraper membaca halaman terlalu dini, ia tidak akan menemukan apa pun. Ada dua pendekatan yang dapat digunakan sesuai kebutuhan:

• A jeda tetap (satu sleep (dalam detik) sebelum membuka halaman. Sederhana, tapi kurang dapat diandalkan.
• A penundaan bersyarat, jauh lebih bersih, melalui menunggu dari Selenium : l’harapan tersirat secara otomatis menunggu hingga elemen-elemen tersebut tersedia, sedangkan’harapan yang tegas menunggu secara spesifik suatu elemen atau kondisi tertentu sebelum melanjutkan.

Tantangan 4: Melakukan scraping dalam skala besar tanpa diblokir

Untuk beberapa halaman saja, tidak ada masalah. Namun, jika kamu melakukan scraping pada ribuan halaman, situs tersebut pada akhirnya akan mendeteksi dan memblokirmu. Agar bisa bertahan lama:

• Lakukan mengarahkan permintaanmu melalui proxy untuk mengganti-ganti alamat IP.
• Patuhi jeda antar panggilan daripada mengirim semuanya sekaligus.
• Mengelola pembagian halaman dan gulir tak terbatas secara bertahap, layaknya seorang pengunjung sejati.

Kuncinya adalah bersikap tidak mencolok. Semakin perilakumu mirip dengan manusia, semakin kecil risiko kamu terputus.

FAQ

Bisakah kamu menggunakan BeautifulSoup untuk melakukan scraping pada sebuah situs web yang menggunakan AJAX?

Tidak secara langsung. BeautifulSoup adalah sebuah pustaka yang berisi penguraian statis : alat ini hanya membaca kode HTML yang dimuat pada awalnya. Karena AJAX menyisipkan konten melalui JavaScript, kamu perlu melengkapinya dengan alat yang mampu menjalankan JavaScript tersebut, seperti Selenium Di mana Playwright. Browser headless mengambil HTML yang telah dirender, lalu kamu meneruskan konten tersebut ke BeautifulSoup untuk parsing.

Pilihan lain: langsung mencegat permintaan AJAX dan mengambil respons JSON, yang seringkali lebih mudah diproses daripada HTML.

Bagaimana cara menangani kesalahan otentikasi atau header sesi pada situs AJAX?

Sebuah situs yang dilindungi dapat menampilkan pesan kesalahan 401 (tidak diizinkan) atau 403 (dilarang) ketika permintaanmu tidak menyertakan yang benar cookie atau header HTTP. Solusinya: Mencegat informasi tersebut selama proses navigasi awal, lalu gunakan kembali dalam permintaan AJAX simulasi kamu. Banyak situs juga mensyaratkan sebuah token CSRF atau sebuah header X-Requested-With, yang tanpanya server akan menolak permintaan tersebut. Justru karena itulah, sebuah permintaan sederhana requests terdampar di tempat kapal itu melintas.

Bagaimana cara melakukan scraping pada situs yang menggunakan fitur infinite scroll atau tombol “Muat Lebih Banyak”?

Pemuatan tak terbatas adalah salah satu bentuk pemuatan AJAX. Untuk mengotomatiskannya, ada dua cara yang bisa kamu gunakan:

• Mengidentifikasi permintaan AJAX yang memuat konten tambahan, lalu menampilkannya secara langsung (biasanya berupa URL dengan parameter paginasi).
• Atau Meniru klik pada tombol “Muat Lebih Banyak” melalui browser headless seperti Selenium Di mana Puppeteer, hingga semua data berhasil diambil.

Apakah ada ekstensi Chrome untuk scraping AJAX?

Ya. Beberapa ekstensi Chrome memudahkan proses scraping AJAX untuk kebutuhan sederhana, tanpa perlu menulis satu baris kode pun. Yang paling terkenal:

• Web Scraper
• Data Miner
• Instant Data Scraper

Apa perbedaan antara “wait” eksplisit dan implisit pada Selenium atau Playwright?

• A tunggu secara implisit adalah pemeriksaan menyeluruh yang diterapkan pada semua elemen. Skripmu akan menunggu selama waktu tertentu sebelum melaporkan kesalahan jika suatu elemen tidak muncul.
• A tunggu secara eksplisit adalah perulangan bersyarat yang difokuskan pada elemen tertentu. Perulangan ini hanya akan berlanjut hingga suatu kondisi terpenuhi.

Dalam praktiknya, tunggu secara eksplisit lebih disarankan: hal ini mencegah penundaan yang tidak perlu dan mengurangi kesalahan ketika konten AJAX membutuhkan waktu lama untuk dimuat.

Singkatnya, melakukan scraping pada situs AJAX memang membutuhkan sedikit lebih banyak trik, tetapi dengan metode yang tepat, tidak ada yang terlewatkan. Bagaimana denganmu? Metode apa yang kamu gunakan untuk melakukan scraping pada situs AJAX? Bagikan tipsmu di kolom komentar.