Series of AJAX calls

Consider the following setting:

1. PageA.html - Does an AJAX call to PageB.html
2. PageB.html - Does multiple ajax calls to multiple pages.
3. At the end of all ajax calls PageA.html shall refresh itself to update to new content.

My code:

// PageA.html
<script>
        $(document).ready(function () {
            $("#callAjax").click(function () {
                $(".loading").show();
                $.ajax({
                    type: "GET",
                    url: "PageB.html"
                  }).done(function() {
                      $(".loading").hide();
                });
            });
        });
</script>

// PageB.html
<script type="text/javascript">
        $(document).ready(function() {
            var urls = [
                "url1.php",
                            "url2.php",
                             :
                             :
            ];
            for (var i = 0; i < urls.length; i++) {
                $.ajax({
                    type: "GET",
                    url: urls[i]
                  });
            }
                    window.location = "{{ URL::to('/') }}";
        });
</script>

The result of this setup happens such that there is no updating and the refresh hijacks all the other functions. I guess that is because the AJAX in PageB.html has not yet completed.

I'm doing this to decrease the computation time by PHP and for performance.

Is there any way to get this to work?

UPDATE: I found out that I was wrong about the refresh hijacking. There is no refresh. There is no update. It's just the AJAX call by PageA.html. PageB.html's AJAX calls are not executed.