Web scraping with Ajax: Complete guide

Author :

React :

Comment

Scraping a website that uses AJAX is more complex than traditional web scraping. The content is not in the HTML initial: it comes later, via JavaScript. A simple scraper therefore can't see anything, so you need to take a tailored approach to retrieve this dynamic data.

How Web Scraping Works on a Site That Uses AJAX to Load Data via JavaScript
How Web Scraping Works on a Site That Uses AJAX. ©Christina for Alucare.fr

AJAX and Web Scraping: Why Are They Different?

the web scraping involves analyzing the code HTML from a web page to automatically extract useful data. It works very well on a static site. The problem arises with AJAX (for Asynchronous JavaScript and XML), a technology that allows you to upload or update content without reloading the entire page.

How does AJAX work?

The browser (or browser) sends small asynchronous requests to the server in the background. The server returns the data, often in the format JSON. The page then displays this information on the fly, without reloading the rest of the page. That's what makes the web faster and more interactive.

Diagram showing how AJAX works to load data in the background without reloading the entire web page
How Web Scraping Works on a Site That Uses AJAX. ©Christina for Alucare.fr

Why is AJAX scraping more complex?

When a website uses AJAX, the loaded content does not appear in the initial HTML source code. It is injected afterward by the JavaScript, once the page is open. A standard scraper only retrieves the static content : So he doesn't see the dynamic data added later.

To retrieve them, you need a tool capable of running JavaScript. In practice, there are three main approaches:

  • Directly reproduce the AJAX requests, that is, calls XHR that load the data.
  • To drive a headless browser as Selenium Where Playwright, which handles the rendering (or rendering) of the page, just like a real browser.
  • Go through a Scraping API all-in-one.

What are the methods and tools for AJAX scraping?

Method 1: Replicate the AJAX requests

This is the most effective method for retrieve dynamic data. Instead of rendering the entire page, you intercept AJAX requests sent to the server, and then you run them directly to retrieve the raw data, often in the format JSON.

To identify these calls, open your browser's developer tools, then the tab Network with the filter XHR. There you'll see the exact URL of the endpoint, the headers and the response format.

The advantages of this technique:

  • Very fast and lightweight, because it does not require a full page render.
  • She gets around the problems related to JavaScript rendering.

Its limitations:

  • More difficult to set up than a headless browser.
  • She is asking for a thorough analysis requests, headers, and parameters. Some sites require a token or specific headers.

As for libraries, you have a choice depending on the language:

The requests (Python) and axios (JavaScript) libraries for replicating AJAX requests
Python and JavaScript offer two libraries for making AJAX requests: requests and axios. ©Christina for Alucare.fr

Method 2: Use a headless browser

This is the simplest method for scrape dynamic pages. You're automating a real web browser without a graphical user interface. It renders the page exactly as a user would, executes the JavaScript, triggers the AJAX calls and displays the final content.

Advantages :

  • You're scraping exactly what the user sees, including the loaded content.
  • This is easy to implement, even on a highly dynamic website.

The inconvenients :

  • This is slower than a direct request.
  • This is resource-intensive, because you're launching a full-featured browser.

The most commonly used tools for this approach:

  • Selenium : a versatile, time-tested, and well-documented tool.
  • Playwright : modern, fast, and cross-browser compatible.
  • Puppeteer : specializing in Chrome and Chromium.

Comparison of the Headless Browsers Puppeteer, Playwright, and Selenium for Scraping AJAX Pages
Puppeteer, Playwright, and Selenium automate a headless browser to scrape dynamic pages. ©Christina for Alucare.fr

You can combine a headless browser with BeautifulSoup (module bs4) : The browser loads the page and handles the rendering JavaScript, and then you parses the HTML rendered using the library.

Method 3: All-in-One Web Scraping APIs

Some platforms offer Comprehensive web scraping servicesamong the free tools or paid services on the market. Examples include Bright Data, ZenRows, ScrapingBee Where Crawlbase. They automatically manage the JavaScript rendering, them proxies and thedata extraction : You send a URL, and they send you the final content.

Advantages :

  • Simple and reliable, even on a large scale.
  • You don't have to manage any infrastructure or proxies on your end.

The inconvenients :

  • the The cost can be high depending on the volume.
  • You have less control on the process.

Bright Data Interface, an all-in-one scraping API for AJAX sites
Bright Data is an all-in-one web scraping API that handles JavaScript rendering and proxies. ©Christina for Alucare.fr

