AJAX in Action

Ajax

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 a schema (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:

<a href= "/" >java & Java EE news<a>

The following is the code for the GetDescription function:

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);
The XMLHttpRequest object will be used to make an http connection and retrieve the xml document. We need to check whether it is IE and create XMLHttpRequest object.

    if (window.XMLHttpRequest) {req = new XMLHttpRequest ();} else if (window.ActiveXObject) {req = new ActiveXObject ("Microsoft.XMLHTTP");}
Set the callback function and send a "GET" request to the server to receive the xml document:

    req.onreadystatechange = processRequest; req.open ("GET", url, true); req.send (null);
JSP will create the xml document with the corresponding introduction according to the appropriate entry number.

<-String channelId = request.getParameter ("channelId"); String itemId = request.getParameter ("itemId"); // String description = new Channel (channelId) .getItemDescription (itemId); String description = "This is the description for the channelId: "+ channelId +" and itemId: "+ itemId; if (description! = null) {response.setContentType (" text / xml "); response.setHeader (" Cache-Control "," no-cache "); response.getWriter (). write (" ");} else {// nothing to show response.setStatus (HttpServletResponse.SC_NO_CONTENT);}->
Check the HTTP request return status code, the status is 200, that is OK.

function processRequest () {if (req.readyState == 4) {if (req.status == 200) {parseMessages ();} else {alert ("Not able to retrieve description");}}}
The document is loaded when readyState = 4

readyState Status Codes: 0 = uninitialized1 = loading2 = loaded3 = interactive4 = complete
Finally, we parse the XML document and display the introduction.

Problem: The only problem is the "&" character I encountered. "&" Is not a valid character in an XML document. So I need to convert him to "&".

function parseMessages () {response = req.responseXML.documentElement; itemDescription = response.getElementsByTagName ('description') [0] .firstChild.data; alert (itemDescription);}
Here is all the code:

HTML Code: <a href="/"> Java & J2EE News <a> 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 == 200) {parseMessages (); } else {alert ("Not able to retrieve description");}}} function parseMessages () {response = req.responseXML.documentElement; itemDescription = response.getElementsByTagName ('description') [0] .firstChild.data; alert ( itemDescription);}
AJAX in Action
[Font: Big Middle Small] [Print this manuscript] 2006-5-3 15:57:08 www.okajax.com (264)
JSP Code: <-String channelId = request.getParameter ("channelId"); String itemId = request.getParameter ("itemId"); description = "This is the description for the channelId:" + channelId + "and itemId:" + itemId; if (description! = null) {response.setContentType ("text / xml"); response.setHeader ("Cache-Control", "no-cache"); response.getWriter (). write ("") ;} else {// nothing to show response.setStatus (HttpServletResponse.SC_NO_CONTENT);}->

Resources:
AJAX Java BluePrints Solutions Catalog
AJAX in Wikipedia
W3C HTTP Status Codes

Google site using AJAX:
Gmail
Google Suggest
Google Maps

About the author: Jay has over 10 years of IT experience, and since Java & J2EE its birth came into contact with them.

Translator: Nicholas @ NirvanaStudio