CODEWITHSUNDEEP
javascripthtmlajax
charleslparker
charleslparker

Reputation: 2024

Loading HTML into a Javascript Variable without AJAX

I have a website in which the total dynamic content is very small (say < 50k). The site itself is just a collection of 5-10 pages of mostly vanilla HTML. To separate the headers and such from the rest of the content, I'd normally use AJAX (so that AJAX queries grab the relevant HTML every time the user clicks on something, or beforehand).

In this case, since the dynamic content is so small, it seems unnecessary (and wasteful) to do 10 AJAX queries to load everything. The question is: "Is there a server-side way to load javascript variables with text from other files without web requests?"

The reason I ask is that it would be very easy for me to do this by hand, by just making a .js file with the variables loaded:

var page1 = "<p>Here's some web content!</p>"
var page2 = "<p>And some more!</p>"

Problem solved. Except that now my content is mixed up with my Javascript, and I have to worry about escaping quotes, and I'm in indentation hell, and so on. I could certainly do server-side scripting (in php or ruby or whatever), but that seems a little heavyweight for such a simple thing.

Is there a cleaner way this can be done server-side? I will take "no" for an answer, here, if that's the best that can be done.

Upvotes: 2

Views: 651

Answers (1)

Matt Lo
Matt Lo

Reputation: 5731

You can define a PHP extension file as javascript via <script type="text/javascript" src="myJavaScriptGlobals.php"></script>

Have PHP dynamically pull all your data together, and output valid JavaScript.

echo '
var page1 = "'.str_replace('"','\"',$page1ContentFromFOPEN).'"; // escape double quotes
';

This makes it so you don't need to do any http requests after page load and achieving instant content load from assigned variables like page1.

Updated to only strip double quotes

Upvotes: 1

Related Questions