A complete AJAX example

There are several third party libraries that simplify the programming that is needed to make your web pages communicate with the server more dynamically, and without doing complete page reloads. However, some of you may be interested in knowing how exactly AJAX functionality can be added to your web sites and without involving any 3rd party software. Below is a complete example. There are 2 source files. The first one is the HTML code. The second one is a JSP file, which handles the AJAX request on the server.

The HTML file:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>My Web Site</title>
    <meta http-equiv="Content-Script-Type" content="text/javascript" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <script type="text/javascript">
      // <![CDATA[
      function getXMLHttpRequest(){
        if(!window.XMLHttpRequest&&window.ActiveXObject){ 
          window.XMLHttpRequest=function(){
            var a=['Microsoft.XMLHTTP','Msxml2.XMLHTTP','Msxml2.XMLHTTP.3.0',
              'Msxml2.XMLHTTP.4.0','Msxml2.XMLHTTP.5.0','Msxml2.XMLHTTP.6.0',
              'Msxml2.XMLHTTP.7.0'];
            var i=a.length;
            while(i--){try{return new ActiveXObject(a[i]);}catch(e){}}
          };
        } 
        if(window.XMLHttpRequest){try{return new XMLHttpRequest();}catch(e){}}
        return null;
      }
      function getTime() {
        var r=getXMLHttpRequest();
        if(r){
          var tb=(new Date()).getTime(); // Random value to prevent caching.
          var pl="task=getTime&rid="+tb;
          r.open("POST","ajaxhandler.jsp",true);
          r.setRequestHeader(
            "Content-Type", "application/x-www-form-urlencoded");
          r.onreadystatechange=function(){getResult(r)};
          try{
            r.send(pl);
          }catch(e){
            alert("Could not send the request: " + e);
          }
        }
      }
      function getResult(r) {
        if(r.readyState==4){
          if(r.status==200){
            document.getElementById("serverTime").innerHTML=
              r.responseXML.documentElement.firstChild.nodeValue;
          }else{
            alert("Server responded with code " + r.status);
          }
        }
      }
      // ]]>
    </script>
  </head>
  <body>
    <form action="">
      <div>
        <input type="button" value="Get server time" onclick="getTime()"/>
        <div id="serverTime"></div>
      </div>
    </form>
  </body>
</html>

The JSP file:

<%@ page import="java.util.Date"
%><%@ page contentType="text/xml"
%><%
    String task = request.getParameter("task");
    if ("getTime".equals(task)) {
        String serverDate = (new Date()).toString();
        %><?xml version="1.0"?><response><%=serverDate%></response><%
    } else {
        %><?xml version="1.0"?><response>Invalid server request</response><%
    }
%>

Koen Aerts

A complete AJAX example

Leave a Reply Cancel reply