Clash Royale CLAN TAG#URR8PPP

Multiple simultaneous AJAX GET requests block the server until data is returned

I have a rails application where I'm displaying charts using the gridList library. The chart data is fetched from a controller method (in JSON format) asynchronously using AJAX. When the page is loaded initially, each gridlist item shows loading icon and at the same time ajax call is made to the server to fetch the data. Each individual grid item makes a seperate ajax call. The charts are being rendered properly but the issue is that while the AJAX calls are ongoing, the server does not respond to any other requests like refreshing the page or changes in routes. It get blocked until all the charts are loaded, after which the previously called action occurs.

It is a server side issue as the javascript code on front-end works fine while the AJAX call is ongoing.

The grid items are rendered using the partial shown below

%li.grid_item data: id: chart.id
.chart-loading
// loading icon
.chart-content.hide
// chart-content currently hidden.

:javascript
var chart_id = "#chart.id"
$.ajax(
url: "#get_data_charts_path(chart.id)",
success: function (res)
var data = JSON.parse(res)
hideLoadingChart(chart_id) // hides loading and shows chart-content
renderChart(data) // plots chart for the data

)


And the partial is called using the following command -

.grid-container
%ul#grid.grid
= render partial: 'chart', collection: @current_user.get_charts


What could be the problem. Is there a way to cancel all the current AJAX calls when a new request is made to the server.

Is this design where I'm making multiple AJAX calls for each chart correct. I want the charts to load as and when the data is available and not all at once in the end.

2 Answers
2

You can look into $.Deffered which can be used to chain multiple ajax calls to make them sequential. Your server will receive only one ajax call at a time and the next will be made after first one finishes. Your server will be free to respond to other requests.

$.Deffered

A multi threaded server doesn't necessarily mean that requests are handled parallel.

Using multiple AJAX request to load data is not necessarily the problem (it does introduce some overhead), however if you need to load overlapping resources/records to answer each request you might want to ask yourself the question: "Why not load all data points in a single request?" You could for example use an index request and provide the boundaries of the data points, returning only the data points between the boundaries as JSON.

In your case you could load all data points by sending a request to GET /users/:user_id/charts.json to request all charts of one user. Assuming you have the route:

GET /users/:user_id/charts.json

resources :users, only: do
resources :charts, only: :index
end


Other possible solutions to speed up requests are:

#includes

bundle exec puma --workers 3 --threads 0:16

bundle exec puma --help

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.