Ajax で 2つ呼び出した処理が 1つ目が終わるまで 2つ目が返ってこない

前提

複数の csv ファイルから DBに取り込む処理を作成していて、取り込みに時間がかかるため、途中経過を表示させるのに ajax を使う事にしました。いろいろ調べながら作っていくうち、壁に当たりました。

実現したいこと

下記の test.js（実際は php から出力）から test1.php を呼び出し、csv ファイルの取込処理中の途中経過進捗をファイルに書き込み（file_put_contents()を利用）ます。
test2.php は 1～2秒ごとに呼び出し、上記進捗ファイルを読み（file_get_contents()を利用）取って、クライアントに返します。（下記 test.js では、１回しか呼び出していません。）
そして、クライアントで途中経過を表示しようとしています。
実際には、以下の様な問題の為、0 % からいきなり 100% になってしまいます。
そもそもそういうものなのでしょうか？

発生している問題

test1.php を呼び出した後、すぐに test2.php が呼び出されるのは期待通りなのですが、test1.php は長く処理がかかり、test2.php は瞬間で終わる処理なのにもかかわらず、test1.php の処理が終わるまで、test2.php の応答がありません。
コンソールには、以下の様に表示されます。

console.log

step 1 step 3 <この間が数十秒かかる> step 2 step 4

期待しているのは、以下の様な順番です。

console.log

step 1 step 3 step 4 <この間が数十秒かかる> step 2

該当のソースコード

test.js

$(() => { console.log('step 1'); $.ajax({ url:'./test1.php', type:'POST', data:{ 'file': 'file1.csv', } }) .done((data) => { //import が終わるまで帰ってこない。 console.log('step 2'); }) console.log('step 3'); $.ajax({ url:'./test2.php', type:'GET', }) .done((data) => { //瞬間で返ってくるはず console.log('step 4'); }) });

試したこと

test1.php と test2.php の呼び出し順を変更して動かすと、以下の様なログになります。
ただし、test2.php 呼び出しの .done() 内で setTimeout() を使ってもう一度 test2.php を呼び出しても、test1.php の処理が終わるまで帰ってきません。

console.log

step 1 step 3 step 4 <この間が数十秒かかる> step 2

補足情報（FW/ツールのバージョンなど）

https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js を利用しています。