Question

I want my JS to load certain information that needs to come from the server. Examples would be URLs, language specific messages, etc. What is the best way to get this information from the server to the JS?

Right now, I have such values stored in an actual JS file. I don’t like this approach because information is duplicated on the server side.

Would it be a good idea to have an initial JS to make an Ajax request to get all these details? Perhaps store this in a global variable so that it is accessible from anywhere? (A benefit of my current approach is that I don’t need to necessarily set such information as a global variable; I could, for example, hard code and alert message where it is needed).

Any advice on best practice for my situation?

Answer 1

As you already use PHP, why not use that to generate a dynamic .js file that contains all your variables and include that on the page?

PHP:

var foo = '<?php echo $foo; ?>';
var bar = '<?php echo $bar; ?>';

HTML:

<script type="text/javascript" src="vars.php"></script>
<script type="text/javascript" src="actual_javascript_stuff.js"></script>
...

This way you can keep all your config in one place. You can include the PHP’s config file and populate the JavaScript variables using that.