Welcome to Geoff Hayward's Weblog

JSP: Embed the Application Root for JavaScript
02 May 2018

There are several ways to embed the root of a deployed application into a JSP page for JavaScript to phone home with. However in some server environments some methods work better than others. This short post explains the problem that load balancing can course to the Request object and gives a simple workaround for finding the application's root from its JavaScript.

The most common suggestion for embedding an application's seems to be the following. However, the following does not work when a load balancer forwards HTTPS request to the application's server via HTTP (a.k.a. SSL Off Loading).

function root() { // Bad example
       return "${pageContext.request.scheme}://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}";}";
}

When the application server receives a proxied request via HTTP the JSP will embed the HTTP scheme along with the application server's configured HTTP port.

The simple workaround is to ask JavaScript for its origin and append only the context path from the JSP. Here is a working example:

function root() { // Good example
       return window.location.origin + "${pageContext.request.contextPath}";
}

Hope this helps.

---

Read : JSP: Embed the Application Root for JavaScript

Get XML Content the Smart Way
09 November 2012

This article is written to impart a short cut in getting to the content of an XML document from within a JavaScript script quickly and consistently across browsers. You will see that by skipping the XML document's DOM all together time and bytes are saved.

There is also a second good to the solution that is conveyed in this article. To the best of my knowledge earlier than ie9 versions of Internet Explore do not treat RSS feeds as XML. This means in an Ajax's XMLHttpRequest object there is no responseXML document to work with and that can be a gotcha. Of course you may be able to change the header for RSS documents server side. However let's assume you cannot get access to do so as this article is about dealing with XML responses generally.

Getting the Text from XML the Normal Way

When the XMLHttpRequest object of an Ajax call returns with a responseXML you have a document. A handsome document full of information but, getting hold of the information is not so easy. There are traversals to make you dizzy, elements to store, and then there are cross browser issues for getting hold of the text nodes themselves.

An XML Traversal Example:

var items = responseXML.getElementsByTagName('item');
var title[3] = items[3].getElementsByTagName("title")[0];
var desc[3] = items[3].getElementsByTagName("description")[0];

And in reality there will be a for-each loop or for loop in there somewhere. There will be variables storing elements – allsorts going on. It may not be the hardest thing to do but the JavaScript file is growing byte by byte and the cross browser issues are afoot.

The XML Text Node Cross Browser Issue

Some browsers get hold of the text node like this:

.textContent

Others browsers get hold of the text node like this:

.text

This means making a function that will return the content whichever way the browser likes to work is a likely root. In other words, more bytes are added to the JavaScript file just to deal with cross browser differences. It is at this point you realise you are not working smart and are going down the wrong root. But, there is the better solution.

Getting the Text from XML the Smart Way

While the DOM is normally a good thing in this case it only serves to get in the way. Introduce regular expressions to the mix and add a little responseText and your smart cake is well on its way to tasty.

You may ask: What about the lack of single line mode in JavaScript's regular expression? And I would say good question. The answer is 'no problem' and it is all thanks to:

[\s\S]

This means from the group, denoted by the square brackets, of white space characters and not white space characters. That's right anything and including new line characters.

The example below uses regular expression to collect all the items from an RSS feed into an array. Then it takes the index for getting a random item. It then templates the item as appropriate and finally appends the templated item into the DOM of the main HTML page.

new Request({
    'url': '/testimonials.rss',
    onSuccess: function(responseText){
        //split items into an array 
        var items = responseText.match(/<item>[\s\S]*?<\/item>/g);
	
        // pick an item at random 
        var rand = Math.floor(Math.random()*items.length);

        // template the data 
        var html = '';
        html += /<div class="feed-description">(.*)<\/div>/.exec(items[rand])[1];
        html += '<p class="title">' + /<title>(.*)<\/title>/.exec(items[rand])[1] + '</p>';
        html += '</div>';

        //then wrap and append it to something 
        var testimonial = new Element('div', {
           'class': 'testimonial'
        }).set('html', html);
        $$('.testimonials')[0].grab(testimonial, 'bottom');
    }
}).send();

You can of course template all the items of the feed or nodes of your document the first few items or whatever you need. Using the same method you can get hold of any part of the item or whatever your XML document is. For example:

html += '<a href="' + /<link>(.*)<\/link>/.exec(items[rand])[1] + '">Read more</a>';

will add a link back to the article source as given in the RSS feed.

Conclusion

As XML is often the transport medium given in response to many Ajax requests, it is important to have a good cross browser solution that doesn't necessarily weight down the scripts size. This method is a way of dealing with what has been returned across all browsers without the need of extra functions that only serve to make your solution work a cross browsers. I am finding this approach works very well and it is worth sharing. What do you think about this approach?

---

Read : Get XML Content the Smart Way