Server blocking parallel ajax request - php

Question

The situation is I am using an API to fetch some data and update my database. I want to show user about the update.
So my ajax request is something like this.
$.ajax({
url: '<?php echo base_url() ?>add_products/',
data: "store_id="+store_id,
type: 'POST',
dataType: 'json',
async : true,
success: function(response) {
if ( response.result == 'success') {
//some data
} else {
genError();
}
}
});
and I am trying to get the process update like this.
$.ajax({
url: '<?php echo base_url() ?>get_product_progress/',
data: "store_id="+store_id,
type: 'POST',
dataType: 'json',
async : true,
success: function(response) {
if ( response.result == 'success') {
console.log(response);
} else {
genError();
}
}
});
I am not using any php session. I pass store id which fetch values from DB. I want to send 1 request that add products and other one to check how many products are added.
The problem is one 1st request of adding product is made, the get progress call does not progress. Get progress call is only made after the add product request is completed. I want them to be parallel.
I have found out that its server problem. Server blocks the second request until first request is completed. So how can I make the server return an ajax request when it is complete and make independent of each other.

Answer 1

You can use $.when.
Here is a good blog post about it.
Docs.
Example:
$.when(
$.ajax({
url: '<?php echo base_url() ?>add_products/',
data: "store_id="+store_id,
type: 'POST',
dataType: 'json',
async : true,
success: function(response) {
if ( response.result == 'success') {
//some data
} else {
genError();
}
}
});
).then(function() {
$.ajax({
url: '<?php echo base_url() ?>get_product_progress/',
data: "store_id="+store_id,
type: 'POST',
dataType: 'json',
async : true,
success: function(response) {
if ( response.result == 'success') {
console.log(response);
} else {
genError();
}
}
});
});