What is the best way to pass server-side variables to client-side JavaScript?

I've done what Stephen Calvert suggests, and I've also just set a bunch of variables in a script tag (the script is generated server side, of course). It all depends on whether or not the config is something you need to access globally in the page or if it is relevant to only a few of the HTML elements. Something like this works (I'm assuming that this is wrapped in a script tag, but I won't put it in here, as it would probably get stripped out): config = { userName: 'Scott Patten', userLogin: 'spatten', hasBoughtCurrentBook: true, followers: ['peterarmstrong', 'rolandtanglao'] }; config is a global variable, so you can then access it from any other script. You can, of course, take this a bit further and create a Config model with defaults and such, but this should be a good start.

I would avoid coupling JavaScript config settings with HTML markup. I think there are better ways of passing data from server to client. The most direct way would be to plug the data directly into the JS. In this example, Zend is assumed to be the server-side framework. YOUR_APP.settings = <?= json_encode($this->settings) ?>; The disadvantages of this method are that the server blocks the JS execution and that the settings may only be set once. The advantage is that the settings are baked directly into the JS and there is no overhead of extra HTTP requests. Alternatively you could use AJAX to request the settings, and invoke a callback function when ready. function getSettings(context, fn) { $.get('/api/getsettings.php', function (data, status) { if (status === 'success') { fn.call(context, data); } }); } getSettings(this, function (settings) { YOUR_APP.settings = settings; // do more stuff... }); The disadvantage of this method is an extra HTTP request, but it allows the client-side to request the settings whenever and however many times it wants. Another disadvantage is that the settings-dependent code must wait for the JSON response, as in the // do more stuff... section.

I would say three come to mind. using html5 data attributes on html elements: <div data-username="foobar" /> setting a global variable inside script tags: <script> var data = {}; </script> Or asyncrhonously loading with ajax requests that return json.

As always, asking for the best solution is problematic without giving very specific parameters for what you are trying to achieve, because for the general problem you describe there are many solutions. Some are already listed, and I include them in this list. The server generates the JavaScript for rendering in the HTML (as Loki and Henrik suggest). This is a nice, low bandwidth solution as all the data you need is automatically in your document in the original HTTP request from the client.  However, this is not optimal if you have a heavily interactive web page because it requires that the server generate the entire document again if there is any state change in your data. Use additional HTTP requests (as Rick suggests) to obtain the data from the server after the document has been rendered by the browser.  This, obviously, is using XHR to make 1 to n requests to different services to get appropriate data. This has the rather obvious side effect of requiring more connections from your web server to your application server, which can cripple a poorly designed infrastructure if the usage is heavy and there are many XHR connections. Use Web Sockets to have the server directly inject data into client DOM or JavaScript objects.  This is relatively cutting edge, even though the capability has been around for some time, but the browsers are only now getting around to fully supporting it.  A good example of this is http://meteor.com/, but some quick Googling will find support for more servers and other frameworks. My personal opinion, which may or may not be applicable for your use case, would be to avoid injecting JSON in your HTML elements and using jQuery to then extract it, because of two reasons: It's unnecessary processing required on the client side when the server can perform the same task.  This is only a valid concern of mine if you have a non-interactive document. It is generally(1) not scalable. As an application continues to mature and the amount, and complexity, of data required by it grows, decoding and parsing large JSON documents stored inside HTML attributes can quickly cause noticeable and unfortunate performance problems for the client. I have found, in my own experiences, that using XHR to request data from the server after the HTML document has been rendered provides the best combination of flexibility, and scalability as an application matures.  This way, your HTML, styling and interactive elements are all decoupled from each other and far more easy to maintain as time goes by. (1) This is an admittedly vague assertion because I don't know the parameters of your specific case.

You could still print the data as an attribute on the elements, and then move it into jQuerys data at client initialization.

Don't fear the script tags for this. You want behavior separated from structure/content, and presentation. Raw data dropped in on the initial page load doesn't really violate that. When you're going through trouble to do it right, something is wrong. Most client-side best practices are all about reducing work not adding to it.

If you want to bootstrap it with the page load, I'd use your server-side template to output the JSON inside a function that gets called. Oversimplified example: <script> $(document).ready(function () { handleData(" HAVE YOUR SERVER SIDE TEMPLATE OUTPUT JSON HERE "); }); </script>

jQuery has a data() function to tie data to a Dom element, its siilar to the one on the HTML5 API, but its usefull in way more browsers. Also if you use a data name that starts with a dot(.) it tirggers a event that you can listen every change and do something like change the value display. PHP example <script> $(document).ready(function(){ $('#something').data('.mydata',<?php echo json_encode($somearray)?>); }); </script> http://api.jquery.com/jQuery.data/