Is the server or the client in control in AJAX?

With AJAX the control can be more centralized in a server-side component or a mix of client-side and server-side controllers.

• Centralized server-side controller:In this type of architecture, the controller ensures that the data on the client and the server are synchronized.
• Client and server-side controllers:In this type of architecture the presentation related control, event processing, page manipulation, and rendering of model data is done through Javascript on the client side.
• The server-side: is responsible for business logic and pushing updated model data to the client.
• Both methods are viable depending on the kind of task. However, the centralized server side controller is preferred as in the other case (Client and server-side controllers) the server might not have the knowledge of the state of the client page.

How Ajax is different?

AJAX allows for asynchronous processing of events. This is different from the traditional sequential events that a users is used to, instead, a user can fire multiple events, each of which process executes independent of each other, enhancing the user experience. In traditional web applications, every time a user triggered an event, the request was sent to the server and the complete page was rendered again as a result of that. AJAX allows for partial page rendering which enable a user to trigger multiple events through different portions of the same web page.

When should I use a Java applet instead of AJAX?

Scenarios to use Java applet instead of AJAX:

• When there is a need for custom data streaming
• Need for graphic manipulation
• Threading related functionality
• Complex and advanced GUI manipulations.

• Applets provide features like custom data streaming, graphic manipulation, threading, and advanced GUIs which AJAX cannot.
• However, with the help of DHTML, the functionalities of AJAX can be extended further.
• AJAX requires that the browser be DHTML and AJAX capable.
• AJAX-based functionality does need to take browser differences into consideration due to which using a JavaScript library such as Dojo which abstracts browser differences is recommended.
• AJAX/DHTML works well for applications where the latest browsers are used.

How is encoding handled in AJAX?

Ways to handle encoding in AJAX:

• Using encodeActionURL() method to refresh the complete page
• Using encodeResourceURL() method to partially update a page.

Why is AJAX a comfortable fit with JAVA?

AJAX is a comfortable fit because, using Java Enterprise Edition the following tasks can be performed:

• AJAX client pages can be generated to server incoming AJAX requests
• Server side state is managed for AJAX clients
• AJAX clients can be connected to enterprise resources.

What is the disadvantage of AJAX?

The disadvantages of AJAX are:

• Search engines would not be able to index an AJAX application.
• The server information can not be accessed within AJAX.
• AJAX is not well integrated with any browser.
• ActiveX requests are enabled only in IE 5 and IE6
• Data of all requests is URL-encoded, which increases the size of the request.

Won't my server-side framework provide me with AJAX?

You may be benefiting from AJAX already. Many existing Java based frameworks already have some level of AJAX interactions and new frameworks and component libraries are being developed to provide better AJAX support. I won't list all the Java frameworks that use AJAX here, out of fear of missing someone, but you can find a good list at www.ajaxpatterns.org/Java_Ajax_Frameworks. If you have not chosen a framework yet it is recommended you consider using JavaServer Faces or a JavaServer Faces based framework. JavaServer Faces components can be created and used to abstract many of the details of generating JavaScript, AJAX interactions, and DHTML processing and thus enable simple AJAX used by JSF application developer and as plug-ins in JSF compatible IDE's, such as Sun Java Studio Creator.

Who’s Using Ajax ?

Google is making a huge investment in developing the Ajax approach. All of the major products Google has introduced over the last year — Orkut, Gmail, the latest beta version of Google Groups, Google Suggest, and Google Maps — are Ajax applications. (For more on the technical nuts and bolts of these Ajax implementations, check out these excellent analyses of Gmail, Google Suggest, and Google Maps.) Others are following suit: many of the features that people love in Flickr depend on Ajax, and Amazon’s A9.com search engine applies similar techniques. 

These projects demonstrate that Ajax is not only technically sound, but also practical for real-world applications. This isn’t another technology that only works in a laboratory. And Ajax applications can be any size, from the very simple, single-function Google Suggest to the very complex and sophisticated Google Maps.