How to scrape a website with AJAX?

Here's a practical guide to scraping a website that loads its articles via AJAX, with two code examples in Python : one with requests, one with a headless browser.

1. Identify AJAX requests in developer tools

The content loaded via AJAX is not in the Original HTML. So we need to identify the network call that retrieves the data.

  • Open the development tools in your browser (key F12 or right-click and select “Inspect”).
  • Go to the tab Network Then refresh the page.
  • Look at the requests triggered by the site, including those that load the articles.
  • Filter by query type XHR Where fetch : These are the ones that retrieve the data in the background.

Click on the correct query to view its URLs, his headers and its response. Most often, the response is in the format JSON, sometimes in HTML.

2. Choose a scraping method

Once you've identified the AJAX request, you have two options.

  • Reproduce the query : You can play the call back directly in Python using the library requests. You retrieve the raw data by JSON or in HTML, without a browser. This is the fastest method.
  • Headless browser : If the site requires JavaScript to run or involves complex interactions (clicks, scrolling), you use Selenium Where Playwright. The tool loads the page just as a real user would.

3. Replicate the AJAX request using requests

Here is the basic code to replay the call identified in the Network tab.

Import requests

# AJAX request URL identified in the developer tools
url = 'https://example.com/ajax-endpoint'

# Request parameters (to be adapted to the observed data)
params = {
    'page': 1,
    'category': 'technology'
}

# Headers to copy from the Network tab (User-Agent, Referer, token...)
headers = {
    'User-Agent': 'Mozilla/5.0',
    'X-Requested-With': 'XMLHttpRequest'
}

# Sending the GET request
response = requests.get(url, params=params, headers=headers)

# Check the response status
if response.status_code == 200:
    data = response.json()
    print(data)
else:
    print(f"Error {response.status_code}")

Line-by-line breakdown:

  • import requests : Loads the library that sends HTTP requests.
  • url : Replace this address with the AJAX endpoint found in the Network tab.
  • headers : Copies the headers displayed in the Network tab. Some sites require a User-Agent, a Referer or a token CSRF to accept the request.
  • A status 200 means that the request was successful.
  • response.json() Converts the JSON response into a Python dictionary.
  • print(data) : Displays the retrieved data (list of items, prices, etc.).
  • else : displays the error code if the call fails (for example 403 Where 404).

4. Web scraping with a headless browser (Selenium + BeautifulSoup)

When reproducing the query isn't enough, a browser headless runs the JavaScript for you. You then retrieve the rendered HTML, and then you parses with BeautifulSoup (module bs4).

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

# Launch Chrome in headless mode (without a user interface)
options = Options()
options.add_argument("--headless")
driver = webdriver.Chrome(options=options)

# Open the page that loads its content via AJAX
driver.get("https://example.com")

# Wait for JavaScript to load the data
time.sleep(3)

# Parse the rendered HTML with 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()

Here, Selenium a real driver Chrome which provides the rendering on the page, and driver.page_source returns the HTML once the AJAX content has loaded. Playwright and Puppeteer work on the same principle, but with different syntax.

5. Extract data from the JSON or rendered HTML

Once you've retrieved the response, extract the relevant information based on its format.

  • Response in JSON : use response.json() to create a Python dictionary, and then access the values using their keys.
  • Response in HTML : goes through BeautifulSoup (module bs4) with find Where select to target elements by their class or ID.

Which AJAX scraping method should you choose?

Each approach has its strengths depending on your skill level and your project. Here's a quick comparison.

Method Speed Complexity Cost Best for…
Query replication Very fast High Weak Large-scale web scraping, structured data
Headless browser Slow Mean Weak Complex websites, fast-paced projects, beginners
Scraping API Fast Very low High Mission-critical projects, with no infrastructure maintenance

In practice: Start with the query reproduction if the AJAX endpoint returns valid JSON. Move on to the headless browser as soon as JavaScript becomes essential.

What are the challenges of AJAX scraping and their solutions?

Scraping a website in AJAX poses problems that traditional scraping does not encounter. Here are the main challenges—and, more importantly, how to work around them.

Challenge 1: Content That Isn't Visible at First Glance

When you load an AJAX page, the The initial HTML is often empty : The data isn't received until after the JavaScript has run. The solution is to use a headless browser such as Selenium, Playwright Where Puppeteer, which provides the rendering the entire page before reading its content.

Challenge 2: Simple Queries That Fail

