Search code examples
javascripthtmllanguage-agnosticgeneric-programming

Optimal way to pass system values to javascript

What is the most effective way to pass object and category ids or other system variables which shouldn't be presented to the user, from server to the browser?

Let's say I have a list of items where I can do something with each of them by javascript, for example show tooltip html or add to favorites by ajax, or display on a map. Where is it best to save that tooltip html, or database id, or geoposition?

Some options I can think of are:

  • some dictionary within <script></script> tag for each item,
  • microformats,
  • inline xml,
  • rel attributes,
  • css class names with specific information, e.g. class="lat-12345 uid-45678",
  • one <script></script> with a dictionary of html ids mapping dictionaries with system values in the template,
  • javascript generated from the database and included via <script src="..."></script> with a dictionary of html ids mapping dictionaries with system values in the template,
  • ajax requests for all cases when I need more information than just id,
  • event handlers with parameters within html tags, e.g. onmouseover="tooltip(this, 123, 'Hello world!')".

P.S. I prefer unobtrusive solutions and also the loading/execution time is important.

Solution

  • Perhaps I am missing something... why not just JSON?

    How you "send" it (either in the initial page load as "javascript" or via AJAX or whatnot) is really just a trivial detail determined mostly by when the data is available. (JSON is a subset of legal JavaScript syntax.)

    Then it's just a matter of the correct transformation. Of course, by pushing this to JSON/JS, you may render some non-JS clients non-interoperable, if that's a consideration for you. If such is indeed the case, why not just perform the transformation server-side using well, any number of the techniques you put at top?

    You can also use arbitrary attributes in HTML (the HTML5 spec may include "data-*" which is formally legalized) -- while not technically "correct", all major web-browsers will accept unknown attributes which can be accessed through the DOM API.