At Adaptive Path, we’ve been doing our own work with Ajax over the last several months, and we’re realizing we’ve only scratched the surface of the rich interaction and responsiveness that Ajax applications can provide. Ajax is an important development for Web applications, and its importance is only going to grow. And because there are so many developers out there who already know how to use these technologies, we expect to see many more organizations following Google’s lead in reaping the competitive advantage Ajax provides.

Moving Forward

The biggest challenges in creating Ajax applications are not technical. The core Ajax technologies are mature, stable, and well understood. Instead, the challenges are for the designers of these applications: to forget what we think we know about the limitations of the Web, and begin to imagine a wider, richer range of possibilities

What's AJAX ?

AJAX (Asynchronous JavaScript and XML) is a newly coined term for two powerful browser features that have been around for years, but were overlooked by many web developers until recently when applications such as Gmail, Google Suggest, and Google Maps hit the streets.

Asynchronous JavaScript and XML, or Ajax (pronounced "Aye-Jacks"), is a web development technique for creating interactive web applications using a combination of XHTML (or HTML) and CSS for marking up and styling information. (XML is commonly used, although any format will work, including preformatted HTML, plain text, JSON and even EBML).

The Document Object Model manipulated through JavaScript to dynamically display and interact with the information presented

The XMLHttpRequest object to exchange data asynchronously with the web server. In some Ajax frameworks and in some situations, an IFrame object is used instead of the XMLHttpRequest object to exchange data with the web server.

Like DHTML, LAMP, or SPA, Ajax is not a technology in itself, but a term that refers to the use of a group of technologies together. In fact, derivative/composite technologies based substantially upon Ajax, such as AFLAX, are already appearing.

Ajax applications are mostly executed on the user's computer; they can perform a number of tasks without their performance being limited by the network. This permits the development of interactive applications, in particular reactive and rich graphic user interfaces.

Ajax applications target a well-documented platform, implemented by all major browsers on most existing platforms. While it is uncertain that this compatibility will resist the advent of the next generations of browsers (in particular, Firefox), at the moment, Ajax applications are effectively cross-platform.

While the Ajax platform is more restricted than the Java platform, current Ajax applications effectively fill part of the one-time niche of Java applets: extending the browser with portable, lightweight mini-applications.

Ajax isn’t a technology. It’s really several technologies, each flourishing in its own right, coming together in powerful new ways. Ajax incorporates:

* standards-based presentation using XHTML and CSS;
* dynamic display and interaction using the Document Object Model;
* data interchange and manipulation using XML and XSLT;
* asynchronous data retrieval using XMLHttpRequest;
* and JavaScript binding everything together.

XMLHttpRequest Properties

• onreadystatechange
  An event handler for an event that fires at every state change.
• readyState
  The readyState property defines the current state of the XMLHttpRequest object.
  Here are the possible values for the readyState propery:

  State	Description
  0	The request is not initialized
  1	The request has been set up
  2	The request has been sent
  3	The request is in process
  4	The request is completed

  readyState=0 after you have created the XMLHttpRequest object, but before you have called the open() method.
  readyState=1 after you have called the open() method, but before you have called send().
  readyState=2 after you have called send().
  readyState=3 after the browser has established a communication with the server, but before the server has completed the response.
  readyState=4 after the request has been completed, and the response data have been completely received from the server.
• responseText
  Returns the response as a string.
• responseXML
  Returns the response as XML. This property returns an XML document object, which can be examined and parsed using W3C DOM node tree methods and properties.
• status
  Returns the status as a number (e.g. 404 for "Not Found" and 200 for "OK").
• statusText
  Returns the status as a string (e.g. "Not Found" or "OK").

XMLHttpRequest Methods

abort(): Cancels the current request.
getAllResponseHeaders(): Returns the complete set of HTTP headers as a string.
getResponseHeader( headerName ): Returns the value of the specified HTTP header.
open( method, URL )
open( method, URL, async )
open( method, URL, async, userName )
open( method, URL, async, userName, password ): Specifies the method, URL, and other optional attributes of a request.

