AJAX programming: JavaScript event handlers

Being able to manipulate HTML elements from JavaScript is all very well, but you may be asking when exactly we do this from within our AJAX application? Usually, we perform the manipulation inside a handler function. A handler function is just a function that we "register" with the system, effectively saying "please call this function whenever X happens". Technically, the "thing that happens" to trigger our handler function is referred to as an event. There are three different types of events that we typically might want to attach a handler to within an AJAX application:

the page loading, for example if we want to fetch some "initial data" from the server, but want to make sure that all the page elements are in place before we do so;
clicks, mouse rollovers etc on specific elements in the page that we want to be "active";
on receiving data (or a response) that we have asked for from the server.

The principle for all these types of handlers is essentially the same, but they vary in some details.

Handling mouse clicks, key presses etc

To handle events that occur on specific elements of the page, such as mouse clicks and key presses, we attach an event handler to the element in question. For example, to have a function called when the user clicks on an image, we would do the following:

<img src="searchImage.gif" alt="Search" onClick="searchClicked(event);">

Then, in the JavaScript section of our page, we define the searchClicked() method to take whatever action:

<script language="JavaScript">
function searchClicked(event) {
  // do whatever -- typically make a call to the server
}
...
</script>

The event object passed into our method contains various useful properties that we might want to read as appropriate: the coordinate of a moues click, the Unicode code of a key pressed etc. Common events useful for AJAX applications include:

JavaScript events commonly used in AJAX applications
Event attribute	When called
`onChange()`	The contents of the element (such as a text field) has changed.
`onClick()`	The element is clicked on with the mouse.
`onKeyUp()`	A key is pressed and then released while the given element is focussed (typically a text box).
`onMouseOver`	The user has "hovered" over the element (e.g. we might display a popup, first retrieving relevant data from the server).
`onSubmit`	A form's Submit button has been pressed. We can use this handler to override the default action of replacing the current page and instead handle the request ourselves.

Usually within the event handler of a page element is where we will initiate a call to the server to fetch some data.

The `onLoad` hander

The onLoad handler is called once the current page is finished loading. The syntax is the same as for other element handlers mentioned in the previous section, only the onLoad handler is attached to the page body element. In this case, a JavaScript function called initPage() will be called once the page is loaded:

<body onLoad="initPage();">

An onLoad() handler is typically used in an AJAX application when we need to make a call to the server to fetch the "default" data displayed when the page is first loaded. Various "AJAX-enabled" pages will therefore not need such a handler.

Handling received data/response from the server

When we make a request to the server (as mentioned, generally in response to a user mouse click etc), our program doesn't get back the data immediately. Instead, we register the function that we would like to be called some time in the future when the data is available (or if a connection error occurs etc).

This is the asynchronous bit of AJAX: rather than blocking until a response comes back from the server, our client can potentially continue to do other things in the meantime.

Making a server request from the web page and processing the corresponding data is generally the central component of an AJAX application. On the next page, we look at the XMLHttpRequest object which provides this functionality, and is where the handling to process the incoming data is registered.

If you enjoy this Java programming article, please share with friends and colleagues. Follow the author on Twitter for the latest news and rants. Follow @BitterCoffey

AJAX programming: JavaScript event handlers

Handling mouse clicks, key presses etc

The onLoad hander

Handling received data/response from the server

The `onLoad` hander