Simply re-sending the AJAX request isn't always enough. Many websites protect their API, and your query may return a Error 403 whereas the browser does receive the response. There is information missing from your request. In practice, you often need to:

  • Copy the headers required as seen in the Network tab (such as User-Agent Where Referer).
  • Add the token CSRF or session cookies when the server requires them.
  • Check the status code from the response to quickly identify what's causing the problem.

Challenge 3: Managing Loading Times

Data loaded via AJAX can take time to appear. If the scraper reads the page too early, it won't find anything. There are two approaches, depending on your needs:

  • A fixed break (one sleep (in seconds) before loading the page. Simple, but unreliable.
  • A conditional hold, much cleaner, via the waits of Selenium : the’implicit expectation automatically waits for the items to become available, whereas the’explicit expectation waits specifically for a defined element or condition before continuing.

Challenge 4: Large-Scale Web Scraping Without Getting Blocked

For just a few pages, it's no problem. But if you're scraping thousands of pages, the site will eventually detect you and block you. To stay in the game:

  • Do Route your requests through proxies to vary the IP addresses.
  • Respect a time between calls instead of sending everything all at once.
  • Manages the page numbers and the infinite scroll gradually, just like a real visitor.

The key is to be discreet. The more your behavior resembles that of a human, the less likely you are to be kicked out.

FAQs

Can you use BeautifulSoup to scrape a website that uses AJAX?

Not directly. BeautifulSoup is a library of static parsing : It only reads the HTML that is loaded initially. Since AJAX injects content via JavaScript, you need to supplement it with a tool capable of executing that JavaScript, such as Selenium Where Playwright. The headless browser retrieves the rendered HTML, and then you pass that content to BeautifulSoup for the parsing.

Another option: directly intercept the AJAX requests and retrieve the JSON response, which is often easier to process than HTML.

How do you handle authentication errors or session headers on an AJAX site?

A protected site may return an error 401 (not allowed) or 403 (prohibited) when your requests don't include the right ones Cookies or HTTP headers. The solution: intercept this information during the initial navigation, and then reuse them in your simulated AJAX requests. Many sites also require a CSRF token or a header X-Requested-With, without which the server rejects the request. That is precisely why a simple request requests washes up where the boat passes.

How do you scrape a website with infinite scroll or a “Load More” button?

Infinite loading is a type of AJAX loading. To automate it, you have two approaches:

  • Identify the AJAX request which loads the additional content, and then displays it directly (often a URL with a pagination parameter).
  • Or simulate clicks on the "Load more" button via a headless browser such as Selenium Where Puppeteer, until all the data has been retrieved.

Are there any Chrome extensions for AJAX scraping?

Yes. Several Chrome extensions make it easy to perform AJAX scraping for simple tasks, without writing a single line of code. The most well-known ones are:

  • Web Scraper
  • Data Miner
  • Instant Data Scraper

The Instant Data Scraper Chrome extension displays data extracted from a web page using AJAX.
Instant Data Scraper, a Chrome extension for collecting data from web pages without coding. ©Christina for Alucare.fr

What is the difference between an explicit and an implicit “wait” in Selenium or Playwright?

  • A implicit wait is a global wait, applied to all elements. Your script waits for a certain amount of time before raising an error if an element does not appear.
  • A explicit wait is a conditional wait that targets a specific element. It waits only until a condition is met.

In practice, the explicit wait is preferable: it avoids unnecessary delays and reduces errors when AJAX content takes a long time to load.

In short, scraping with AJAX requires a little more know-how, but with the right methods, you won't miss a thing. What about you? What method do you use to scrape AJAX sites? Share your tips in the comments.

👍Your opinion
The article is informative
The article is objective
The article answers my question
Content up to date
🔍 Found any errors? Tell us where!

Found this helpful? Share it with a friend!

This content is originally in French (See the editor just below.). It has been translated and proofread in various languages using Deepl and/or the Google Translate API to offer help in as many countries as possible. This translation costs us several thousand euros a month. If it's not 100% perfect, please leave a comment for us to fix. If you're interested in proofreading and improving the quality of translated articles, don't hesitate to send us an e-mail via the contact form!
We appreciate your feedback to improve our content. If you would like to suggest improvements, please use our contact form or leave a comment below. Your feedback always help us to improve the quality of our website Alucare.fr


Alucare is an free independent media. Support us by adding us to your Google News favorites:

Post a comment on the discussion forum