The method parameter can have a value of "GET", "POST", or "HEAD". Other HTTP methods, such as "PUT" and "DELETE" (primarily used in REST applications), may be possible

The "async" parameter specifies whether the request should be handled asynchronously or not . "true" means that script processing carries on after the send() method, without waiting for a response, and "false" means that the script waits for a response before continuing script processing.

send( content ): Sends the request.
setRequestHeader( label, value ) :Adds a label/value pair to the HTTP header to be sent.

XMLHTTPRequest

The XMLHttpRequest object is the key to AJAX. It has been available ever since Internet Explorer 5.5 was released in July 2000, but not fully discovered before people started to talk about AJAX and Web 2.0 in 2005.

XMLHttpRequest (XHR) is an API that can be used by JavaScript, JScript, VBScript and other web browser scripting languages to transfer and manipulate XML data to and from a web server using HTTP, establishing an independent connection channel between a web page's Client-Side and Server-Side.

The data returned from XMLHttpRequest calls will often be provided by back-end databases. Besides XML, XMLHttpRequest can be used to fetch data in other formats, e.g. JSON or even plain text.

Steps to Do Ajax Programming

1.A client event occurs

• A JavaScript function is called as the result of an event
• Example: validateUserId() JavaScript function is mapped as a event handler to a onkeyupevent on input form field whose id is set to "userid"

2. The XMLHttpRequest object is created
      
var ajaxRequest;   // The variable that makes Ajax possible!
function ajaxFunction(){
try{
               // Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
}catch (e){
            // Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
                // Something went wrong
alert("Your browser broke!");
return false;
}
}
}
}
 
3. The XMLHttpRequest object is Configured
In this step we will write a function which will be triggered by the client event and a callback function processRequest() will be registered

function validateUserId() {
ajaxFunction();
  // Here processRequest() is the callback function.
ajaxRequest.onreadystatechange = processRequest;
if (!target) target = document.getElementById("userid");
var url = "validate?id=" + escape(target.value);
ajaxRequest.open("GET", url, true);
ajaxRequest.send(null);
}

4. Making Asynchornous Request to the Webserver
Source code is available in the above piece of code. Code written in blue color is responsible to make a request to the web server. This is all being done using XMLHttpRequest objectajaxRequest

function validateUserId() {
ajaxFunction();
         // Here processRequest() is the callback function.
ajaxRequest.onreadystatechange = processRequest;
if (!target) target = document.getElementById("userid");
var url = "validate?id=" + escape(target.value);
ajaxRequest.open("GET", url, true);
ajaxRequest.send(null);
}

Assume if you enter srinivas in userid box then in the above request URL is set to validate?id=srinivas

5. Webserver returns the result containing XML document
You can implement your server side script in any language. But logic should be as follows

• Get a request from the client
• Parse the input from the client
• Do required processing.
• Send the output to the client.

If we assume that you are going to write a servlet then here is the piece of code

public void doGet(HttpServletRequest request, HttpServletResponse response)throws IOException, ServletException
{
String targetId = request.getParameter("id");
if ((targetId != null) &&
!accounts.containsKey(targetId.trim()))
{
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("true");
}
else
{
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("false");
}
}
 
 6. Callback function processRequest() is called
The XMLHttpRequest object was configured to call the processRequest() function when there is a state change to the readyState of the XMLHttpRequest object. Now this function will recieve the result from the server and will do required processing. As in the following example it sets a variable message on true or false based on retruned value from the Webserver.
 
