Retrieve data from ajax call in segments before it finishes

Question

Retrieve data from ajax call in segments before it finishes

When my browser sends an ajax/json request to the server, it calls several services to gather data of different lengths before displaying it in the browser.

Instead of waiting for all the data to be retrieved at once, I would prefer to receive the data (json) as each individual call completes. This way, I can show the information on the UI even if some service calls take longer than others, preventing a blank screen.

I believe it is possible to have an ASP.NET web page or handler send data back to the client without buffering it.

On the client side, is there a way to process ajax responses before they are fully completed? Can this be achieved?

I am also considering if using a multipart MIME data type could be helpful in this scenario...?

javascript ajax

Answer 1

Answer №1

To enhance the efficiency of your code, consider creating a separate controller or function, depending on your backend platform. Then, issue individual requests in your Javascript code. As Javascript operates asynchronously, the outcomes will be displayed on your webpage as each function is completed.

In .NET pseudocode:

public string Foo() {
    string returnedJson = getFoo();
    return returnedJson;
}
//Repeat the above process for Bar and Bah

Next, in your Javascript (assuming you're using jQuery):

function onFooComplete() {
    //This function should handle displaying the data received from the server
}

$.get('/foo', function(res) {
    onFooComplete(res);
});

If you want a more robust implementation, consider exploring the use of a publish/subscribe methodology in your Javascript code. You can check out https://github.com/cowboy/jquery-tiny-pubsub, which provides a small yet powerful pub/sub implementation for jQuery.

Answer 2

To enhance the efficiency of your code, consider creating a separate controller or function, depending on your backend platform. Then, issue individual requests in your Javascript code. As Javascript operates asynchronously, the outcomes will be displayed on your webpage as each function is completed.

In .NET pseudocode:

public string Foo() {
    string returnedJson = getFoo();
    return returnedJson;
}
//Repeat the above process for Bar and Bah

Next, in your Javascript (assuming you're using jQuery):

function onFooComplete() {
    //This function should handle displaying the data received from the server
}

$.get('/foo', function(res) {
    onFooComplete(res);
});

If you want a more robust implementation, consider exploring the use of a publish/subscribe methodology in your Javascript code. You can check out https://github.com/cowboy/jquery-tiny-pubsub, which provides a small yet powerful pub/sub implementation for jQuery.

Retrieve data from ajax call in segments before it finishes

Answer №1

Similar questions

Symfony: Enhancing array elements with updated bootstrap progress bar

What is causing the loss of context for 'this' in the latest Angular 1.5 components?

Steps to generating a dynamic fabric canvas upon opening a new window

The effective method for transferring a PHP variable value between two PHP files using jQuery

Unable to successfully add element to array using UIKit modal in vuejs

What is the most effective method to convert PHP data into JSON and present it in the jQuery success scenario?

The PHP table fails to show up on the screen

Upon selecting a dropdown menu option, populate a textbox with information retrieved from the database

A step-by-step guide on bringing in objects in JavaScript and Node.js

the event listener for xmlhttprequest on load is not functioning as expected

JSONP callback function enables cross-domain communication by allowing a

When Electron's WebView.loadURL is called, it initiates a reloaded page

Suggestions for breaking out of the function update()?

Styling extracted content using headless browsing algorithm

What could be causing the issue with the exports field in package.json not functioning properly within

Custom server not required for optional dynamic routes in NextJS version 9.5.2

Issues with hover functionality in React Material Design Icons have been identified

steps for executing a Google script

Tips for setting up electron.js on a linux operating system

The integration of Zoom SDK with React and Node inevitably leads to encountering errors