There is no standard way to include an html fragment into an html page. You either have to use weird hacks or wait until HTML import becomes a features supported my most current browsers. Most likely this will take years, so let's have a look at the weird hacks. In my particular use case, I wanted to show some user specific data on a pure HTML page. The data were to be delivered by a servlet, so the basic idea was something like that:
HelloThe servlets NameServlet and PostCounterServlet were intended to deliver simple html fragments (just a name and a number).
Unfortunately, there is no include tag, so you can't do that. What you can do is to load a javascript file. Thus there are two strategies:
- Write a servlet that delivers a javascript file inserting the data by simple document.write() statements.
- Write a javascript function that loads an html fragment via XMLHttpRequest and inserts it into a dom tree element.
A simplified example of the first strategy looks like this:
Hello . Today, you already posted blog articles!This HTML page looks like this:
Hello blog administrator. Today, you already posted 3 blog articles!
Instead of embedding the javascript code into the HTML page, you can load it from a servlet.
The second strategy looks less attractive at first glance because it requires some lengthy preparations. However, most of the code is just the boiler plate code you always have to write when you try to do AJAX requests manually without using sophisticated libraries like Prototype or JQuery. You can simplify the code a lot by using an advanced Javascript library.
Copy the following code into an extra javascript file. Give this file the name "IncludeFileSimulator.js":[1]
// This code is an adapted copy of http://ajax.frozenfox.at/ajax_001.html. var request = false; // turn this variable into an array if you want to include multiple files var spanToBeFilled=null; // turn this variable into an array if you want to include multiple files // This methode allows you to include a single file into a named html entity (preferably a span tag with an id). function fillHTMLFragmentIntoSpan(url, span) { spanToBeFilled = span; // Create the request object if (window.XMLHttpRequest) { request = new XMLHttpRequest(); // Mozilla, Safari, Opera } else if (window.ActiveXObject) { try { request = new ActiveXObject('Msxml2.XMLHTTP'); // IE 5 } catch (e) { try { request = new ActiveXObject('Microsoft.XMLHTTP'); // IE 6 } catch (e) {} } } // Verify, if the request could be created // (should fail only with very old browsers) if (!request) { alert("Can't create XMLHTTP instance"); return false; } else { // set the method that will evaluate the request later request.onreadystatechange = interpretRequest; // open request asynchronously request.open('get', url, true); // send request request.send(null); } } // evalutate the request function interpretRequest() { switch (request.readyState) { // readyState 4 means that the request has been completed case 4: if (request.status != 200) { // unfortunately, an error occurred spanToBeFilled.innerHTML = "error " + request.status; } else { var content = request.responseText; // write the content into the tag spanToBeFilled.innerHTML = content; } break; default: break; } }After that, you can include an HTML page like so:
Hello .You can include any file you like, as far as it is a valid HTML fragment. It needn't be a servlet. However, this example uses asynchronous request, so you can use only a single include file.
If you need to include more than one file, you have to replace the global variables request and spanToBeFilled by arrays. I omitted this in order to keep the example simple. Alternatively, you can get rid of the arrays by using synchronous requests: just open the request with request.open('get', url, false);
- You can copy similiar code at a variety of web sites, so I doubt there are any legal restrictions to consider. In this particular case, I took the code from http://ajax.frozenfox.at/ajax_001.html and adapted it to my needs.↩