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,
relattributes,- 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.
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.