Storing page-specific javascript on an AJAX driven site?

Question

I have a general question about the placement of javascript code in a AJAX-driven web application. At a previous job, we tended to throw everything in one monolithic file. When maintaining that file became too difficult, we split it up into multiple smaller files and "glued" them back together with a php "loader" (pretty much just a bunch of include statements)

Since all of my pages are dynamically loaded through AJAX, I cannot simply have different files called separately per page.

The obvious disadvantage to this method is that all of your javascript is loaded by the end user, even if it is not required on first page load. (Which compounds the problem, the more pages you have)

To get around this, I started putting page-specific javascript on the template page itself, in a <script> tag at the bottom, which works as intended. Only the javascript I want is loaded.

However, I am unsure of whether this practice is taboo, or if there are better strategies for loading my javascript. I get the feeling that mixing my template with my scripted code is a recipe for disaster..