administration mode
Pssst...Ferdy is the creator of JungleDragon, an awesome wildlife community. Visit JungleDragon

 

Article: Domino AJaX jumpstart »

FERDY CHRISTANT - JAN 6, 2006 (11:28:17 AM)

Note: This particular page has become a target for mass spamming, therefore I have disabled comments. Feel free to drop me a line in case you have a question or comment about this article.

Introduction

So by now you have heard of this exciting new web development technology called AJaX. Conceptually, you know what it is, and you feel it is time to try this out in Lotus Domino. Instead of trying to understand an advanced code example that is hard to integrate in your own code, you just want some basic hello-world-style examples that you can extend to your own needs. If this is the case, this article will help you.

The demo database

You can either download the database that contains the code, or try it out online:

Basics

AJaX is typically used in one of the following ways:

  • GET: Updating a web page based on remote (XML) data without refreshing the page
  • POST: Submitting data to a web server without refreshing the current web page

This article will focus on the GET scenario. In this scenario, typically the following flow of events occurs:

  1. Users opens the web page
  2. User triggers an event on the page that requires the loading of remote data.
  3. The remote data is retrieved, meanwhile, the user can continue using the page
  4. The received XML is parsed
  5. The parsed result is served to the user without refreshing the page

The demo database delivers four tests that facilitate this flow:

  • Get all XML (Synchonous). This test receives the full remote XML file and outputs it in a messagebox to the user. This is done synchronously, meaning that the browser waits until the XML is received successfully.
  • Get all XML (Asynchonous). This test receives the full remote XML file and outputs it in a messagebox to the user. This is done asynchronously, meaning that the browser continues processing while the XML is being received in the background.
  • Get piece of XML. This test receives the full XML, parses it, and outputs the parsed results in a messagebox.
  • Get XML and update page. This test receives the full XML, parses it, and outputs the result by updating the current page without refreshing it.

If you have downloaded the demo database, you can run the test above by opening the "ajaxget" form in your browser.

Implementation

The implementation of the demo database is quite straightforward, yet here are some details:

The XML that we are using in the test is contained in the page test.xml. Note that the content type of this page is set to application/xml.

When you develop AJaX solutions, the XMLHttpRequest object is crucial. Browser inconsistencies make using this object quite tedious in some cases. Luckily, there is a javascript framework that hides this complexity: Sarissa. Sarissa is used in all of the example code in the database. To make it available to the calling code, the "sarissa.js" javascript library is stored as a file resource design element in the database.

The "ajaxget" form contains all the test logic. In the HTML Head Content section, the reference to the Sarissa library is made. The four tests we described above are implemented as buttons. Click on each button on the form to see the code behind it. This is the most interesting part of the demo database, because you can reuse these pieces of example code for your own implementations. Finally, an HTML div section is placed on the test form, this is the location of the output of test number 4.

Conclusion

I hope that this little article and the demo database helps you in getting started with using AJaX technology in Domino. There are many resources that deal with this subject into much more detail, but sometimes it is good to get a bare working example from which you can move on.

Resources

 

The list of AJaX resources seems to be endless, but I always remember only one:

www.ajaxpatterns.org

This is a Wiki that contains tons of great links to AJaX resources, including valuable contributions of fellow Lotus bloggers.

comments disabled
Share |