AJAX and OpenPro’s New Create a Screen

Hardware independent and software independent using the latest technology from OpenPro.com

OpenPro is the leader in web-based ERP software using open source LAMP technology.
Introducing Asynchronous JavaScript Technology and XML (AJAX)

Using JavaScript technology, an HTML page can asynchronously make calls to the server from which it was loaded and fetch content that may be formatted as XML documents, HTML content, plain text, or JavaScript Object Notation (JSON). The JavaScript technology may then use the content to update or modify the Document Object Model (DOM) of the HTML page. The term Asynchronous JavaScript Technology and XML (AJAX) has emerged recently to describe this interaction model.

AJAX is not new. These techniques have been available to developers targeting Internet Explorer on the Windows platform for many years. Until recently, the technology was known as web remoting or remote scripting. Web developers have also used a combination of plug-ins, Java applets, and hidden frames to emulate this interactive model for some time. What has changed recently is the inclusion of support for the XMLHttpRequest object in the JavaScript runtimes of the mainstream browsers. The real magic is the result of the JavaScript technology’s XMLHttpRequest object. Although this object is not specified in the formal JavaScript technology specification, all of today’s mainstream browsers support it. The subtle differences with the JavaScript technology and CSS support among current generation browsers, such as Mozilla Firefox, Internet Explorer, and Safari, are manageable. JavaScript libraries, such as Google apps, Dojo, Prototype, and the Yahoo User Interface Library, have emerged to fill in where the browsers are not as manageable and to provide a standardized programming model. Dojo, for example, is addressing accessibility, internationalization, and advanced graphics across browsers — all of which had been thorns in the side of earlier adopters of AJAX. More updates are sure to occur as the need arises.

What makes AJAX-based clients unique is that the client contains page-specific control logic embedded as JavaScript technology. The page interacts with the JavaScript technology based on events like the loading of a document, a mouse click, focus changes, or even a timer. AJAX interactions allow for a clear separation of presentation logic from the data. An HTML page can pull in bite-size pieces to be displayed. AJAX will require a different server-side architecture to support this interaction model. Traditionally, server-side web applications have focused on generating HTML documents for every client event resulting in a call to the server. The clients would then refresh and re-render the complete HTML page for each response. Rich web applications focus on a client fetching an HTML document that acts as a template or container into which to inject content, based on client events using XML data retrieved from a server-side component.

OpenPro has a unique Create a Screen process where you specify what kind of screen you want to generate, specify the fields to create that screen, and it appears on the screen automatically.

Some uses for AJAX interactions are the following:

  • Real-time form data validation: Form data, such as user IDs, serial numbers, postal codes, or even special coupon codes, that require server-side validation can be validated before the user submits a form.
  • Autocompletion: A specific portion of form data, such as an email address, name, or city name may be autocompleted as the user types.
  • Load on demand: Based on a client event, an HTML page can fetch more data in the background, allowing the browser to load pages more quickly.
  • Sophisticated user interface controls and effects: Controls such as trees, menus, data tables, rich text editors, calendars, and progress bars, allow for better user interaction with HTML pages, generally without requiring the user to reload the page.
  • Refreshing data and server push: HTML pages may poll data from a server for up-to-date data such as scores, stock quotes, weather, or application-specific data. A client may use AJAX techniques to get a set of current data without reloading a full page. Polling is not the most efficient means of ensuring that data on a page is the most current. Emerging techniques, such as Comet, are being developed to provide true server-side push over HTTP by keeping a persistent connection between the client and server.
  • Partial submit: An HTML page can submit form data as needed without requiring a full page refresh.
  • Mashups: An HTML page can obtain data using a server-side proxy or by including an external script to mix external data with your application’s or your service’s data. For example, you can mix content or data from a third-party application, such as Google Maps, with your own application.
  • Page as an application: AJAX techniques can be made to create single-page applications that look and feel much like a desktop application.

Though not all-inclusive, this list shows that AJAX interactions allow web applications to do much more than they have done in the past.

The Anatomy of an AJAX Interaction

Now that we have discussed what AJAX is and what some higher-level issues are, let’s put all the pieces together and look at an AJAX-enabled Java application.

Let’s consider an example. A web application contains a static HTML page, or an HTML page generated in JSP technology that contains an HTML form that requires server-side logic to validate form data without refreshing the page. A server-side web component (servlet) named ValidateServlet will provide the validation logic. Figure 1 describes the details of the AJAX interaction that will provide the validation logic.