Rich user interfaces can be achieved by using a combination of dynamic HTML
elements such as HTML and JavaScript. However, the scope of such an interface
is limited to client-side behavior and has minimal functional implications due
to the lack of server-side interactions. The power of AJAX is in its capability
to provide even richer interface by supplementing its dynamic user interface
with powerful functionality through seamless server-side invocation power. AJAX
allows individual user interface components to communicate with the server and
exchange data without the need for refreshing the whole screen. This is
achieved using a process called Web Remoting. Web remoting, or the process of
communicating between a browser and a server, can be performed in multiple
ways. The popular approaches that are supported by today's browsers are IFrames
and XMLHttpRequest. Dynamic HTML can be complemented with either of these
methods to generate AJAX functionality.
Asynchronous JavaScript and XML or AJAX
Asynchronous communication between the client and the server forms the backbone
of AJAX. Although an asynchronous request-response method can provide signifi
cant value in the development of rich functionality by itself, the results are
lot more pronounced when used in conjunction with other functional standards
such as CSS, DOM, JavaScript, and so on. The predominant popularity of AJAX
stems from such usage.
Client-server communication can be achieved either by using IFrames, or by using
the supported JavaScript function call XMLHttpRequest(). Due to certain
limitations of IFrames, XMLHttpRequest has gained a lot more acceptance. While
IFrame can also be an effective option for implementing AJAX-based solutions,
in this chapter, we will focus largely on an XMLHttpRequest-based
implementation. The primary advantage of using AJAX-based interfaces is that
the update of content occurs without page refreshes. A typical AJAX
implementation using XMLHttpRequest happens as described in the following
steps:
1. An action on the client side, whether this is a mouse click or a timed
refresh, triggers a client event
2. An XMLHttpRequest object is created and confi gured
3. The XMLHttpRequest object makes a call
4. The request is processed by a server-side component
5. The component returns an XML (or an equivalent) document containing the
result
6. The XMLHttpRequest object calls the callback() function and processes the
result
7. The HTML DOM is updated with any resulting values
The following simplifi ed image illustrates the high-level steps involved in an
AJAX request fl ow. The portal client page gets served to the client browser,
where the execution of JavaScript functions takes place.
The following example illustrates the initialization of the request object and
its basic use:
if (window.XMLHttpRequest) // Object of the current window {
// for non-IE browsers
request = new XMLHttpRequest();
}
else if (window.ActiveXObject){
// For IE
request = new ActiveXObject("Microsoft.XMLHTTP");
}
request.onreadystatechange = function()
{
// do something to process response
};
if (request.readyState == 4){
// everything received, OK. Do something now..
} else {
// wait for the response to come to ready state
}
Also read
What is a Portlet? Explain its capabilities.
Explain Portal architecture.
What is PortletSession interface?
What is PortletContext interface?
Why portals?...................
|
