AJAX in Action

Like everyone else, I was amazed when I saw Ria apps, such as Google Maps and Google suggest. I want to know how it is achieved. Now, the mystery is uncovered, and that is Ajax. This was only known after I spent some time studying Ajax. Here's a good example of how AJAX can be used well in javarss.com.

What is Ajax: AJAX is an architecture (architecture) is not a technology. Ajax represents asynchronous JavaScript and XML.

quip (Punch line): deferred loading

question: When the javarss.com home page loads, he also loads an introduction to all the entries (if you activate them in the settings). These descriptions are displayed only when you move the mouse over the item.

The problem now is that it is not possible for the user to move through all the entries, so preload all the introductions is not a good idea.

solution: using AJAX, the introduction of dynamically loading entries from the server when the mouse is moved.

Doing so will reduce the initial page load size by half or more, so that the page loads faster and can get a better user experience.

Timeline diagram:

We'll first call JavaScript function getdescription in the onmouseover event. Here is the HTML code: Java & EE news java & ee News

 

JavaScript Code:

function GetDescription (channelid,itemid) {

var url = ' http://localhost:8080/getDescription.jsp?channelId= ' + channelid + ' &itemid= ' + itemId;

if (window. XMLHttpRequest) {

req = new XMLHttpRequest ();

else if (window. ActiveXObject) {

req = new ActiveXObject ("Microsoft.XMLHTTP");

}

req.onreadystatechange = ProcessRequest;

Req.open ("Get", url, true);

req.send (null);

}

function ProcessRequest () {

if (req.readystate = = 4) {

if (req.status = =) {

parsemessages ();

} else {

alert ("Not able to retrieve description");

}

}

}

function Parsemessages () {

response = req.responseXML.documentElement;

itemdescription = response.getelementsbytagname (' description ') [0].firstchild.data;

alert (itemdescription);

}

JSP Code:

Resources:

Google sites using Ajax: