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 www.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: Click to see the original artwork 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 is used to make an HTTP connection and retrieve the XML document. We need to check if it is IE and create a XMLHttpRequest object.
if (window. XMLHttpRequest) {
req = new XMLHttpRequest ();
else if (window. ActiveXObject) {
req = new ActiveXObject ("Microsoft.XMLHTTP");
} |
Sets the callback function and sends a "GET" request to the server to receive the XML document:
Req.onreadystatechange = ProcessRequest;
Req.open ("Get", url, True);
Req.send (NULL); |
The JSP creates an XML document with the appropriate description based on the proper entry number. Detects the HTTP request return status code with a status of 200, that is OK.
function ProcessRequest () {
if (req.readystate = = 4) {
if (Req.status = = 200) {
Parsemessages ();
} else {
Alert ("Not able to retrieve description");
}
}
} |
ReadyState = 4 The document is loaded.
ReadyState Status Codes:
0 = Uninitialized
1 = Loading
2 = Loaded
3 = Interactive
4 = Complete |
Finally, we parse the XML document and display the introduction.
|