function processRequest() {
if (req.readyState == 4) {
if (req.status == 200) {
var message = ...;
}

7. The HTML DOM is updated
This is the final step and in this step your HTML page will be updated. It happens in the following way JavaScript technology gets a reference to any element in a page using DOM API
The recommended way to gain a reference to an element is to call.

document.getElementById("userIdMessage"),
     // where "userIdMessage" is the ID attribute
    // of an element appearing in the HTML document
JavaScript technology may now be used to modify the element's attributes; modify the element's style properties; or add, remove, or modify child elements. Here is the example

script type="text/javascrip
function setMessageUsingDOM(message) {
var userMessageElement = document.getElementById("userIdMessage");
var messageText;
if (message == "false") {
userMessageElement.style.color = "red";
messageText = "Invalid User Id";
} else {
userMessageElement.style.color = "green";
messageText = "Valid User Id";
}
var messageBody = document.createTextNode(messageText);
       // if the messageBody element has been created simple
      // replace it otherwise append the new element
if (userMessageElement.childNodes[0]) {
userMessageElement.replaceChild(messageBody, userMessageElement.childNodes[0]);
} else {
userMessageElement.appendChild(messageBody);
}
}
start body
div id="userIdMessage"
end of body

How to Define Ajax Programme

Steps of AJAX Operation

1. A client event occurs
2. An XMLHttpRequest object is created
3. The XMLHttpRequest object is configured
4. The XMLHttpRequest object makes an asynchronous request to the Webserver.
5. Webserver returns the result containing XML document.
6. The XMLHttpRequest object calls the callback() function and processes the result.
7. The HTML DOM is updated

Browser support for Ajax

All the available browsers can not support AJAX. Here is the list of major browsers which support AJAX.

• Mozilla Firefox 1.0 and above
• Netscape version 7.1 and above
• Apple Safari 1.2 and above.
• Microsoft Internet Exporer 5 and above
• Konqueror
• Opera 7.6 and above

So now when you write your application then you would have to take care of the browsers who do not support AJAX.

NOTE: When we are saying that browser does not support AJAX it simply means that browser does not support creation of Javascript object XMLHttpRequest object.
 
Writing Browser Specific Code
 Simple way of making your source code compatible to a browser is to use try...catch blocks in your javascript.

Name: Time:  

In the above Javascript code, we try three times to make our XMLHttpRequest object. Our first attempt:

ajaxRequest = new XMLHttpRequest();

is for the Opera 8.0+, Firefox and Safari browsers. If that fails we try two more times to make the correct object for an Internet Explorer browser with:
 
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");>
If that doesn't work, then they are using a very outdated browser that doesn't supportXMLHttpRequest, which also means it doesn't support Ajax.

Most likely though, our variable ajaxRequest will now be set to whatever XMLHttpRequeststandard the browser uses and we can start sending data to the server.

Technologies used in Ajax

JavaScript

• Loosely typed scripting language
• JavaScript function is called when an event in a page occurs
• Glue for the whole AJAX operation

DOM

• API for accessing and manipulating structured documents
• Represents the structure of XML and HTML documents

CSS

• Allows for a clear separation of the presentation style from the content and may be changed pro-grammatically by JavaScript

 XMLHttpRequest

• JavaScript object that performs asynchrous interaction with the server

Ajax Introduction

• AJAX stands for Asynchronous JavaScript and XML. AJAX is a new technique for creating better, faster, and more interactive web applications with the help of XML, HTML, CSS and Java Script.
• Ajax uses XHTML for content and CSS for presentation, as well as the Document Object Model and JavaScript for dynamic content display.
• Conventional web application trasmit information to and from the sever using synchronous requests. This means you fill out a form, hit submit, and get directed to a new page with new information from the server.
• With AJAX when submit is pressed, JavaScript will make a request to the server, interpret the results and update the current screen. In the purest sense, the user would never know that anything was even transmitted to the server.
• XML is commonly used as the format for receiving server data, although any format, including plain text, can be used.
• AJAX is a web browser technology independent of web server software.
• A user can continue to use the application while the client program requests information from the server in the background
• Intuitive and natural user interaction. No clicking required only Mouse movement is a sufficient event trigger.
• Data-driven as opposed to page-driven

AJAX is based on the following open standards:

• Browser-based presentation using HTML and Cascading Style Sheets (CSS)
• Data stored in XML format and fetched from the server
• Behind-the-scenes data fetches using XMLHttpRequest objects in the browser
• JavaScript to make everything happen