AJAX - Streaming Data with AJAX (Chunked Responses & Server-Sent Events)

Streaming data with AJAX refers to the ability to receive and process data from the server incrementally, rather than waiting for the entire response to be completed. This approach is useful in scenarios where data is large, continuously generated, or needs to be displayed in real time.

1. Traditional AJAX vs Streaming

In a typical AJAX request using XMLHttpRequest or the Fetch API, the client sends a request and waits until the server sends back the complete response. Only after the full response is received can it be processed.

Streaming changes this behavior. Instead of sending everything at once, the server sends data in small chunks over time, and the client processes each chunk as it arrives.

2. Chunked Responses

Concept

Chunked transfer encoding is an HTTP feature where the server sends data in pieces (chunks) without specifying the total content length in advance. This allows the client to start processing data immediately.

How It Works

• The client initiates an AJAX request.

• The server keeps the connection open.

• Data is sent in chunks as it becomes available.

• The client reads and processes each chunk progressively.

Example Using Fetch API (Streaming)

fetch('/stream-data')
  .then(response => {
    const reader = response.body.getReader();
    const decoder = new TextDecoder();

    function read() {
      reader.read().then(({ done, value }) => {
        if (done) return;

        const chunk = decoder.decode(value);
        console.log('Received chunk:', chunk);

        read();
      });
    }

    read();
  });

Benefits

• Faster perceived performance since data appears earlier

• Suitable for large datasets

• Reduces memory overhead

Use Cases

• Live logs or monitoring dashboards

• Progressive rendering of large HTML or JSON data

• AI-generated content streaming

3. Server-Sent Events (SSE)

Concept

Server-Sent Events is a web standard that allows a server to push updates to the client automatically over a single, long-lived HTTP connection.

Unlike traditional AJAX, where the client repeatedly polls the server, SSE enables one-way communication from server to client.

How It Works

• The client establishes a connection using EventSource.

• The server continuously sends updates in a specific text-based format.

• The connection remains open for ongoing data delivery.

Example (Client Side)

const eventSource = new EventSource('/events');

eventSource.onmessage = function(event) {
  console.log('New data:', event.data);
};

eventSource.onerror = function() {
  console.log('Connection error');
};

Server Response Format

data: First message

data: Second message

Each message is separated by a blank line.

4. Differences Between Chunked Streaming and SSE

5. Advantages of Streaming in AJAX

• Reduces latency by delivering partial results early

• Improves user experience in real-time applications

• Efficient handling of continuously generated data

• Eliminates the need for frequent polling (in SSE)

6. Limitations and Challenges

• Browser compatibility issues for advanced streaming features

• SSE supports only one-way communication

• Error handling and reconnection logic must be managed carefully

• Requires proper server-side implementation (keeping connections open)

7. When to Use Streaming

Streaming techniques should be used when:

• Data is generated continuously (e.g., logs, notifications)

• Large responses need progressive rendering

• Real-time updates are required without polling

For bidirectional real-time communication, technologies like WebSockets are more suitable.

Conclusion

Streaming data with AJAX enhances the traditional request-response model by enabling incremental data transfer. Chunked responses allow progressive loading of large or delayed data, while Server-Sent Events provide an efficient way to deliver real-time updates from the server. Together, these techniques are essential for building responsive, real-time web applications.