The Ajax roundtrip

The Ajax roundtrip
An Ajax interaction begins with a JavaScript object called XMLHttpRequest. As the name suggests, it allows a client-side script to perform HTTP requests, and it will parse an XML server response. The first step in this Ajax roundtrip is to create an XMLHttpRequest instance. The HTTP method to use for the request (GET or POST) and the destination URL are then set on the XMLHttpRequest object.

Now, remember how that first a in Ajax stands for asynchronous? When you send that HTTP request, you don't want the browser to hang around waiting for the server to respond. Instead, you want it to continue reacting to the user's interaction with the page and deal with the server's response when it eventually arrives. To accomplish this, you can register a callback function with the XMLHttpRequest and then dispatch the XMLHttpRequest asynchronously. Control then returns to the browser, but the callback function will be called when the server's response arrives.

On the Java Web server, the request arrives just like any other HttpServletRequest. After parsing the request parameters, the servlet invokes the necessary application logic, serializes its response into XML, and writes it to the HttpServletResponse.

Back on the client side, the callback function registered on the XMLHttpRequest is now invoked to process the XML document returned by the server. Finally, the user interface is updated in response to the data from the server, using JavaScript to manipulate the page's HTML DOM. Figure 1 is a sequence diagram of the Ajax roundtrip.