In order to save overhead and if I understood your main goal correctly what you actually need to do is to render all your data into a JS variable from your backend and whole that data will be instantly accessed without any AJAX at all. (Talking in modern hype language - your initial state)
I usually have a window.Server to which I pass all the data I need from the backend. For example, from JavaScript I can access a currently logged in user via Server.user.id.
This approach also is flexible, you only pass data needed on certain page, some variables may be passed globally to all views from the layout.
API and AJAX are for a bit different use cases.
Example in PHP:
<script>
Server = {};
Server.user = <?php json_encode(Auth::user()); ?>
</script>
<script src="app.js"></script>
</body>