Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

AJAX: A Fresh Look at Web Development : Page 2

AJAX enables a dynamic, asynchronous Web experience without the need for page refreshes. Find out how this combination of technologies that you already know and love can reinvent your Web development.


advertisement
Step 1: Creating Web Mail Preview Portlet
 
Figure 1. Web Page That Simulates a Typical Web Mail Portlet

To begin, create the Web page that simulates the look and feel of a typical Web mail portlet and incorporates JavaScript onMouseOver events that trigger AJAX calls (see Figure 1).

In this case, "onMouseOver" events are attached to table fields (TD) that contain names of the e-mail senders. This choice of data fields and the triggering events for AJAX calls are strictly for illustrative purposes:



<form name="inbox"> <table style="previewTable"> <thead id="tableHeader"> <tr> <td>From</td> <td>Subject</td> </tr> </thead> <tbody> <tr class="even"> <td onMouseOver="displayMessageBody(1)">John Doe</td> <td>Greetings</td> </tr> <tr> <td onMouseOver="displayMessageBody(2)">Joanna Doe</td> <td>Status of the report</a></td> </tr> <tr class="even"> <td onMouseOver="displayMessageBody(3)">Jim Doe</td> <td>Meeting is today</td> </tr> ... </tbody> </table> </div> <div id="preview"> <input id="messageBody"class="message" type="textarea" READONLY value=""/> </div> </form>

Notice that the input field "messageBody" is the one that will be populated by the method displayMessageBody, which takes the message ID as a parameter. An AJAX call will use this parameter to request the message details from the server. (Complete source for this application is available for download. Please see resources)

Step 2: Making an AJAX Call
The key element of this implementation is an AJAX call. In the following code, notice how different browser implementations require different instantiation methods for the XMLHttpRequest object:

function getHTTPRequestObject() { var xmlHttpRequest; /*@cc_on @if (@_jscript_version >= 5) try { xmlHttpRequest = new ActiveXObject("Msxml2.XMLHTTP"); } catch (exception1) { try { xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } catch (exception2) { xmlhttp = false; } } @else xmlhttpRequest = false; @end @*/ if (!xmlHttpRequest && typeof XMLHttpRequest != 'undefined') { try { xmlHttpRequest = new XMLHttpRequest(); } catch (exception) { xmlHttpRequest = false; } } return xmlHttpRequest; } var httpRequester = getHTTPRequestObject(); // Create the xml http object on the page load </script>

This code utilizes Internet Explorer annotations to instantiate an AJAX object. Other browsers executing this script will simply ignore the annotated sections of the getHTTPRequestObject() function. Keep in mind that your browser must support JavaScript 1.5 and above.



Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap