I have an interesting project in mind, and I have a question. You can see the look from my jank design below:
I have a variety of technologies I’m planning on leveraging. To give you an idea:
- node.js (for various servers)
- WebSockets (for chat client and some content I’d rather not disclose)
- canvas (for part of the
#content)
Now, with this in mind, I have no problem leveraging technologies that are not supported by most browsers. That’s not any concern.
For my question, on the page I have laid out above, the only thing I want to change (besides the updating chat feature) is the content. I would like to load the “Home”, “About”, “Contact” and “Login” sections of my website into the #content portion of the page.
Now, I have an instinct to say the best way to achieve this goal is through AJAX, but I’m not sure. Since I could possibly just set up some files with the HTML I’d like to display, and then onclick, load them into the #content section.
Is this the best method to use? I’m looking for practicality and performance.
Sorry for the bizarre question.
Thanks!
If you are wanting to load these sections dynamically, ajax is the only way to go. I would definitely check out using a JavaScript library to handle the internals of making ajax calls for you, as writing this part from scratch can be difficult to do in a cross-browser manner. I would highly recommend jQuery for this: http://jquery.com/
I saw you mentioned WebSockets. WebSockets can be good for offloading some intensive JS processing, but it cannot be used for interacting with the DOM (e.g. accessing HTML elements, changing their content, getting form values, etc.).