Search code examples
dynamicdynamic-data

'Dynamic' page loading?

I've no idea what it is exaclty I need, but I'll use Facebook as an example. When you load another page (for example: on the home page, you click your profile) the page itself doesn't look like it reloads.
The data loads of course, and the URL changes, however the topbar and chat bar stay put.

I'm looking to do something similar to this. Is this me assuming too much and it's really a simple cache function, or is there a JavaScript way to do it, or any other?

Thanks.

Solution

  • It's using AJAX, which is a combination of various technologies (primarily JavaScript) to achieve this dynamic client-server interaction within the overall context of a page.

    Essentially what you'd have for your setup is something like this:

    1. A page which the user requests and is returned to the browser. This page will contain (or reference in external files, etc.) some JavaScript code to drive the interactive functionality. For example, a "link" may trigger a JavaScript function instead of navigate to another page. That function will make an AJAX call to the server.
    2. An AJAX handler on the server. Think of it like another page, or like a web service of some kind. It expects requests to come from JavaScript code, not from humans. (Though humans can call it manually if they want, so don't return sensitive data or anything like that.) This can return data in any number of formats (JSON, XML, HTML, etc.) and the client-side JavaScript code will use that response in code.

    Depending on your preferred web development technologies, there are various frameworks and tools to help with AJAX functionality. My personal favorite is just to use the AJAX methods in jQuery and to manually control the responses from the server. If you specify your development platform, I can help find some useful examples to get you started.