Best approaches to dynamically loading 'pages' or screens in a web application

I haven't been able to find a good stack overflow thread on this, so I wanted to spur a conversation on it.

What are the various approaches or ways people have for dynamically loading a page for a web application?

To clarify, imagine your web application is like a phone application - you may have various screens - a login screen, a details screen, a settings screen, etc. How would you go about defining them, and then loading them at the appropriate time? I'd like to define the html for each page in a seperate file, and then load that specific file once the开发者_JAVA百科 user 'navigates' to that page. I dont want to do an actual browser navigation, but just swap contents.

Any thoughts or recommendations?

Are you looking for some sort of javascript lazy loading?

I believe normally a map is built in which you register a specific resource name with its relative path. For example:

    resourcemap = { 
      homepage : "/contextroot/home.html",
      settings : "/contextroot/settings/settings.html",
      details : "/contextroot/details.html"
    };

This can be taken many steps further by trying to keep a correlation between the key and the actual path value if needed.

In the end, you'd be doing something like (psuedocode):

    showPage = function (resource, targetPane) {
      if(resourceMap[resource].cachedResponse)
        targetPane.innerHTML = resourceMap[resource].cachedResponse;
                      else {
        xhrRequest({
          url:resourcemap[resource],
          xhrComplete:function (result) {
            resourcemap[resource].cachedResponse = result;
            targetPane.innerHTML = result;
          }
        });
      }
    }

then on your navigation event (such as button click):

    showPage("settings",contentElement);

where contentElement is your target domElement you wish to fill with the returned HTML.

This will go fetch the html page if it does not exist, or use the client's local copy if already fetched before. Additionally, you could use the local storage in the browser assuming you are writing for modern-ish browsers.

As a side note about the resourcemap :

If you namespace the resources properly then you can implicitly know the url needed to get the html. The Dojo toolkit provides good examples of this. Namespacing in a similar fashion can save you some trouble as the directory structure of your app can be used to provide load paths as opposed to manual updates on the object. For example, if you want to load a page at /contextroot/homepage/home.html, then you'd simply invoke a fetch against contextroot.homepage.home.html instead of the following some sort of manually maintained value in the map.

I'd use a javascript mvc framework like backbone or spine and a javascript templating engine like mustache or pure. In modern browsers you can use the history API for changing the url on different screens.

The HTML approach:

Each page is a single HTML file. When you navigate to that page by sending a HTTP GET request, the server returns the page and the browser renders it.

The AJAX views:

Each page is just a view of choice (try EJS), You have a single page and either use #! urls or use HTML5 history page to detect url changes. When a url changes you just send an ajax GET request to the server for a view file and use javascript to render the page.

A simple example would be binding to HTML5 page change event and rendering an EJS view asynchronously (this involves getting the view file over ajax and rendering it in the DOM once the ajax request returns)

The websockets Way:

Using a framework like SocketStream you have a single empty landing page which opens a TCP socket and then the server sends all the HTML/CSS as a single packaged/gzipped file down the stream. The client-side javascript then renders the HTML.

When an event occurs you just send a message down the TCP stream for any data you need and get javascript to render that.

The beauty of the websocket approach is that you load your entire application HTML/CSS/JS/Images/Static content right at the start of the application and only request data over a TCP request after all your static content is cached.

I answered a similar question on StackOverflow, It's quite detailed so I won't re-post it here. But I think it answers your question perfectly.

Help learning from pivotaltracker's javascript, looking for a high level breakdown