JavaScript Objects
AJAX applications use the XMLHttpRequest Object and client-side JavaScript, and as these applications become more complex it becomes difficult to maintain the code using plain JavaScript functions. Object-oriented programming is ideal and proven for such complex applications. JavaScript offers many different ways of defining objects, but it's not a full-fledged object-oriented programming language. There are several efforts by different people aimed at providing workarounds for object-oriented programming features such as inheritance, reflection, and interfaces using JavaScript.

JSON (JavaScript Object Notation) provides guidance on JavaScript object notation. In our example, we have used JSON guidelines and defined all the JavaScript functions as objects. We have also defined all the functions as external js files so that all the client-side logic is kept modular and separate from the JSP file, following portlet best practices.

Here is the JavaScript code snippet from the downloadable sample application defining an object and calling the function as object instance methods.

if (typeof(contentHelper) === 'undefined'){
     var contentHelper = [];
}
contentHelper['<%=contentAppNamespace%>'] = new ContentHelper({
     namespace : "<%=contentAppNamespace%>",
     urlContextPath : "<%=request.getContextPath()%>"
});

I defined all other JavaScript functions in different js files. Below is the definition of the 'ContentHelper' function.

function ContentHelper(params){
     //Parameter Variables
     if (!params){
       alert('Missing parameters while instantiating!');
       return {};
     }
     if (typeof(WebFormUtils)=='undefined'){
       alert("The utils package is not included!");
       return;
     }
     var namespace = params.namespace;
     var urlContextPath = params.urlContextPath;
     var formUtils = new WebFormUtils({
     namespace : namespace
});
var AJAXurls = new AJAXURLs({
     namespace : namespace,
     urlContextPath : urlContextPath
});

var AJAXEngine = new AJAXEngine({
     redirectHandlerFunction : formUtils.handleAJAXRedirect,
     retryPromptMessage : "Warning, there was a problem
     during an attempt to communicate with the server\n"
     +
     "Would you like to retry? (It's recommended
     to wait a bit first)\n" +
     "If the problem persists, please contact Help
     Desk",
     autoRetries : 2,
     retryDelay : 10000
});
.....
.....
}

The object/function above in turn instantiates other objects such as AJAXUrls and AJAXEngine.

Handling Namespace with an AJAX Response
As specified in Figure 3, Struts portlets make asynchronous AJAX requests to servlets. Servlets process the request and send the response back to the client, which in turn is suppose to refresh certain parts of the portlet JSP page. Portlets being namespace-aware, it's very important that any Web page refresh be namespace-aware. Unfortunately, the servlet is not aware of the portlet namespace. To resolve this issue we have passed namespace as a parameter for every AJAX request so that the servlet response can prefix all object ids with the appropriate namespace.