AJAX Pattern: Level I


 definition
 overview
 ajax pattern in action
 source code



definition

Write AJAX applications in raw JavaScript using HttpRequest and related technologies. No pre-written libraries or frameworks are used.

Frequency of use:   medium low

overview

Developing AJAX-style applications is hard. It requires that you know JavaScript, DOM, CSS, HTML, XML, SOAP, and related technologies. In addition, you are expected to have a good grasp of the many subtle, and not-so-subtle, cross-browser differences.

Fortunately, numerous robust libraries are available, including commercial, open source, Microsoft AJAX, and others. This allows for fast and effective AJAX development. As these libraries mature, the frequency at which developers use low level Javascript will decrease over time.

In the example below, AJAX has been implemented at Level 1, that is, AJAX functionality has been implemented in raw JavaScript without the use of a pre-built AJAX library.


ajax pattern in action

In this example, the user selects a training class using three cascading dropdowns. First the course is selected, then the city, and finally the date. Notice how the selection of one dropdown populates the next dropdown and moves focus forward. No postbacks are issued, which is why you see no page flicker.

This cascading selection process has been AJAXified without the help of any external AJAX library. Items in the dropdown lists are retrieved asynchronously from the server using an HttpRequest object that issues HTTP GETs against a standard .aspx web page.

Alternatively, the HttpRequest object could have issued SOAP requests against a web service, but this would have been more complex because it requires knowledge of how SOAP messages are built.


Example: Select a training class

Choose a course:
Choose a city:
Choose a date:
 
  [No class selected yet]


source code

    Click here to view the source code.