Web 2.0 Components - AJAX
Today I’m going to continue my Web 2.0 article. In today’s Blog, I’m going to cover up through AJAX and tomorrow I’ll cover SLATES in detail.
Web 2.0 Components
It’s time to take a look at the components that make up Web 2.0. AJAX provides the visual side of Web 2.0. A number of other technologies make up the collaboration and robustness of Web 2.0. Oracle came up with the SLATES acronym to define the Web 2.0 components. In this section, we’ll discuss AJAX and SLATE:
- AJAX - Asynchronous JavaScript and XML
- SLATES
- Search
- Link
- Authorship
- Tagging
- Extensions
- Signaling
Asynchronous JavaScript and XML (AJAX)
The concepts of AJAX have been around since frames were introduced into the Web browser. At TUSC we first implemented “AJAX” into Web applications more than 10 years ago. In my first presentations on this subject, I called this concept “Field level validation.” AJAX is typically the primary component responsible for making a Web application look and act like a desktop application. AJAX allows your application to seamlessly call the server based on any event (i.e. keystrokes, time passing, mouse movement, etc.).
Remember that a traditional Web application requires that the entire page is sent to browser for every request. In other words, historically when you clicked on a button in a Web application, the browser would send a HTTP request to the Web Server, which in turn would return a Web page in its entirety. There was no such capability available that provided “partial page rendering.” However, using sneaky techniques, developers figured out ways to make “secret” (or hidden) requests of the server via hidden frames using JavaScript, which would force events to occur in the browser – i.e. render a component on a page. As was mentioned above, we often used this technique for things like field level validation for “heads down” data entry pages. This allowed a user to enter the product ID and upon exiting the field (i.e. which caused a JavaScript onBlur event), we would make a call to the server to look up the part number and return a description and a picture of the item. 10 years ago, this was considered innovative. Today – this is built into browser functionality – it’s AJAX.
I’d like you to think about Google Maps for a minute. If you’re not familiar with Google Maps, please take a minute to go to the Website (http://maps.google.com/) and type an address in. Then click on the buttons in the map, such as zoom in and out, view the satellite map, etc. The last step I’d like you to try is to drag and drop the map to view a new portion of the map. Now let’s think about what’s required as these buttons are pushed and mouse events occur. When the page first displays, the server sends the entire page to the browser. From then on, AJAX does most all of the work. When you enter an address, note that your entire page does not refresh, just the map refreshes. If you enter a business name or category (i.e. paint store) with the city, the map (not the page, just the map) refreshes along with the business flags on the map. The browser makes an AJAX call to the server with the address you enter and returns all of the information necessary (as XML) for the map to be updated along with flags associated with business, address, etc. that you provided. When you think about the map, it’s made up of series of images that are displayed contiguously. When you drag and drop the map, Google’s AJAX code keeps track of the images that have already been loaded and only requests (of the server) the images that it needs to complete your “new” map.
Now let’s take this to another level of map integration. Google supplies an AJAX library that you can use to visually display any data you wish to see using their maps. For example, check out the Terabitz Website (http://www.terabitz.com/), which is shown below. This site is called a “Mashup.” Enter an address and Terabitz uses a number of Web Services to pull together data and represent the data graphically using Google Maps. Note that when you drag and drop the map, not only does Google know to pull in the needed additional mapping images, but Terabitz pulls the additional items that belong on your map (such as a recent home sale). How is this possible? The Google AJAX library is able to tell you the latitude and longitude coordinates of map being displayed, which in turn can tell you which additional records (from your database) you should include for mapping. Or in Terabitz case, allows them to call additional Web services to combine information from a number of valuation engines.
Let’s talk about AJAX and how it does all of this cool stuff. First, let’s break down the name itself. AJAX stands for Asynchronous JavaScript and XML. Asynchronous simple means that while the user is continuing to do their work in the browser (i.e. unbeknownst to the user), we’re going to have some code executing asynchronously (i.e. at the same time) in the background. JavaScript is the language that’s used on the browser. XML is how the data from the server is returned to (and then parsed) the JavaScript code. What you do with the data you receive back is up to you. It might display an alert message, fill in text or graphics, or call other JavaScript libraries. Using AJAX you could use Google’s library to place flags (representing properties or businesses) on the map that is current within the window.
Now that you have a better feeling for what you can do with AJAX along with some example applications to visit, you might be wondering, “how do I implement AJAX?” What add-ins are required on the browser? You might be thinking about Applets and Active-X controls that have prompted you for security questions and wondering if AJAX does this too. Fortunately AJAX is built into the browsers and has been for quite some time now. There is nothing to install on the browser – it’s already all there. Specifically, I’m referring to the XMLHttpRequest JavaScript statement. Therefore, all that’s required is that JavaScript is available on the browser. When it comes to “implementing AJAX,” you can write your own AJAX libraries, use vendor provided libraries (such as Google’s AJAX libraries for Google Maps), use retail libraries (such as Backbase), and use open source libraries (such as OpenAJAX Alliance http://www.openajax.org/ and the OpenAjax Hub http://www.openajax.org/OpenAjax%20Hub.html).
If you’re going to write your own AJAX library, you’ll want to search for information on the Web. There are many great articles and tutorials on this subject. I’d recommend taking a look at numerous AJAX-based applications so you get ideas on the functionality that you want to embed into your application.
Take a look at the sites mentioned above and applications like Google Suggest (http://www.google.com/webhp?complete=1&hl=en) where as you type a phrase, Google will offer suggestions (and how many matches there are for each possible phrase that matches):
Google Suggest.
If you’re interested in conferences on AJAX, check out AJAXWorld (http://www.ajaxworld.com/). If you’re interested in playing with some AJAX libraries and learning more about AJAX, I’d recommend checking out the Google libraries. Google’s libraries include the search API (
http://code.google.com/apis/ajaxsearch/) and the Maps API (http://www.google.com/apis/maps/documentation/). Google also has an impressive Mashup editor that you can use (http://code.google.com/gme/) and so much more!
Oracle has also made it clear that they plan to fully support the AJAX and Web 2.0 movements. Oracle calls it Enterprise Web 2.0. In the article titled “Oracle Pushes Enterprise Ajax Frameworks” (http://www.computerwire.com/products/locator/?pid=AE6D8B24-EF32-4251-A5D3-28D8CCE6B5E1) it’s clear just how much Oracle wants to push AJAX and Web 2.0. On numerous fronts, Oracle has been a thought leader for new technologies. For example, before Java Server Faces (JSFs) were a standard, Oracle came up with their own version called User Interface Extensions (UIX). They helped the standards committees establish the standards in the JSF world. This was true for Web Services too. One thing that I greatly respect is that Oracle knows how to be a part of the standards committees and they know how to make sure the open standards are implemented in their development platforms before anyone else does. This is quite impressive.
ajax, authorship, components, extensions, link, search, signaling, slates, tagging, web 2.0
Recent Comments